Container

Preview:

Hero header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ullam doloremque adipisci optio ad odio reiciendis sint minima enim, cum, nam odit dolores architecto labore libero, commodi natus sed! Iusto.

Læs mere Læs mere

Configuration:

Output:

Vue component

            
<Hero :textWhite="true" :gradientBlack="true" />
            
        

Raw HTML

            
<div class="hero hero-text-white hero-gradient-black">
  <div class="hero-media">
    <picture>
      <source media="(min-width: 768px)" srcset="/_nuxt/src/global/prototype-assets/images/hero/hero-md.jpg">
      <source media="(max-width: 767px)" srcset="/_nuxt/src/global/prototype-assets/images/hero/hero-sm.jpg">
      <img src="/_nuxt/src/global/prototype-assets/images/hero/hero-md.jpg">
    </picture>
  </div>
  <div class="hero-content">
    <div class="hero-content-wrapper">
      <div class="hero-contant-text">
        <h1 class="headline-2 font-weight-bold">Hero header</h1>
      </div>
      <h4 class="richtext copy-200">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium ullam doloremque adipisci optio ad odio reiciendis sint minima enim, cum, nam odit dolores architecto labore libero, commodi natus sed! Iusto.
        </p>
      </h4>
      <div class="hero-contant-links">
        <a href="/catalogue/hero#enterLinkURL" class="btn btn-secondary" role="button">
          Læs mere
        </a>
        <a href="/catalogue/hero#enterLinkURL" class="btn btn-primary-outline" role="button">
          Læs mere
        </a>
      </div>
    </div>
  </div>
</div>
            
        

Comments

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