Tikui

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Atomic Design by Brad Frost

Badge

<span class="fp-badge">Badge
</span>
<span class="fp-badge">Badge<span class="fp-badge--action">
    <i class="fp-icon fp-glyph-close -s10"></i></span>
</span>
<span class="fp-badge -secondary"><span class="fp-badge--icon">
    <i class="fp-icon fp-glyph-award -s12"></i></span>Badge
</span>
<span class="fp-badge -clickable">Badge clickable
</span>
span.fp-badge Badge
span.fp-badge Badge
  span.fp-badge--action
    i.fp-icon.fp-glyph-close.-s10
span.fp-badge.-secondary
  span.fp-badge--icon
    i.fp-icon.fp-glyph-award.-s12
  | Badge
span.fp-badge.-clickable Badge clickable
<div class="fp-banner"><img src="/atom/banner/banner.png"/></div>
.fp-banner
  img(src="/atom/banner/banner.png")

Button

<button class="fp-button">Button
</button>
<button class="fp-button"><span class="fp-button--icon">
    <i class="fp-icon fp-glyph-check -s16"></i></span>Button
</button>
<button class="fp-button" disabled="disabled"><span class="fp-button--icon">
    <i class="fp-icon fp-glyph-check -s16"></i></span>Disabled button
</button>
<button class="fp-button -secondary"><span class="fp-button--icon">
    <i class="fp-icon fp-glyph-check -s16"></i></span>Secondary button
</button>
<button class="fp-button -no-border"><span class="fp-button--icon">
    <i class="fp-icon fp-glyph-filter -s16"></i></span>Button without border
</button>
<button class="fp-button -secondary" disabled="disabled"><span class="fp-button--icon">
    <i class="fp-icon fp-glyph-check -s16"></i></span>Button
</button>
<button class="fp-button -expand"><span class="fp-button--icon">
    <i class="fp-icon fp-glyph-check -s16"></i></span>Expanded button
</button>
<button class="fp-button -secondary"><span class="fp-button--icon"><img class="fp-illustration -xs -google-logo"/></span>Continuer avec Google
</button>
button.fp-button Button
button.fp-button
  span.fp-button--icon
    i.fp-icon.fp-glyph-check.-s16
  | Button
button.fp-button(disabled="disabled")
  span.fp-button--icon
    i.fp-icon.fp-glyph-check.-s16
  | Disabled button
button.fp-button.-secondary
  span.fp-button--icon
    i.fp-icon.fp-glyph-check.-s16
  | Secondary button
button.fp-button.-no-border
  span.fp-button--icon
    i.fp-icon.fp-glyph-filter.-s16
  | Button without border
button.fp-button.-secondary(disabled="disabled")
  span.fp-button--icon
    i.fp-icon.fp-glyph-check.-s16
  | Button
button.fp-button.-expand
  span.fp-button--icon
    i.fp-icon.fp-glyph-check.-s16
  | Expanded button
button.fp-button.-secondary
  span.fp-button--icon
    img.fp-illustration.-xs.-google-logo
  | Continuer avec Google

Checkbox

<input class="fp-checkbox" type="checkbox"/>
<input class="fp-checkbox" type="checkbox" disabled="disabled"/>
<input class="fp-checkbox" type="checkbox" checked="checked"/>
<input class="fp-checkbox -touched" type="checkbox"/>
<input class="fp-checkbox" type="checkbox" disabled="disabled" checked="checked"/>
input.fp-checkbox(type="checkbox")
input.fp-checkbox(type="checkbox" disabled="disabled")
input.fp-checkbox(type="checkbox" checked="checked")
input.fp-checkbox.-touched(type="checkbox")
input.fp-checkbox(type="checkbox" disabled="disabled" checked="checked")

Chip

<div class="fp-chip">15
</div>
.fp-chip 15

Dot

<div class="fp-dot"></div>
.fp-dot

Icon

<i class="fp-icon fp-glyph-home -color-shade-900 -s18"></i>
<i class="fp-icon fp-glyph-home -color-shade-900 -s24"></i>
<i class="fp-icon fp-glyph-home -color-info"></i>
<i class="fp-icon fp-glyph-home -color-warning"></i>
<i class="fp-icon fp-glyph-home -color-danger"></i>
<i class="fp-icon fp-glyph-home -color-success"></i>
<button class="fp-icon fp-glyph-wallet -color-shade-400 -s24 -pointer"></button>
<i class="fp-icon fp-glyph-loader -spin"></i>
i.fp-icon.fp-glyph-home.-color-shade-900.-s18
i.fp-icon.fp-glyph-home.-color-shade-900.-s24
i.fp-icon.fp-glyph-home.-color-info
i.fp-icon.fp-glyph-home.-color-warning
i.fp-icon.fp-glyph-home.-color-danger
i.fp-icon.fp-glyph-home.-color-success
button.fp-icon.fp-glyph-wallet.-color-shade-400.-s24.-pointer
i.fp-icon.fp-glyph-loader.-spin

Illustration

<img class="fp-illustration -xs -star"/><img class="fp-illustration -sm -star"/><img class="fp-illustration -md -star"/><img class="fp-illustration -kriptown-logo"/><img class="fp-illustration -mangopay-logo"/><img class="fp-illustration -fairplayer-logo"/>
img.fp-illustration.-xs.-star
img.fp-illustration.-sm.-star
img.fp-illustration.-md.-star
img.fp-illustration.-kriptown-logo
img.fp-illustration.-mangopay-logo
img.fp-illustration.-fairplayer-logo

Image

<div class="fp-image     -sm"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image    -rounded -sm"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image -circled    -sm"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image     "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image     -lg"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image     -xl"><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image   -wide  "><img src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
<div class="fp-image   -wide  "><img class="-contain" src="https://files.fairplayer.co/exclusive.jpg" alt="Image"/></div>
.fp-image.-sm
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-rounded.-sm
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-circled.-sm
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-lg
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-xl
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-wide
  img(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")
.fp-image.-wide
  img.-contain(src="https://files.fairplayer.co/exclusive.jpg" alt="Image")

Input

Input select

<div class="fp-input-select">
  <select>
    <option value="first">First
    </option>
    <option value="second">Second</option>
    <option value="third">Third</option>
  </select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
<div class="fp-input-select">
  <select class="-touched">
    <option value="first">First
    </option>
    <option value="second">Second</option>
    <option value="third">Third</option>
  </select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
<div class="fp-input-select">
  <select disabled="disabled">
    <option value="first">First
    </option>
    <option value="second">Second</option>
    <option value="third">Third</option>
  </select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
<div class="fp-input-select">
  <select>
    <option value="first">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.
    </option>
    <option value="second">Second</option>
    <option value="third">Third</option>
  </select><span class="fp-input-select--caret fp-glyph-chevron-down"></span>
</div>
.fp-input-select
  select
    option(value="first")
      | First
    option(value="second")
      | Second
    option(value="third")
      | Third
  span.fp-input-select--caret.fp-glyph-chevron-down
.fp-input-select
  select.-touched
    option(value="first")
      | First
    option(value="second")
      | Second
    option(value="third")
      | Third
  span.fp-input-select--caret.fp-glyph-chevron-down
.fp-input-select
  select(disabled="disabled")
    option(value="first")
      | First
    option(value="second")
      | Second
    option(value="third")
      | Third
  span.fp-input-select--caret.fp-glyph-chevron-down
.fp-input-select
  select
    option(value="first")
      | 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.
    option(value="second")
      | Second
    option(value="third")
      | Third
  span.fp-input-select--caret.fp-glyph-chevron-down

Input text

<input class="fp-input-text" placeholder="Write here"/>
<input class="fp-input-text" value="Value"/>
<input class="fp-input-text -touched" value="Value"/>
<input class="fp-input-text" disabled="disabled" value="Value"/>
<textarea class="fp-input-text" rows="10">Value</textarea>
input.fp-input-text(placeholder="Write here")
input.fp-input-text(value="Value")
input.fp-input-text.-touched(value="Value")
input.fp-input-text(disabled="disabled" value="Value")
textarea.fp-input-text(rows="10")
  | Value
<a class="fp-link">Link</a><a class="fp-link"><span class="fp-link--icon">
    <i class="fp-icon fp-glyph-plus -s16"></i></span>Link</a><a class="fp-link -secondary"><span class="fp-link--icon">
    <i class="fp-icon fp-glyph-plus -s16"></i></span>Link</a><a class="fp-link -no-text-decoration">Link</a>
a.fp-link Link
a.fp-link
  span.fp-link--icon
    i.fp-icon.fp-glyph-plus.-s16
  | Link
a.fp-link.-secondary
  span.fp-link--icon
    i.fp-icon.fp-glyph-plus.-s16
  | Link
a.fp-link.-no-text-decoration Link
<div class="fp-logo -sm"><img src="/atom/logo/logo.png" alt="Logo"/></div>
<div class="fp-logo"><img src="/atom/logo/logo.png" alt="Logo"/></div>
<div class="fp-logo -lg"><img src="/atom/logo/logo.png" alt="Logo"/></div>
.fp-logo.-sm
  img(src="/atom/logo/logo.png" alt="Logo")
.fp-logo
  img(src="/atom/logo/logo.png" alt="Logo")
.fp-logo.-lg
  img(src="/atom/logo/logo.png" alt="Logo")

Placeholder

<div class="fp-placeholder"></div>
<div class="fp-placeholder -height-sm"></div>
<div class="fp-placeholder -height-xl"></div>
.fp-placeholder
.fp-placeholder.-height-sm
.fp-placeholder.-height-xl

Progress bar

<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill0"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill20"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill25"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill40"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill50"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill60"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill75"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill80"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill100"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill80 -danger"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill80 -warning"></div>
</div>
<div class="fp-progress-bar">
  <div class="fp-progress-bar--bar -fill80 -success"></div>
</div>
.fp-progress-bar
  .fp-progress-bar--bar.-fill0
.fp-progress-bar
  .fp-progress-bar--bar.-fill20
.fp-progress-bar
  .fp-progress-bar--bar.-fill25
.fp-progress-bar
  .fp-progress-bar--bar.-fill40
.fp-progress-bar
  .fp-progress-bar--bar.-fill50
.fp-progress-bar
  .fp-progress-bar--bar.-fill60
.fp-progress-bar
  .fp-progress-bar--bar.-fill75
.fp-progress-bar
  .fp-progress-bar--bar.-fill80
.fp-progress-bar
  .fp-progress-bar--bar.-fill100
.fp-progress-bar
  .fp-progress-bar--bar.-fill80.-danger
.fp-progress-bar
  .fp-progress-bar--bar.-fill80.-warning
.fp-progress-bar
  .fp-progress-bar--bar.-fill80.-success

Radio

<input class="fp-radio" type="radio" name="name"/>
<input class="fp-radio" type="radio" name="name" checked="checked"/>
<input class="fp-radio" type="radio" name="name2" disabled="disabled"/>
<input class="fp-radio" type="radio" name="name2" checked="checked" disabled="disabled"/>
input.fp-radio(type="radio" name="name")
input.fp-radio(type="radio" name="name" checked="checked")
input.fp-radio(type="radio" name="name2" disabled="disabled")
input.fp-radio(type="radio" name="name2" checked="checked" disabled="disabled")

Separator

<div class="fp-separator">
  <div class="fp-separator--text">OR
  </div>
</div>
<div class="fp-separator -secondary">
</div>
.fp-separator
  .fp-separator--text OR
.fp-separator.-secondary

Text

<span class="fp-text">Text
</span><br/>
<span class="fp-text -text-line-through">Text
</span><br/>
<span class="fp-text -text-uppercase">Text
</span><br/>
<span class="fp-text -text-light">Text
</span>
<span class="fp-text -text-regular">Text
</span>
<span class="fp-text -text-semi-bold">Text
</span>
<span class="fp-text -text-bold">Text
</span><br/>
<span class="fp-text -color-info">Text
</span>
<span class="fp-text -color-warning">Text
</span>
<span class="fp-text -color-danger">Text
</span>
<span class="fp-text -color-success">Text
</span><span style="background-color: #AAA;">
  <span class="fp-text -color-shade-0">Text
  </span></span>
<span class="fp-text -color-shade-400">Text
</span>
<span class="fp-text -color-shade-700">Text
</span>
<span class="fp-text -color-shade-900">Text
</span><br/>
<span class="fp-text -text-xs">Text
</span>
<span class="fp-text -text-sm">Text
</span>
<span class="fp-text -text-md">Text
</span>
<span class="fp-text -text-lg">Text
</span>
<span class="fp-text -text-xl">Text
</span>
<span class="fp-text -text-2xl">Text
</span>
<span class="fp-text -text-3xl">Text
</span>
<span class="fp-text -text-8xl">Text
</span><br/><br/>
<span class="fp-text -no-wrap">Text not wrapped. 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.
</span><br/><br/>
<div class="fp-text -lines-1">Text clamped after 1 line. 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><br/>
<div class="fp-text -lines-2">Text clamped after 2 lines. 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><br/>
<span class="fp-text">
  <blockquote>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.</blockquote>
</span><br/>
<span class="fp-text -paragraph">
Multiline
text

</span>
span.fp-text Text
br
span.fp-text.-text-line-through Text
br
span.fp-text.-text-uppercase Text
br
span.fp-text.-text-light Text
span.fp-text.-text-regular Text
span.fp-text.-text-semi-bold Text
span.fp-text.-text-bold Text
br
span.fp-text.-color-info Text
span.fp-text.-color-warning Text
span.fp-text.-color-danger Text
span.fp-text.-color-success Text
span(style="background-color: #AAA;")
  span.fp-text.-color-shade-0 Text
span.fp-text.-color-shade-400 Text
span.fp-text.-color-shade-700 Text
span.fp-text.-color-shade-900 Text
br
span.fp-text.-text-xs Text
span.fp-text.-text-sm Text
span.fp-text.-text-md Text
span.fp-text.-text-lg Text
span.fp-text.-text-xl Text
span.fp-text.-text-2xl Text
span.fp-text.-text-3xl Text
span.fp-text.-text-8xl Text
br
br
span.fp-text.-no-wrap Text not wrapped. 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.
br
br
.fp-text.-lines-1 Text clamped after 1 line. 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.
br
.fp-text.-lines-2 Text clamped after 2 lines. 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.
br
span.fp-text
  blockquote 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.
br
span.fp-text.-paragraph
  .
    Multiline
    text

Title

<h1 class="fp-title">Title
</h1>
<h2 class="fp-title">Title
</h2>
<h3 class="fp-title -color-shade-400">Title
</h3>
h1.fp-title Title
h2.fp-title Title
h3.fp-title.-color-shade-400 Title

Top menu item

<a class="fp-top-menu-item">Home</a><a class="fp-top-menu-item -active">Home</a>
a.fp-top-menu-item Home
a.fp-top-menu-item.-active Home

Video

<div class="fp-video">
  <video>
    <source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
  </video>
</div>
<div class="fp-video -lg">
  <video>
    <source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
  </video>
</div>
<div class="fp-video -lg">
  <video>
    <source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
  </video>
  <div class="fp-video--trigger">
    <i class="fp-icon fp-glyph-play -color-shade-900 -s16"></i>
  </div>
</div>
<div class="fp-video  -wide">
  <video>
    <source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
  </video>
</div>
<div class="fp-video -expand ">
  <video>
    <source src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4"/>
  </video>
</div>
.fp-video
  video
    source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video.-lg
  video
    source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video.-lg
  video
    source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
  .fp-video--trigger
    i.fp-icon.fp-glyph-play.-color-shade-900.-s16
.fp-video.-wide
  video
    source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")
.fp-video.-expand
  video
    source(src="https://files.fairplayer.co/clubs/paris-volley/medias/video.mp4" type="video/mp4")