Foehn Design System

Teaser Small: Alt 

<article class="d-flex
                flex-column">
    <header class="d-flex flex-column">
        <h3 class="mt-0 order-2">
            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                ipsum dolor sit amet.</a>
        </h3>
        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </header>
    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
    <div class="order-2">
        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
            consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
            quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
            explicabo nesciunt.</p>
    </div>
</article>
 
<article class="d-flex
                flex-column
                {%- if styleModifier %} {{ styleModifier }}{% endif -%}">
    <header class="d-flex flex-column">
        <h3 class="mt-0 order-2">
            <a href="communiques-presse-detail" class="vd-link-invisible">Lorem
                ipsum dolor sit amet.</a>
        </h3>
        <p class="small mb-1 order-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </header>
    <p class="small fw-bold order-3">Publié le 1 juillet 2016</p>
    <div class="order-2">
        <p class="vd-font-familiy-headings">Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Est, expedita hic magnam sequi dolorum,
        quas repellendus ad, voluptatum sed fugiat aspernatur. Et, magni
        explicabo nesciunt.</p>
    </div>
</article>
 
{
  "title": "Partager",
  "styleModifier": ""
}
  • Content: 
    @charset 'UTF-8';
@use "sass:math";

.vd-teaser-small {
  display: block;
  margin: $spacer 0 ($spacer * 2);
  padding-bottom: (math.div($spacer, 2));
  border-bottom: 1px solid $vd-primary-darker;

  &:last-of-type {
    border: none;
  }
}

.vd-teaser-small-img {
  max-width: 100%;

  @include media-breakpoint-up(md) {
    max-width: 40%;
  }
}
  • URL: /components/raw/teaser-small/_teaser-small.scss
  • Filesystem Path: src/components/02-molecules/teaser/teaser-small/_teaser-small.scss
  • Size: 349 Bytes

Used for example in the agenda list, with dates as title and a description