Tikui

Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.

Atomic Design by Brad Frost

Action icon

<div class="fp-action-icon">
  <div class="fp-action-icon--icon">
    <i class="fp-icon fp-glyph-credit-card-plus -color-shade-0 -s24"></i>
  </div>
  <div class="fp-action-icon--text">Action</div>
</div>
<div class="fp-action-icon -disabled">
  <div class="fp-action-icon--icon">
    <i class="fp-icon fp-glyph-credit-card-plus -color-shade-400 -s24"></i>
  </div>
  <div class="fp-action-icon--text">Action</div>
</div>
.fp-action-icon
  .fp-action-icon--icon
    i.fp-icon.fp-glyph-credit-card-plus.-color-shade-0.-s24
  .fp-action-icon--text Action
.fp-action-icon.-disabled
  .fp-action-icon--icon
    i.fp-icon.fp-glyph-credit-card-plus.-color-shade-400.-s24
  .fp-action-icon--text Action

Announcement

<div class="fp-announcement">
  <div class="fp-announcement--text">
    <span class="fp-text">Announcement info text!
    </span>
  </div>
</div>
<div class="fp-announcement -info">
  <div class="fp-announcement--text">
    <span class="fp-text">Announcement info text!
    </span><a class="fp-link">Link</a>
  </div>
</div>
<div class="fp-announcement -success">
  <div class="fp-announcement--text">
    <span class="fp-text">Announcement info text!
    </span>
  </div>
  <div class="fp-announcement--close">
    <i class="fp-icon fp-glyph-close -s12"></i>
  </div>
</div>
.fp-announcement
  .fp-announcement--text
    span.fp-text Announcement info text!
.fp-announcement.-info
  .fp-announcement--text
    span.fp-text Announcement info text!
    a.fp-link Link
.fp-announcement.-success
  .fp-announcement--text
    span.fp-text Announcement info text!
  .fp-announcement--close
    i.fp-icon.fp-glyph-close.-s12

Alert

<div class="fp-alert -info">
  <i class="fp-icon fp-glyph-info -color-info -s18"></i>
  <span class="fp-text">Info : Ajouter un message informationnel
  </span>
</div>
<div class="fp-alert -warning">
  <i class="fp-icon fp-glyph-warning -color-warning -s18"></i>
  <span class="fp-text">Attention : Ajouter un message de sécurité
  </span>
</div>
<div class="fp-alert -danger">
  <i class="fp-icon fp-glyph-close-circle -color-danger -s18"></i>
  <span class="fp-text">Oops ! Une erreur s'est produite.
  </span>
</div>
<div class="fp-alert -success">
  <i class="fp-icon fp-glyph-check -color-success -s18"></i>
  <span class="fp-text">Succès : Ajouter un message de succès
  </span>
</div>
.fp-alert.-info
  i.fp-icon.fp-glyph-info.-color-info.-s18
  span.fp-text Info : Ajouter un message informationnel
.fp-alert.-warning
  i.fp-icon.fp-glyph-warning.-color-warning.-s18
  span.fp-text Attention : Ajouter un message de sécurité
.fp-alert.-danger
  i.fp-icon.fp-glyph-close-circle.-color-danger.-s18
  span.fp-text Oops ! Une erreur s'est produite.
.fp-alert.-success
  i.fp-icon.fp-glyph-check.-color-success.-s18
  span.fp-text Succès : Ajouter un message de succès
<div class="fp-banner-with-logo">
  <div class="fp-banner-with-logo--background"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
  <div class="fp-banner-with-logo--logo">
    <div class="fp-logo -lg"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
  </div>
  <div class="fp-banner-with-logo--content">Content
  </div>
</div>
.fp-banner-with-logo
  .fp-banner-with-logo--background
    img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
  .fp-banner-with-logo--logo
    .fp-logo.-lg
      img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
  .fp-banner-with-logo--content Content
<div class="fp-breadcrumb"><a class="fp-link -secondary">Previous</a>
  <div class="fp-breadcrumb--separator">></div><a class="fp-link -secondary">Previous</a>
  <div class="fp-breadcrumb--separator">></div>
  <span class="fp-text -color-shade-900 -text-semi-bold">Current
  </span>
</div>
.fp-breadcrumb
  a.fp-link.-secondary Previous
  .fp-breadcrumb--separator >
  a.fp-link.-secondary Previous
  .fp-breadcrumb--separator >
  span.fp-text.-color-shade-900.-text-semi-bold Current

Checkable element

<div class="fp-checkable-element">
  <div class="fp-checkable-element--checkbox">
    <input class="fp-checkbox" type="checkbox" id="first"/>
  </div>
  <div class="fp-checkable-element--label">
    <label for="first">Label
    </label>
  </div>
</div>
<div class="fp-checkable-element">
  <div class="fp-checkable-element--checkbox">
    <input class="fp-radio" id="second" type="radio" name="name"/>
  </div>
  <div class="fp-checkable-element--label">
    <label for="second">Label
    </label>
  </div>
</div>
<div class="fp-checkable-element">
  <div class="fp-checkable-element--checkbox">
    <input class="fp-checkbox" type="checkbox" id="third"/>
  </div>
  <div class="fp-checkable-element--label">
    <label for="third">Label
    </label><a class="fp-link">Link</a>
  </div>
</div>
.fp-checkable-element
  .fp-checkable-element--checkbox
    input#first.fp-checkbox(type="checkbox")
  .fp-checkable-element--label
    label(for="first")
      | Label
.fp-checkable-element
  .fp-checkable-element--checkbox
    input#second.fp-radio(type="radio" name="name")
  .fp-checkable-element--label
    label(for="second")
      | Label
.fp-checkable-element
  .fp-checkable-element--checkbox
    input#third.fp-checkbox(type="checkbox")
  .fp-checkable-element--label
    label(for="third")
      | Label
    a.fp-link Link

Collapsible card

<div class="fp-collapsible-card">
  <input id="collapsible" type="checkbox" name="collapse"/>
  <label class="fp-collapsible-card--trigger" for="collapsible">
    <span class="fp-text -text-semi-bold">Collapsible title
    </span>
    <i class="fp-icon fp-glyph-chevron-right -color-shade-700 -s12"></i>
  </label>
  <div class="fp-collapsible-card--content">
    <span class="fp-text -color-shade-700">Collapsible content
    </span>
  </div>
</div>
.fp-collapsible-card
  input#collapsible(type="checkbox" name="collapse")
  label.fp-collapsible-card--trigger(for="collapsible")
    span.fp-text.-text-semi-bold Collapsible title
    i.fp-icon.fp-glyph-chevron-right.-color-shade-700.-s12
  .fp-collapsible-card--content
    span.fp-text.-color-shade-700 Collapsible content

Converter input

<div class="fp-converter-input">
  <div class="fp-converter-input--ticker">EUR</div>
  <input class="fp-input-text"/>
  <div class="fp-converter-input--icon">
    <i class="fp-icon fp-glyph-coin -s18"></i>
  </div>
</div>
.fp-converter-input
  .fp-converter-input--ticker EUR
  input.fp-input-text
  .fp-converter-input--icon
    i.fp-icon.fp-glyph-coin.-s18

Decorated listing element

<div class="fp-decorated-listing-element">
  <div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
  <div class="fp-decorated-listing-element--text">
    <span class="fp-text -text-2xl -text-semi-bold">Paris Volley
    </span>
    <span class="fp-text -text-lg -text-semi-bold">PVT
    </span>
  </div>
  <div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
<div class="fp-decorated-listing-element">
  <div class="fp-decorated-listing-element--logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png"/></div>
  <div class="fp-decorated-listing-element--text">
    <span class="fp-text -text-2xl -text-semi-bold">Paris Volley
    </span>
    <div class="fp-icon-with-text">
      <div class="fp-dot"></div>
      <div class="fp-icon-with-text--text">
        <div class="fp-icon-with-text--text-line">
          <span class="fp-text -no-wrap -text-lg -text-semi-bold">9000 TKN
          </span>
          <span class="fp-text -color-shade-500"> /
          </span>
          <span class="fp-text -color-shade-500 -no-wrap"> 120 €
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="fp-decorated-listing-element--banner"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png"/></div>
</div>
.fp-decorated-listing-element
  .fp-decorated-listing-element--logo
    img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
  .fp-decorated-listing-element--text
    span.fp-text.-text-2xl.-text-semi-bold Paris Volley
    span.fp-text.-text-lg.-text-semi-bold PVT
  .fp-decorated-listing-element--banner
    img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
.fp-decorated-listing-element
  .fp-decorated-listing-element--logo
    img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png")
  .fp-decorated-listing-element--text
    span.fp-text.-text-2xl.-text-semi-bold Paris Volley
    .fp-icon-with-text
      .fp-dot
      .fp-icon-with-text--text
        .fp-icon-with-text--text-line
          span.fp-text.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
          span.fp-text.-color-shade-500 /
          span.fp-text.-color-shade-500.-no-wrap 120 €
  .fp-decorated-listing-element--banner
    img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png")
<div class="fp-double-logo">
  <div class="fp-double-logo--main">
    <div class="fp-logo"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
  </div>
  <div class="fp-double-logo--secondary">
    <div class="fp-logo -sm"><img src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo"/></div>
  </div>
</div>
.fp-double-logo
  .fp-double-logo--main
    .fp-logo
      img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
  .fp-double-logo--secondary
    .fp-logo.-sm
      img(src="https://files.fairplayer.co/clubs/paris-volley/logo.png" alt="Logo")
<div class="fp-dropdown-item">
  <i class="fp-icon fp-glyph-edit -s12"></i>
  <div class="fp-dropdown-item--text">Éditer</div>
</div>
<div class="fp-dropdown-item -danger">
  <i class="fp-icon fp-glyph-trash -s12"></i>
  <div class="fp-dropdown-item--text">Supprimer</div>
</div>
.fp-dropdown-item
  i.fp-icon.fp-glyph-edit.-s12
  .fp-dropdown-item--text Éditer
.fp-dropdown-item.-danger
  i.fp-icon.fp-glyph-trash.-s12
  .fp-dropdown-item--text Supprimer

Featured content

<div class="fp-featured-content"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
  <div class="fp-featured-content--background"></div>
  <div class="fp-featured-content--description">
    <span class="fp-text -text-lg -text-semi-bold">Pre title
    </span>
    <span class="fp-text -text-2xl -text-semi-bold">Featured content title
    </span>
    <div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="fp-featured-content--actions">
      <button class="fp-button">Button label
      </button>
      <button class="fp-button -secondary">Button label
      </button>
    </div>
  </div>
</div>
<div class="fp-featured-content -dense"><img src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background"/>
  <div class="fp-featured-content--background"></div>
  <div class="fp-featured-content--description">
    <span class="fp-text -text-lg -text-semi-bold">Pre title
    </span>
    <span class="fp-text -text-2xl -text-semi-bold">Featured content title
    </span>
    <div class="fp-text -lines-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
    <div class="fp-featured-content--actions">
      <button class="fp-button">Button label
      </button>
      <button class="fp-button -secondary">Button label
      </button>
    </div>
  </div>
</div>
.fp-featured-content
  img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
  .fp-featured-content--background
  .fp-featured-content--description
    span.fp-text.-text-lg.-text-semi-bold Pre title
    span.fp-text.-text-2xl.-text-semi-bold Featured content title
    .fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    .fp-featured-content--actions
      button.fp-button Button label
      button.fp-button.-secondary Button label
.fp-featured-content.-dense
  img(src="https://files.fairplayer.co/clubs/paris-volley/banner.png" alt="Featured content background")
  .fp-featured-content--background
  .fp-featured-content--description
    span.fp-text.-text-lg.-text-semi-bold Pre title
    span.fp-text.-text-2xl.-text-semi-bold Featured content title
    .fp-text.-lines-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    .fp-featured-content--actions
      button.fp-button Button label
      button.fp-button.-secondary Button label

Field

<label class="fp-field">Label
  <input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
<label class="fp-field">
  <div class="fp-field--actions">
    <button class="fp-icon fp-glyph-magic-wand -color-shade-900 -pointer"></button>
    <button class="fp-icon fp-glyph-arrow-clockwise -color-shade-900 -pointer"></button>
  </div>Label
  <input class="fp-input-text" id="my-input" placeholder="Placeholder"/>
</label>
label.fp-field Label
  input#my-input.fp-input-text(placeholder="Placeholder")
label.fp-field
  .fp-field--actions
    button.fp-icon.fp-glyph-magic-wand.-color-shade-900.-pointer
    button.fp-icon.fp-glyph-arrow-clockwise.-color-shade-900.-pointer
  | Label
  input#my-input.fp-input-text(placeholder="Placeholder")

Horizontal menu item

<a class="fp-horizontal-menu-item">
  <div class="fp-horizontal-menu-item--icon">
    <i class="fp-icon fp-glyph-home -color-shade-400 -s24"></i>
  </div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item -active">
  <div class="fp-horizontal-menu-item--icon">
    <i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
  </div><span class="fp-horizontal-menu-item--text">Home</span></a><a class="fp-horizontal-menu-item -active">
  <div class="fp-horizontal-menu-item--icon">
    <i class="fp-icon fp-glyph-gavel -color-shade-900 -s24"></i>
  </div><span class="fp-horizontal-menu-item--text">Auctions</span>
  <div class="fp-horizontal-menu-item--dot">
    <div class="fp-dot -sm"></div>
  </div></a>
a.fp-horizontal-menu-item
  .fp-horizontal-menu-item--icon
    i.fp-icon.fp-glyph-home.-color-shade-400.-s24
  span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item.-active
  .fp-horizontal-menu-item--icon
    i.fp-icon.fp-glyph-home.-color-shade-900.-s24
  span.fp-horizontal-menu-item--text Home
a.fp-horizontal-menu-item.-active
  .fp-horizontal-menu-item--icon
    i.fp-icon.fp-glyph-gavel.-color-shade-900.-s24
  span.fp-horizontal-menu-item--text Auctions
  .fp-horizontal-menu-item--dot
    .fp-dot.-sm

Icon with text

<div class="fp-icon-with-text">
  <i class="fp-icon fp-glyph-coin -s18"></i>
  <div class="fp-icon-with-text--text">
    <div class="fp-icon-with-text--text-line">
      <span class="fp-text -no-wrap -text-lg -text-semi-bold">9000 TKN
      </span>
      <span class="fp-text -color-shade-500"> /
      </span>
      <span class="fp-text -color-shade-500 -no-wrap"> 120 €
      </span>
    </div>
  </div>
</div>
<div class="fp-icon-with-text">
  <div class="fp-dot"></div>
  <div class="fp-icon-with-text--text">
    <div class="fp-icon-with-text--text-line">
      <span class="fp-text -no-wrap -text-lg -text-semi-bold">9000 TKN
      </span>
      <span class="fp-text -color-shade-500"> /
      </span>
      <span class="fp-text -color-shade-500 -no-wrap"> 120 €
      </span>
    </div>
  </div>
</div>
<div class="fp-icon-with-text"><img class="fp-illustration -xs -token"/>
  <div class="fp-icon-with-text--text">
    <div class="fp-icon-with-text--text-line">
      <span class="fp-text">Solde :
      </span>
      <span class="fp-text -color-shade-900 -text-semi-bold">&nbsp;20 TKN
      </span>
    </div>
  </div>
</div>
<div class="fp-icon-with-text"><img class="fp-illustration -md -star"/>
  <div class="fp-icon-with-text--text">
    <div class="fp-icon-with-text--text-line">
      <h3 class="fp-title">Title
      </h3>
    </div>
    <div class="fp-icon-with-text--text-line">
      <span class="fp-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.
      </span>
    </div>
  </div>
</div>
.fp-icon-with-text
  i.fp-icon.fp-glyph-coin.-s18
  .fp-icon-with-text--text
    .fp-icon-with-text--text-line
      span.fp-text.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
      span.fp-text.-color-shade-500 /
      span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-icon-with-text
  .fp-dot
  .fp-icon-with-text--text
    .fp-icon-with-text--text-line
      span.fp-text.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
      span.fp-text.-color-shade-500 /
      span.fp-text.-color-shade-500.-no-wrap 120 €
.fp-icon-with-text
  img.fp-illustration.-xs.-token
  .fp-icon-with-text--text
    .fp-icon-with-text--text-line
      span.fp-text Solde :
      span.fp-text.-color-shade-900.-text-semi-bold 20 TKN
.fp-icon-with-text
  img.fp-illustration.-md.-star
  .fp-icon-with-text--text
    .fp-icon-with-text--text-line
      h3.fp-title Title
    .fp-icon-with-text--text-line
      span.fp-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquansequat.

Icons image

<div class="fp-icons-image">
  <div class="fp-image -circled -hoverable   -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  <div class="fp-icons-image--icon">
    <i class="fp-icon fp-glyph-pen -s12"></i>
  </div>
</div>
.fp-icons-image
  .fp-image.-circled.-hoverable.-lg
    img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-icons-image--icon
    i.fp-icon.fp-glyph-pen.-s12

Icons input

<div class="fp-icons-input">
  <label class="fp-icons-input--left-icon" for="icons-input-mixin">
    <i class="fp-icon fp-glyph-lock -s16"></i>
  </label>
  <div class="fp-icons-input--right-icon">
    <button class="fp-icon fp-glyph-eye -s16 -pointer"></button>
  </div>
  <input class="fp-input-text" id="icons-input-mixin" value="Input text"/>
</div>
.fp-icons-input
  label.fp-icons-input--left-icon(for="icons-input-mixin")
    i.fp-icon.fp-glyph-lock.-s16
  .fp-icons-input--right-icon
    button.fp-icon.fp-glyph-eye.-s16.-pointer
  input#icons-input-mixin.fp-input-text(value="Input text")

Illustrated item

<div class="fp-illustrated-item">
  <div class="fp-image    -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  <div class="fp-illustrated-item--content">
    <h2 class="fp-title">Expérience immersion : dans la peau d'un joueur
    </h2>
    <div class="fp-icon-with-text">
      <i class="fp-icon fp-glyph-coin -s18"></i>
      <div class="fp-icon-with-text--text">
        <div class="fp-icon-with-text--text-line">
          <span class="fp-text -no-wrap -text-lg -text-semi-bold">9000 TKN
          </span>
          <span class="fp-text -color-shade-500"> /
          </span>
          <span class="fp-text -color-shade-500 -no-wrap"> 120 €
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
.fp-illustrated-item
  .fp-image.-rounded.-lg
    img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-illustrated-item--content
    h2.fp-title Expérience immersion : dans la peau d'un joueur
    .fp-icon-with-text
      i.fp-icon.fp-glyph-coin.-s18
      .fp-icon-with-text--text
        .fp-icon-with-text--text-line
          span.fp-text.-no-wrap.-text-lg.-text-semi-bold 9000 TKN
          span.fp-text.-color-shade-500 /
          span.fp-text.-color-shade-500.-no-wrap 120 €

Interlocutor

<a class="fp-interlocutor" href="/">
  <div class="fp-interlocutor--picture">
    <div class="fp-image -circled    "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  </div>
  <div class="fp-interlocutor--summary">
    <span class="fp-text -color-shade-700 -text-semi-bold">John DOE
    </span>
    <div class="fp-text -color-shade-500 -lines-1 -text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div>
  <div class="fp-interlocutor--unread">
    <div class="fp-chip">1
    </div>
  </div></a><a class="fp-interlocutor -active" href="/">
  <div class="fp-interlocutor--picture">
    <div class="fp-image -circled    "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  </div>
  <div class="fp-interlocutor--summary">
    <span class="fp-text -color-shade-700 -text-semi-bold">John DOE
    </span>
    <div class="fp-text -color-shade-500 -lines-1 -text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </div></a>
a.fp-interlocutor(href="/")
  .fp-interlocutor--picture
    .fp-image.-circled
      img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-interlocutor--summary
    span.fp-text.-color-shade-700.-text-semi-bold John DOE
    .fp-text.-color-shade-500.-lines-1.-text-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  .fp-interlocutor--unread
    .fp-chip 1
a.fp-interlocutor.-active(href="/")
  .fp-interlocutor--picture
    .fp-image.-circled
      img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-interlocutor--summary
    span.fp-text.-color-shade-700.-text-semi-bold John DOE
    .fp-text.-color-shade-500.-lines-1.-text-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Left menu footer item

<a class="fp-left-menu-footer-item">
  <div class="fp-image     "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  <div class="fp-left-menu-footer-item--text">Paris Volley</div></a><a class="fp-left-menu-footer-item -active">
  <div class="fp-image     "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  <div class="fp-left-menu-footer-item--text">Paris Volley</div></a>
a.fp-left-menu-footer-item
  .fp-image
    img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-left-menu-footer-item--text Paris Volley
a.fp-left-menu-footer-item.-active
  .fp-image
    img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-left-menu-footer-item--text Paris Volley

Left menu item

<a class="fp-left-menu-item">
  <i class="fp-icon fp-glyph-home -s18"></i>
  <div class="fp-left-menu-item--text">Homepage
  </div></a><a class="fp-left-menu-item -active">
  <i class="fp-icon fp-glyph-home -s18"></i>
  <div class="fp-left-menu-item--text">Homepage
  </div></a>
a.fp-left-menu-item
  i.fp-icon.fp-glyph-home.-s18
  .fp-left-menu-item--text Homepage
a.fp-left-menu-item.-active
  i.fp-icon.fp-glyph-home.-s18
  .fp-left-menu-item--text Homepage

Logo with title

<div class="fp-logo-with-title">
  <div class="fp-logo -sm"><img src="/atom/logo/logo.png" alt="Logo"/></div>
  <h1 class="fp-title">Title
  </h1>
</div>
.fp-logo-with-title
  .fp-logo.-sm
    img(src="/atom/logo/logo.png" alt="Logo")
  h1.fp-title Title

Media input

<div class="fp-media-input">
  <div class="fp-media-input--input">
    <i class="fp-icon fp-glyph-image"></i>
    <label><b>Glissez-déposez&nbsp;</b>ou&nbsp;<b>Sélectionnez&nbsp;</b>une image
    </label>
    <input type="file"/>
  </div>
</div>
<div class="fp-media-input -dragging">
  <div class="fp-media-input--input">
    <i class="fp-icon fp-glyph-image"></i>
    <label><b>Glissez-déposez&nbsp;</b>ou&nbsp;<b>Sélectionnez&nbsp;</b>une image
    </label>
    <input type="file"/>
  </div>
</div>
<div class="fp-media-input -touched">
  <div class="fp-media-input--input">
    <i class="fp-icon fp-glyph-image"></i>
    <label><b>Glissez-déposez&nbsp;</b>ou&nbsp;<b>Sélectionnez&nbsp;</b>une image
    </label>
    <input type="file"/>
  </div>
  <div class="fp-media-input--media">
    <div class="fp-image    -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  </div>
</div>
<div class="fp-media-input">
  <div class="fp-media-input--input">
    <i class="fp-icon fp-glyph-image"></i>
    <label><b>Glissez-déposez&nbsp;</b>ou&nbsp;<b>Sélectionnez&nbsp;</b>des images
    </label>
    <input type="file"/>
  </div>
  <div class="fp-media-input--media">
    <div class="fp-image    -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
    <div class="fp-media-input--media-actions">
      <div class="fp-media-input--media-actions-group">
        <button class="fp-icon fp-glyph-chevron-up -color-shade-900 -s12 -pointer"></button>
        <button class="fp-icon fp-glyph-chevron-down -color-shade-900 -s12 -pointer"></button>
      </div>
      <button class="fp-icon fp-glyph-trash -color-shade-900 -s16 -pointer"></button>
    </div>
  </div>
  <div class="fp-media-input--media">
    <div class="fp-image    -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
    <div class="fp-media-input--media-actions">
      <div class="fp-media-input--media-actions-group">
        <button class="fp-icon fp-glyph-chevron-up -color-shade-900 -s12 -pointer"></button>
        <button class="fp-icon fp-glyph-chevron-down -color-shade-900 -s12 -pointer"></button>
      </div>
      <button class="fp-icon fp-glyph-trash -color-shade-900 -s16 -pointer"></button>
    </div>
  </div>
  <div class="fp-media-input--media">
    <div class="fp-image    -rounded -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
    <div class="fp-media-input--media-actions">
      <div class="fp-media-input--media-actions-group">
        <button class="fp-icon fp-glyph-chevron-up -color-shade-900 -s12 -pointer"></button>
        <button class="fp-icon fp-glyph-chevron-down -color-shade-900 -s12 -pointer"></button>
      </div>
      <button class="fp-icon fp-glyph-trash -color-shade-900 -s16 -pointer"></button>
    </div>
  </div>
</div>
.fp-media-input
  .fp-media-input--input
    i.fp-icon.fp-glyph-image
    label
      b Glissez-déposez
      | ou
      b Sélectionnez
      | une image
    input(type="file")
.fp-media-input.-dragging
  .fp-media-input--input
    i.fp-icon.fp-glyph-image
    label
      b Glissez-déposez
      | ou
      b Sélectionnez
      | une image
    input(type="file")
.fp-media-input.-touched
  .fp-media-input--input
    i.fp-icon.fp-glyph-image
    label
      b Glissez-déposez
      | ou
      b Sélectionnez
      | une image
    input(type="file")
  .fp-media-input--media
    .fp-image.-rounded.-lg
      img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-media-input
  .fp-media-input--input
    i.fp-icon.fp-glyph-image
    label
      b Glissez-déposez
      | ou
      b Sélectionnez
      | des images
    input(type="file")
  .fp-media-input--media
    .fp-image.-rounded.-lg
      img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
    .fp-media-input--media-actions
      .fp-media-input--media-actions-group
        button.fp-icon.fp-glyph-chevron-up.-color-shade-900.-s12.-pointer
        button.fp-icon.fp-glyph-chevron-down.-color-shade-900.-s12.-pointer
      button.fp-icon.fp-glyph-trash.-color-shade-900.-s16.-pointer
  .fp-media-input--media
    .fp-image.-rounded.-lg
      img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
    .fp-media-input--media-actions
      .fp-media-input--media-actions-group
        button.fp-icon.fp-glyph-chevron-up.-color-shade-900.-s12.-pointer
        button.fp-icon.fp-glyph-chevron-down.-color-shade-900.-s12.-pointer
      button.fp-icon.fp-glyph-trash.-color-shade-900.-s16.-pointer
  .fp-media-input--media
    .fp-image.-rounded.-lg
      img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
    .fp-media-input--media-actions
      .fp-media-input--media-actions-group
        button.fp-icon.fp-glyph-chevron-up.-color-shade-900.-s12.-pointer
        button.fp-icon.fp-glyph-chevron-down.-color-shade-900.-s12.-pointer
      button.fp-icon.fp-glyph-trash.-color-shade-900.-s16.-pointer

Member card

<div class="fp-member-card">
  <div class="fp-image -circled    -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  <div class="fp-text -lines-2 -text-semi-bold">Text
  </div><a class="fp-link">Contact</a>
</div>
<div class="fp-member-card -clickable">
  <div class="fp-image -circled    -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
  <div class="fp-text -lines-2 -text-semi-bold">Text
  </div><a class="fp-link">Contact</a>
</div>
.fp-member-card
  .fp-image.-circled.-lg
    img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-text.-lines-2.-text-semi-bold Text
  a.fp-link Contact
.fp-member-card.-clickable
  .fp-image.-circled.-lg
    img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
  .fp-text.-lines-2.-text-semi-bold Text
  a.fp-link Contact

Pagination

<div class="fp-pagination">
  <div class="fp-pagination--item -disabled">
    <i class="fp-icon fp-glyph-chevron-left -s12"></i>
  </div>
  <div class="fp-pagination--item -active">1</div>
  <div class="fp-pagination--item">2</div>
  <div class="fp-pagination--item">3</div>
  <div class="fp-pagination--item -disabled">…</div>
  <div class="fp-pagination--item">6</div>
  <div class="fp-pagination--item -disabled">…</div>
  <div class="fp-pagination--item">9</div>
  <div class="fp-pagination--item">10</div>
  <div class="fp-pagination--item">11</div>
  <div class="fp-pagination--item">
    <i class="fp-icon fp-glyph-chevron-right -s12"></i>
  </div>
</div>
.fp-pagination
  .fp-pagination--item.-disabled
    i.fp-icon.fp-glyph-chevron-left.-s12
  .fp-pagination--item.-active 1
  .fp-pagination--item 2
  .fp-pagination--item 3
  .fp-pagination--item.-disabled …
  .fp-pagination--item 6
  .fp-pagination--item.-disabled …
  .fp-pagination--item 9
  .fp-pagination--item 10
  .fp-pagination--item 11
  .fp-pagination--item
    i.fp-icon.fp-glyph-chevron-right.-s12

Pill

<div class="fp-pill">
  <div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
  </div>
  <div class="fp-pill--text">Text
  </div>
</div>
<div class="fp-pill">
  <div class="fp-pill--icons"><img class="fp-illustration -xs -trophy"/>
  </div>
  <div class="fp-pill--text -hidden-up-lg">Text responsive
  </div>
</div>
.fp-pill
  .fp-pill--icons
    img.fp-illustration.-xs.-trophy
  .fp-pill--text Text
.fp-pill
  .fp-pill--icons
    img.fp-illustration.-xs.-trophy
  .fp-pill--text.-hidden-up-lg Text responsive

Progress

<div class="fp-progress">
  <div class="fp-progress--title">Progress title</div>
  <div class="fp-progress--progression">
    <div class="fp-progress-bar">
      <div class="fp-progress-bar--bar -fill80"></div>
    </div>
    <div class="fp-progress--progression-text">80%</div>
  </div>
</div>
.fp-progress
  .fp-progress--title Progress title
  .fp-progress--progression
    .fp-progress-bar
      .fp-progress-bar--bar.-fill80
    .fp-progress--progression-text 80%

Tag

<span class="fp-tag">Tag Label</span><span class="fp-tag">
  <i class="fp-icon fp-glyph-award"></i>Moments</span><span class="fp-tag -info">INFO</span><span class="fp-tag -success">SUCCESS</span><span class="fp-tag -danger">DANGER</span><span class="fp-tag -warning">WARNING</span>
span.fp-tag Tag Label
span.fp-tag
  i.fp-icon.fp-glyph-award
  | Moments
span.fp-tag.-info INFO
span.fp-tag.-success SUCCESS
span.fp-tag.-danger DANGER
span.fp-tag.-warning WARNING

Top menu item

<a class="fp-top-menu-item">Home</a><a class="fp-top-menu-item -active">Home</a><a class="fp-top-menu-item">Auctions
  <div class="fp-top-menu-item--dot">
    <div class="fp-dot -sm"></div>
  </div></a>
a.fp-top-menu-item Home
a.fp-top-menu-item.-active Home
a.fp-top-menu-item Auctions
  .fp-top-menu-item--dot
    .fp-dot.-sm

Toast

<div class="fp-toast -info">
  <div class="fp-toast--message">
    <i class="fp-icon fp-glyph-info -color-info -s18"></i>
    <span class="fp-text">Info : Ajouter un message informationnel
    </span>
  </div>
  <div class="fp-toast--action">
    <i class="fp-icon fp-glyph-close -s16"></i>
  </div>
  <div class="fp-toast--progress" style="width: 25%;"></div>
</div>
<div class="fp-toast -warning">
  <div class="fp-toast--message">
    <i class="fp-icon fp-glyph-warning -color-warning -s18"></i>
    <span class="fp-text">Attention : Ajouter un message de sécurité
    </span>
  </div>
  <div class="fp-toast--action">
    <i class="fp-icon fp-glyph-close -s16"></i>
  </div>
  <div class="fp-toast--progress" style="width: 50%;"></div>
</div>
<div class="fp-toast -danger">
  <div class="fp-toast--message">
    <i class="fp-icon fp-glyph-close-circle -color-danger -s18"></i>
    <span class="fp-text">Oops ! Une erreur s'est produite.
    </span>
  </div>
  <div class="fp-toast--action">
    <i class="fp-icon fp-glyph-close -s16"></i>
  </div>
  <div class="fp-toast--progress" style="width: 75%;"></div>
</div>
<div class="fp-toast -success">
  <div class="fp-toast--message">
    <i class="fp-icon fp-glyph-check -color-success -s18"></i>
    <span class="fp-text">Succès : Ajouter un message de succès
    </span>
  </div>
  <div class="fp-toast--action">
    <i class="fp-icon fp-glyph-close -s16"></i>
  </div>
  <div class="fp-toast--progress" style="width: 100%;"></div>
</div>
.fp-toast.-info
  .fp-toast--message
    i.fp-icon.fp-glyph-info.-color-info.-s18
    span.fp-text Info : Ajouter un message informationnel
  .fp-toast--action
    i.fp-icon.fp-glyph-close.-s16
  .fp-toast--progress(style="width: 25%;")
.fp-toast.-warning
  .fp-toast--message
    i.fp-icon.fp-glyph-warning.-color-warning.-s18
    span.fp-text Attention : Ajouter un message de sécurité
  .fp-toast--action
    i.fp-icon.fp-glyph-close.-s16
  .fp-toast--progress(style="width: 50%;")
.fp-toast.-danger
  .fp-toast--message
    i.fp-icon.fp-glyph-close-circle.-color-danger.-s18
    span.fp-text Oops ! Une erreur s'est produite.
  .fp-toast--action
    i.fp-icon.fp-glyph-close.-s16
  .fp-toast--progress(style="width: 75%;")
.fp-toast.-success
  .fp-toast--message
    i.fp-icon.fp-glyph-check.-color-success.-s18
    span.fp-text Succès : Ajouter un message de succès
  .fp-toast--action
    i.fp-icon.fp-glyph-close.-s16
  .fp-toast--progress(style="width: 100%;")