Container

Preview:

Teasers overskrift

Teaser title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.

Teaser title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.

Teaser title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.

Teaser title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.

Læs mere

Configuration:

Output:

Vue component

            
<CardTeasers />
            
        

Raw HTML

            
<div class="card-teasers">
  <h2 class="headline-2 font-weight-bold text-center margin300-y">Teasers overskrift</h2>
  <div class="card-teasers-wrapper">
    <div class="card-teaser">
      <div class="card-teaser-image">
        <img src="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-1.jpg" alt="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-1.jpg">
      </div>
      <div class="card-teaser-content">
        <div class="card-teaser-title">Teaser title</div>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.</p>
      </div>
    </div>
    <div class="card-teaser">
      <div class="card-teaser-image">
        <img src="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-2.jpg" alt="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-2.jpg">
      </div>
      <div class="card-teaser-content">
        <div class="card-teaser-title">Teaser title</div>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.</p>
      </div>
    </div>
    <div class="card-teaser">
      <div class="card-teaser-image">
        <img src="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-3.jpg" alt="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-3.jpg">
      </div>
      <div class="card-teaser-content">
        <div class="card-teaser-title">Teaser title</div>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.</p>
      </div>
    </div>
    <div class="card-teaser">
      <div class="card-teaser-image">
        <img src="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-4.jpg" alt="/_nuxt/src/global/prototype-assets/images/card-teasers/card-teasers-4.jpg">
      </div>
      <div class="card-teaser-content">
        <div class="card-teaser-title">Teaser title</div>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur, deserunt quidem ex rerum quod culpa expedita officiis nam. Eum consectetur odio exercitationem, nulla labore quo illum aperiam nobis amet expedita.</p>
      </div>
    </div>
  </div>
  <div class="text-center">
    <a href="/catalogue/cardteasers#enterLinkURL" class="spacing300-y btn btn-primary" role="button">
      Læs mere
    </a>
  </div>
</div>
            
        

Comments

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