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

Card input file

<div class="fp-card-input-file">
  <i class="fp-icon fp-glyph-identification-card -s50"></i>
  <div class="fp-card-input-file--title">Title</div>
  <div class="fp-card-input-file--input">
    <label class="fp-input-file"><span>Click here to upload a file</span>
      <input type="file"/>
    </label>
  </div>
  <div class="fp-card-input-file--info">Lorem ipsum dolor</div>
  <div class="fp-card-input-file--info">Lorem ipsum dolor sit amet</div>
</div>
<div class="fp-card-input-file">
  <i class="fp-icon fp-glyph-identification-badge -s50"></i>
  <div class="fp-card-input-file--title">Title</div>
  <div class="fp-card-input-file--input">
    <label class="fp-input-file"><span>Click here to upload a file</span>
      <input type="file"/>
    </label>
  </div>
  <div class="fp-card-input-file--info">Lorem ipsum dolor</div>
  <div class="fp-card-input-file--info">Lorem ipsum dolor sit amet</div>
  <div class="fp-card-input-file--info">
    <div class="fp-alert -success">
      <i class="fp-icon fp-glyph-check -color-success -s18"></i>
      <span class="fp-text">Success
      </span>
    </div>
  </div>
  <div class="fp-card-input-file--info">
    <span class="fp-text">filename.pdf &nbsp;
    </span>
    <button class="fp-icon fp-glyph-trash -color-shade-400 -pointer"></button>
  </div>
</div>
<div class="fp-card-input-file">
  <i class="fp-icon fp-glyph-identification-badge -s50"></i>
  <div class="fp-card-input-file--title">Title</div>
  <div class="fp-card-input-file--input">
    <label class="fp-input-file"><span>Click here to upload a file</span>
      <input type="file"/>
    </label>
  </div>
  <div class="fp-card-input-file--info">Lorem ipsum dolor</div>
  <div class="fp-card-input-file--info">Lorem ipsum dolor sit amet</div>
  <div class="fp-card-input-file--info">
    <i class="fp-icon fp-glyph-warning -color-danger -s24"></i>
  </div>
  <div class="fp-card-input-file--info">
    <span class="fp-text -color-danger">Le fichier dépasse la limite autorisée
    </span>
  </div>
</div>
.fp-card-input-file
  i.fp-icon.fp-glyph-identification-card.-s50
  .fp-card-input-file--title Title
  .fp-card-input-file--input
    label.fp-input-file
      span Click here to upload a file
      input(type="file")
  .fp-card-input-file--info Lorem ipsum dolor
  .fp-card-input-file--info Lorem ipsum dolor sit amet
.fp-card-input-file
  i.fp-icon.fp-glyph-identification-badge.-s50
  .fp-card-input-file--title Title
  .fp-card-input-file--input
    label.fp-input-file
      span Click here to upload a file
      input(type="file")
  .fp-card-input-file--info Lorem ipsum dolor
  .fp-card-input-file--info Lorem ipsum dolor sit amet
  .fp-card-input-file--info
    .fp-alert.-success
      i.fp-icon.fp-glyph-check.-color-success.-s18
      span.fp-text Success
  .fp-card-input-file--info
    span.fp-text filename.pdf
    button.fp-icon.fp-glyph-trash.-color-shade-400.-pointer
.fp-card-input-file
  i.fp-icon.fp-glyph-identification-badge.-s50
  .fp-card-input-file--title Title
  .fp-card-input-file--input
    label.fp-input-file
      span Click here to upload a file
      input(type="file")
  .fp-card-input-file--info Lorem ipsum dolor
  .fp-card-input-file--info Lorem ipsum dolor sit amet
  .fp-card-input-file--info
    i.fp-icon.fp-glyph-warning.-color-danger.-s24
  .fp-card-input-file--info
    span.fp-text.-color-danger Le fichier dépasse la limite autorisée

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

<div class="fp-converter">
  <div class="fp-converter-input">
    <div class="fp-converter-input--ticker">EUR</div>
    <input class="fp-converter-input--input" type="number" value="123"/>
    <div class="fp-converter-input--icon">
      <i class="fp-icon fp-glyph-euro -s18"></i>
    </div>
  </div>
  <div class="fp-converter-input">
    <div class="fp-converter-input--ticker">EUR</div>
    <input class="fp-converter-input--input" type="number" value="123"/>
    <div class="fp-converter-input--icon">
      <i class="fp-icon fp-glyph-coin -s18"></i>
    </div>
  </div>
  <div class="fp-converter--icon">
    <i class="fp-icon fp-glyph-arrows-down-up -s18"></i>
  </div>
</div>
<div class="fp-converter -secondary">
  <div class="fp-converter-input">
    <div class="fp-converter-input--ticker">EUR</div>
    <input class="fp-converter-input--input" type="number" value="123"/>
    <div class="fp-converter-input--icon">
      <i class="fp-icon fp-glyph-euro -s18"></i>
    </div>
  </div>
  <div class="fp-converter-input">
    <div class="fp-converter-input--ticker">EUR</div>
    <input class="fp-converter-input--input" type="number" value="123"/>
    <div class="fp-converter-input--icon">
      <i class="fp-icon fp-glyph-coin -s18"></i>
    </div>
  </div>
  <div class="fp-converter--icon">
    <i class="fp-icon fp-glyph-arrows-down-up -s18"></i>
  </div>
</div>
.fp-converter
  .fp-converter-input
    .fp-converter-input--ticker EUR
    input.fp-converter-input--input(type="number" value="123")
    .fp-converter-input--icon
      i.fp-icon.fp-glyph-euro.-s18
  .fp-converter-input
    .fp-converter-input--ticker EUR
    input.fp-converter-input--input(type="number" value="123")
    .fp-converter-input--icon
      i.fp-icon.fp-glyph-coin.-s18
  .fp-converter--icon
    i.fp-icon.fp-glyph-arrows-down-up.-s18
.fp-converter.-secondary
  .fp-converter-input
    .fp-converter-input--ticker EUR
    input.fp-converter-input--input(type="number" value="123")
    .fp-converter-input--icon
      i.fp-icon.fp-glyph-euro.-s18
  .fp-converter-input
    .fp-converter-input--ticker EUR
    input.fp-converter-input--input(type="number" value="123")
    .fp-converter-input--icon
      i.fp-icon.fp-glyph-coin.-s18
  .fp-converter--icon
    i.fp-icon.fp-glyph-arrows-down-up.-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>
.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")
<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.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

Icon with text

<div class="fp-icon-with-text">
  <i class="fp-icon fp-glyph-coin -color-shade-900 -s18"></i>
  <div class="fp-icon-with-text--text">
    <div class="fp-icon-with-text--text-line">
      <span class="fp-text -color-shade-900 -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.-color-shade-900.-s18
  .fp-icon-with-text--text
    .fp-icon-with-text--text-line
      span.fp-text.-color-shade-900.-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 -color-shade-900 -s18"></i>
      <div class="fp-icon-with-text--text">
        <div class="fp-icon-with-text--text-line">
          <span class="fp-text -color-shade-900 -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.-color-shade-900.-s18
      .fp-icon-with-text--text
        .fp-icon-with-text--text-line
          span.fp-text.-color-shade-900.-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 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

Listing element

<label class="fp-listing-element">
  <input class="fp-radio" type="radio" name="name"/>
  <span class="fp-text">1234 56XX XXXX 1234
  </span>
  <div class="fp-listing-element--icon">
    <i class="fp-icon fp-glyph-credit-card -color-shade-700 -s18"></i>
  </div>
</label>
<div class="fp-listing-element">
  <i class="fp-icon fp-glyph-check-circle -color-success -s24"></i>
  <span class="fp-text">Success
  </span>
</div>
<div class="fp-listing-element">
  <i class="fp-icon fp-glyph-warning -color-danger -s24"></i>
  <span class="fp-text">Danger
  </span>
</div>
<div class="fp-listing-element">
  <i class="fp-icon fp-glyph-loader -color-shade-900 -s24"></i>
  <span class="fp-text">Loading
  </span>
</div>
label.fp-listing-element
  input.fp-radio(type="radio" name="name")
  span.fp-text 1234 56XX XXXX 1234
  .fp-listing-element--icon
    i.fp-icon.fp-glyph-credit-card.-color-shade-700.-s18
.fp-listing-element
  i.fp-icon.fp-glyph-check-circle.-color-success.-s24
  span.fp-text Success
.fp-listing-element
  i.fp-icon.fp-glyph-warning.-color-danger.-s24
  span.fp-text Danger
.fp-listing-element
  i.fp-icon.fp-glyph-loader.-color-shade-900.-s24
  span.fp-text Loading

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

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%;")