Feature Side by Side

Preview:

Headline

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga voluptatibus voluptatum esse! Ut cumrecusandae ab beatae harum, perspiciatis.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto maxime quibusdam nesciunt sint nostrum delectus quasi, necessitatibus in, quidem provident, quisquam ut veniam quo repellat odio voluptatibus soluta impedit minus!

Configuration:

Output:

Vue component

            
<FeatureSideBySide
  :featureWide="false"
  :featureReverse="true"
  :showButton="false"
  :imageSm="require(`@/global/prototype-assets/images/feature-side-by-side/feature-side-by-side-2-sm.jpg`)"
  :imageMd="require(`@/global/prototype-assets/images/feature-side-by-side/feature-side-by-side-2-md.jpg`)"
/>
            
        

Raw HTML

            
<div data-v-4532c77e="" class="feature feature-side-by-side feature-reverse">
  <div class="feature-content">
    <div class="container">
      <div class="wrap">
        <h2 class="title">Headline</h2>
        <div class="richtext">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga voluptatibus voluptatum esse! Ut cumrecusandae ab beatae harum, perspiciatis. <br><br>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Architecto maxime quibusdam nesciunt sint nostrum delectus quasi, necessitatibus in, quidem provident, quisquam ut veniam quo repellat odio voluptatibus soluta impedit minus!
          </p>
        </div>
        
      </div>
    </div>
  </div>
  <div class="feature-media">
    <picture>
      <source media="(min-width: 768px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-side-by-side/feature-side-by-side-2-md.jpg">
      <source media="(max-width: 767px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-side-by-side/feature-side-by-side-2-sm.jpg">
      <img src="/_nuxt/src/global/prototype-assets/images/feature-side-by-side/feature-side-by-side-2-md.jpg">
    </picture>
  </div>
</div>
            
        

Comments

If you forget to set container "size" - it defaults to use <div class="container">