Container

Preview:

Den perfekte ledsager til hver eneste dag

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt dignissimos minima delectus dolor tenetur obcaecati autem, nobis praesentium iusto? Optio sit, aliquam libero totam quaerat fuga amet magnam sunt voluptate!

Configuration:

Output:

Vue component

            
<FeatureUpsideDown :imageFullscreen="false"/>
            
        

Raw HTML

            
<div class="feature-upside-down">
  <div class="container-tiny">
    <div class="feature-text">
      <h2 class="headline-1 padding150-y">Den perfekte ledsager til hver eneste dag</h2>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deserunt dignissimos minima delectus dolor tenetur obcaecati autem, nobis praesentium iusto? Optio sit, aliquam libero totam quaerat fuga amet magnam sunt voluptate!</p>
    </div>
  </div>
  <div class="feature-image">
    <picture>
      <source media="(min-width: 1440px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-upside-down/feature-upside-down-1-lg.jpg">
      <source media="(min-width: 1024px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-upside-down/feature-upside-down-1-md.jpg">
      <source media="(min-width: 768px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-upside-down/feature-upside-down-1-sm.jpg">
      <source media="(max-width: 767px)" srcset="/_nuxt/src/global/prototype-assets/images/feature-upside-down/feature-upside-down-1-xs.jpg">
      <img src="/_nuxt/src/global/prototype-assets/images/feature-upside-down/feature-upside-down-1-lg.jpg" alt="">
    </picture>
  </div>
</div>
            
        

Comments

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