Foehn Design System

Teaser List: Default 

<section>
    <h2 class="vd-heading-light-alt h4">Actualités</h2>

    <article role="article" aria-label="Ut condimentum magna a ornare pulvinar">
        <header>
            <h3><a class="vd-link-invisible" href="#">Ut condimentum magna a ornare pulvinar</a></h3>

            <p class="small">
                <span class="sr-only">Publié Publié le </span><time datetime="2017-03-31T13:05:23+00:00" pubdate>31.03.2017</time>
                — <span class="sr-only">Catégorie: </span><a href="#" rel="category" title="Les articles de la categorie Accessibilité">Accessibilité</a>, <a href="#" rel="category" title="Les articles de la categorie Agriculture">Agriculture</a> et <a href="#" rel="category" title="Les articles de la categorie Tourisme">Tourisme</a>
            </p>
        </header>

        <figure class="figure">
            <a href="#"><img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 1140w" alt="Alternative text">

            </a>
        </figure>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia.
        </p>

        <p>
            <a href="#">Lire la suite<span class="sr-only"> de l'article Ut condimentum magna a ornare pulvinar</span></a>
        </p>

    </article>

    <article role="article" aria-label="Etiam vehicula ligula nec convallis fringilla">
        <header>
            <h3><a class="vd-link-invisible" href="#">Etiam vehicula ligula nec convallis fringilla</a></h3>

            <p class="small">
                <span class="sr-only">Publié Publié le </span><time datetime="2017-03-31T13:05:23+00:00" pubdate>31.03.2017</time>
                — <span class="sr-only">Catégorie: </span><a href="#" rel="category" title="Les articles de la categorie Accessibilité">Accessibilité</a>, <a href="#" rel="category" title="Les articles de la categorie Agriculture">Agriculture</a> et <a href="#" rel="category" title="Les articles de la categorie Tourisme">Tourisme</a>
            </p>
        </header>

        <figure class="figure">
            <a href="#"><img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 1140w" alt="Alternative text">

            </a>
        </figure>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia.
        </p>

        <p>
            <a href="#">Lire la suite<span class="sr-only"> de l'article Etiam vehicula ligula nec convallis fringilla</span></a>
        </p>

    </article>

    <article role="article" aria-label="Sed vitae magna eget enim condimentum aliquam semper sit amet velit">
        <header>
            <h3><a class="vd-link-invisible" href="#">Sed vitae magna eget enim condimentum aliquam semper sit amet velit</a></h3>

            <p class="small">
                <span class="sr-only">Publié Publié le </span><time datetime="2017-03-31T13:05:23+00:00" pubdate>31.03.2017</time>
                — <span class="sr-only">Catégorie: </span><a href="#" rel="category" title="Les articles de la categorie Accessibilité">Accessibilité</a>, <a href="#" rel="category" title="Les articles de la categorie Agriculture">Agriculture</a> et <a href="#" rel="category" title="Les articles de la categorie Tourisme">Tourisme</a>
            </p>
        </header>

        <figure class="figure">
            <a href="#"><img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 1140w" alt="Alternative text">

            </a>
        </figure>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia.
        </p>

        <p>
            <a href="#">Lire la suite<span class="sr-only"> de l'article Sed vitae magna eget enim condimentum aliquam semper sit amet velit</span></a>
        </p>

    </article>

    <article role="article" aria-label="Duis lobortis arcu vel leo iaculis pretium">
        <header>
            <h3><a class="vd-link-invisible" href="#">Duis lobortis arcu vel leo iaculis pretium</a></h3>

            <p class="small">
                <span class="sr-only">Publié Publié le </span><time datetime="2017-03-31T13:05:23+00:00" pubdate>31.03.2017</time>
                — <span class="sr-only">Catégorie: </span><a href="#" rel="category" title="Les articles de la categorie Accessibilité">Accessibilité</a>, <a href="#" rel="category" title="Les articles de la categorie Agriculture">Agriculture</a> et <a href="#" rel="category" title="Les articles de la categorie Tourisme">Tourisme</a>
            </p>
        </header>

        <figure class="figure">
            <a href="#"><img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 1140w" alt="Alternative text">

            </a>
        </figure>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia.
        </p>

        <p>
            <a href="#">Lire la suite<span class="sr-only"> de l'article Duis lobortis arcu vel leo iaculis pretium</span></a>
        </p>

    </article>

    <article role="article" aria-label="Morbi fermentum libero at commodo gravida">
        <header>
            <h3><a class="vd-link-invisible" href="#">Morbi fermentum libero at commodo gravida</a></h3>

            <p class="small">
                <span class="sr-only">Publié Publié le </span><time datetime="2017-03-31T13:05:23+00:00" pubdate>31.03.2017</time>
                — <span class="sr-only">Catégorie: </span><a href="#" rel="category" title="Les articles de la categorie Accessibilité">Accessibilité</a>, <a href="#" rel="category" title="Les articles de la categorie Agriculture">Agriculture</a> et <a href="#" rel="category" title="Les articles de la categorie Tourisme">Tourisme</a>
            </p>
        </header>

        <figure class="figure">
            <a href="#"><img class="img-fluid" src="https://placehold.it/960x640/ea09ff/000001?text=Default|960x640" srcset="https://placehold.it/320x210/d8e7ff/000001?text=320x210 320w, https://placehold.it/540x360/a4c6fc/000001?text=540x360 540w, https://placehold.it/720x480/6ba4ff/000001?text=720x480 720w, https://placehold.it/960x640/3f89ff/000001?text=960x640 960w, https://placehold.it/1140x760/0a68ff/fffffa?text=1140x760 1140w" alt="Alternative text">

            </a>
        </figure>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse non autem blanditiis, facere, cumque, eligendi voluptatem moletias vero sint ad optio ab tempora quis, maiores sapiente iusto quia quam. Modi ducimus, cumque repellat, illum perferendis suscipit ad voluptatem veniam delectus qui reiciendis, quod impedit ab libero omnis? Consequatur atque nihil exercitationem est, amet maxime quia.
        </p>

        <p>
            <a href="#">Lire la suite<span class="sr-only"> de l'article Morbi fermentum libero at commodo gravida</span></a>
        </p>

    </article>

    <a href="#" title="Toutes les actualités link to somewhere" class="btn btn-dark">Toutes les actualités</a>

</section>

<hr class="vd-separator vd-separator-gray-bars my-5">
 
<section{% if styleModifier %} class="{{ styleModifier }}"{% endif%}{% if id %} id="{{ id }}"{% endif %}>
  <h2 class="vd-heading-light-alt h4{% if titleModifier %} {{ titleModifier }}{% endif %}">{{ title }}</h2>

  {% for teaser in teasers %}
  {% render '@teaser', teaser, true %}
  {% endfor %}

  {% if homepage %}
  <h3 class="sr-only">Autres actualités</h3>
  <ul class="list-unstyled">
    <li class="mb-3">{% render '@button--default', {text: 'Toutes les actualités'}, true %}</li>
    <li class="mb-3">{% render '@button--secondary', {text: 'Tous les communiqués'}, true %}</li>
    <li class="mb-3">{% render '@button--secondary', {text: 'Décisions du conseil d\'état'}, true %}</li>
  </ul>
  {% else %}
  {% render '@button--default', button, true %}
  {% endif %}
</section>

{% if not homepage %}{% render '@separator--gray-bars-wide', { styleModifier: "my-5" }, true %}{% endif %}
 
{
  "title": "Actualités",
  "button": {
    "text": "Toutes les actualités"
  },
  "teasers": [
    {
      "title": "Ut condimentum magna a ornare pulvinar",
      "authors": false,
      "datePreText": "Publié le "
    },
    {
      "title": "Etiam vehicula ligula nec convallis fringilla",
      "authors": false,
      "datePreText": "Publié le "
    },
    {
      "title": "Sed vitae magna eget enim condimentum aliquam semper sit amet velit",
      "authors": false,
      "datePreText": "Publié le "
    },
    {
      "title": "Duis lobortis arcu vel leo iaculis pretium",
      "authors": false,
      "datePreText": "Publié le "
    },
    {
      "title": "Morbi fermentum libero at commodo gravida",
      "authors": false,
      "datePreText": "Publié le "
    }
  ]
}
  • Content: 
    @charset 'UTF-8';

/**
 * A list that add some background on odd elements
 */

.vd-teaser-list-striped {
  .vd-teaser-list-striped-item:nth-of-type(odd) {
    background-color: $vd-neutral-lighter;
    border-bottom: 1px solid $vd-neutral-lighter;

    @media print {
      background: none !important;
      border-bottom: none !important;
    }
  }

  margin-bottom: $spacer;
}
  • URL: /components/raw/teaser-list/_teaser-list.scss
  • Filesystem Path: src/components/03-organisms/lists/teaser/teaser-list/_teaser-list.scss
  • Size: 380 Bytes

No notes defined.