Vignettes

Classic vignettes highlight content and are used in threes on the homepage. They take users directly to a page located deeper in the website’s tree structure.

Content editors can choose from the following options: illustrations, packshots and photo essays.

Toutes les applications

Lorem ipsum doloret fabdesignus classicum bossum erae taglio navus.

Lire la suite
<div>
  <img alt=""  class="w-100 mb-4 rounded" src="https://dummyimage.com/240x158/000/fff" />
  <div>
    <h3 class="mb-2">Toutes les applications</h3>
    <p class="mb-3">Lorem ipsum doloret fabdesignus classicum bossum erae taglio navus.</p>
    <a href="#" class="btn btn-link">Lire la suite <i class="icons-arrow-next icons-size-x5 ml-2" aria-hidden="true"></i></a>
  </div>
</div>

Event vignettes

Meetup Open Transformation

du 16 au 19 février 2017

Alsace

Lire la suite
<div class="row">
  <div class="col-12 col-md-4">
    <div class="p-5 vignette-bg d-flex flex-column">
      <h2 class="display-2">Meetup Open Transformation</h2>
      <p class="order-0 mb-1 text-sm text-uppercase">du 16 au 19 février 2017</p>
      <p class="mb-3"><i class="icons-localisation-pin"></i> Alsace</p>
      <a href="#" class="btn btn-link">Lire la suite <i class="icons-arrow-next icons-size-x5 ml-2" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

With highlight

Event highlight vignettes showcase an event or a major news story and offer a direct link from the home page to a content page.

Meetup Open Transformation

16 février 2017

Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.

Dijon

Lire la suite
<div class="row">
  <div class="col-12 col-md-6">
    <img alt=""  class="w-100" src="https://dummyimage.com/640x383/000/fff" />
  </div>
  <div class="col-12 col-md-6">
    <div class="gy-md-5 gr-md-5 d-flex flex-column">
      <h2 class="order-1 display-2">Meetup Open Transformation</h2>
      <p class="order-0 text-sm text-uppercase">16 février 2017</p>
      <p class="order-2 mb-3">Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
      <p class="order-3 mb-3">Dijon</p>
      <a href="#" class="order-4 btn btn-link">Lire la suite <i class="icons-arrow-next icons-size-x5 ml-2" aria-hidden="true"></i></a>
    </div>
  </div>
</div>

Social post

Social media vignettes display social network news feeds and are used in threes on the homepage.

La transformation digitale par SNCF

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit quam, mollis id porta eu, maximus eu diam. Vestibulum suscipit ligula neque, id finibus nibh egestas id.

16/06/2018 à 11:37

<div class="row">
  <div class="col-12 col-md-4">
    <div class="p-5 vignette-bg">
      <h3 class="text-sm text-uppercase text-primary font-weight-medium">La transformation digitale par SNCF</h3>
      <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque velit quam, mollis id porta eu, maximus eu diam. Vestibulum suscipit ligula neque, id finibus nibh egestas id.</p>
      <p class="mb-0"><i class="icons-twitter mr-2" aria-hidden="true"></i> 16/06/2018 à 11:37</p>
    </div>
  </div>
</div>
Did you find what you’re looking for ? If not, please tell us .