Content Title

Badges

Standard

PrimarySecondarySuccessErrorLightDark110

Toggle code

<span class="badge badge--primary mr-0.5 mb-0.5">Primary</span>

Pill

Primary110

Toggle code

<span class="badge badge--pill badge--primary mr-0.5 mb-0.5">Primary</span>

Pastille

Toggle code

<button class="btn btn--primary pos-relative mr-0.5 mb-0.5" type="button" aria-describedby="idPastille">Messages
  <span class="badge badge--abs badge--dark" aria-hidden="true">1 </span>
  <span id="idPastille" hidden="">1 unread message</span>
</button>

Breadcrumb

Toggle code

<nav class="breadcrumb" aria-label="Fil d'ariane">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">
        <svg class="icon breadcrumb__icon" aria-hidden="true">
          <use xlink:href="#icon-home"></use>
        </svg>Homepage
      </a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">
        <svg class="icon breadcrumb__icon" aria-hidden="true">
          <use xlink:href="#icon-image"></use>
        </svg>Brand
      </a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#">
        <svg class="icon breadcrumb__icon" aria-hidden="true">
          <use xlink:href="#icon-tag"></use>
        </svg>Category
      </a>
    </li>
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="#" aria-current="page">
        <svg class="icon breadcrumb__icon" aria-hidden="true">
          <use xlink:href="#icon-cart"></use>
        </svg>Product
      </a>
    </li>
  </ol>
</nav>

Toggle linked data

{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [{
   "@type": "ListItem",
   "position": 1,
   "name": "Homepage",
   "item": "https://........................"
 }, {
   "@type": "ListItem",
   "position": 2,
   "name": "Brand",
   "item": "https://........................"
 },{
   "@type": "ListItem",
   "position": 3,
   "name": "Category",
   "item": "https://........................"
 },{
   "@type": "ListItem",
   "position": 4,
   "name": "Product",
   "item": "https://........................"
 }]
}

Buttons

Plain

Base link

Toggle code

<button class="btn btn--primary mr mb" type="button">Button</button>

Expanded

Toggle code

<button class="btn btn--primary btn--block mb" type="button">Expanded</button>

Colors

Toggle code

<div>
  <button class="btn btn--primary mr mb" type="button">Primary</button> 
  <button class="btn btn--secondary mr mb" type="button">Secondary</button> 
  <button class="btn btn--error mr mb" type="button">Error</button> 
  <button class="btn btn--success mr mb" type="button">Success</button> 
  <button class="btn btn--white mr mb" type="button">White</button> 
  <button class="btn btn--light mr mb" type="button">Light</button> 
  <button class="btn btn--dark mr mb" type="button">Dark</button> 
  <button class="btn btn--transparent mr mb" type="button">Transparent</button>
</div>

Outline

Toggle code

<div>
  <button class="btn btn--outline btn--primary mr mb" type="button">Primary</button> 
  <button class="btn btn--outline btn--secondary mr mb" type="button">Secondary</button> 
  <button class="btn btn--outline btn--error mr mb" type="button">Error</button> 
  <button class="btn btn--outline btn--success mr mb" type="button">Success</button> 
  <button class="btn btn--outline btn--light mr mb" type="button">Light</button> 
  <button class="btn btn--outline btn--dark mr mb" type="button">Dark</button>
</div>

Disabled

Base Link

Toggle code

<button class="btn btn--outline btn--primary mr mb" type="button" disabled="disabled">Button outline</button>

Rounded

Toggle code

<button class="btn btn--primary btn--rounded mr mb" type="button">Rounded</button>

With icons

Button

Toggle code

<button class="btn btn--primary mr mb" type="button">
  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-x"></use>
  </svg>
  <span>Button</span>
</button>

Sizes

Toggle code

<button class="btn btn--dark btn--small mr mb" type="button">Small</button>

Loader

Notes :

RGAA Pattern for progressBar : disic.github.io.

Default

With overlay

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quis, ab magni nostrum. Quidem id ipsum recusandae inventore quos accusamus dolorum, eos enim consequuntur! Vitae id amet ullam qui corrupti.

With overlay & white version

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quis, ab magni nostrum. Quidem id ipsum recusandae inventore quos accusamus dolorum, eos enim consequuntur! Vitae id amet ullam qui corrupti.

Toggle code

<div class="loader">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="50" cy="50" r="45"></circle>
  </svg>
</div>

Toggle code

<div class="loader loader--overlay">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="50" cy="50" r="45"></circle>
  </svg>
</div>

Toggle code

<div class="loader loader--white loader--overlay">
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <circle cx="50" cy="50" r="45"></circle>
  </svg>
</div>

Pagination

Toggle code

<nav class="pagination" aria-label="Pagination">
  <a class="btn btn--outline btn--primary btn--small pagination__item" href="#" aria-disabled="true" tabindex="-1" rel="prev" aria-label="Page précédente">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-chevron-left"></use>
    </svg>
  </a>
  <a class="btn btn--primary btn--small pagination__item" href="#" aria-label="Page 1" aria-current="page">
    <span aria-hidden="true">1</span>
  </a>
  <a class="btn btn--outline btn--primary btn--small pagination__item" href="#" aria-label="Page 2">
    <span aria-hidden="true">2</span>
  </a>
  <a class="btn btn--outline btn--primary btn--small pagination__item" href="#" aria-label="Page 3">
    <span aria-hidden="true">3</span>
  </a>
  <span class="btn btn--white btn--small pagination__item pagination__item--ellipsis" aria-hidden="true">…</span>
  <a class="btn btn--outline btn--primary btn--small pagination__item" href="#" aria-label="Dernière page : 99">
    <span aria-hidden="true">99</span>
  </a>
  <a class="btn btn--outline btn--primary btn--small pagination__item" href="#" rel="next" aria-label="Page suivante"> 
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-chevron-right"></use>
    </svg>
  </a>
</nav>

Panels

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea, rem laudantium reiciendis reprehenderit pariatur in.

Nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea rem laudantium reiciendis, reprehenderit.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur distinctio sequi nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea, rem laudantium reiciendis reprehenderit pariatur in.

Nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea rem laudantium reiciendis, reprehenderit.

Toggle code

<div>
  <div class="panel panel--light mb-2 panel--closable" id="msg_6">
    <div class="panel__content">
      <h4 class="panel__title">Title</h4>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur 
        <a href="#">distinctio sequi</a> nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa 
        <b>expedita minima ea</b>, rem laudantium reiciendis 
        <i>reprehenderit pariatur in</i>.
      </p>
      <hr>
      <p>Nihil qui assumenda, excepturi mollitia harum magni amet ut ipsa expedita minima ea rem laudantium reiciendis, reprehenderit.</p>
    </div>
    <button class="panel__close btn btn--small btn--outline btn--dark" type="button" aria-label="Cacher ce message">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-x"></use>
      </svg>
    </button>
  </div>
</div>

BaCSSet

Components

Badges

Standard

Pill

Pastille

Buttons

Plain

Expanded

Colors

Outline

Disabled

Rounded

With icons

Sizes

Loader

Default

With overlay

With overlay & white version

Panels

Title

Title