Tikui.org

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

Button

<button class="tikui-button">Button
</button>
<button class="tikui-button -secondary">Button secondary
</button>
<button class="tikui-button -small">Button small
</button>
button.tikui-button Button
button.tikui-button.-secondary Button secondary
button.tikui-button.-small Button small

Header item

<button class="tikui-header-item"><span class="tikui-header-item--text">Header item</span><span class="tikui-header-item--feedback"></span></button>
<a class="tikui-header-item" href="#"><span class="tikui-header-item--text">Header item</span><span class="tikui-header-item--feedback"></span></a>
<a class="tikui-header-item -selected" href="#" aria-current="page"><span class="tikui-header-item--text">Header item</span><span class="tikui-header-item--feedback"></span></a>
button.tikui-header-item
  span.tikui-header-item--text Header item
  span.tikui-header-item--feedback
a.tikui-header-item(href="#")
  span.tikui-header-item--text Header item
  span.tikui-header-item--feedback
a.tikui-header-item.-selected(href="#" aria-current="page")
  span.tikui-header-item--text Header item
  span.tikui-header-item--feedback

Image

<img class="tikui-image" src="../assets/skateboard-illustration.svg" alt="Alternative text" width="599" height="512"/>
img.tikui-image(src="../assets/skateboard-illustration.svg" alt="Alternative text" width="599" height="512")
<a class="tikui-link" href="#">Link</a>
a.tikui-link(href="#")
  | Link
<img class="tikui-logo" src="../atom/logo/logo.svg" width="115" height="67" alt="Tikui logo"/>
img.tikui-logo(src="../atom/logo/logo.svg" width="115" height="67" alt="Tikui logo")
<a class="tikui-nav-item -main" href="#">Nav item main</a><a class="tikui-nav-item -main -selected" href="#">Nav item main selected</a><a class="tikui-nav-item -child" href="#">Nav item child</a><a class="tikui-nav-item -child -selected" href="#">Nav item child selected</a>
a.tikui-nav-item.-main(href="#")
  | Nav item main
a.tikui-nav-item.-main.-selected(href="#")
  | Nav item main selected
a.tikui-nav-item.-child(href="#")
  | Nav item child
a.tikui-nav-item.-child.-selected(href="#")
  | Nav item child selected

Paragraph

<p class="tikui-paragraph -bold">Bold paragraph
</p>
<p class="tikui-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum sit amet odio et dapibus. Duis sodales quam at eros ornare, sed finibus neque convallis. Quisque fringilla porta ante sit amet commodo. Pellentesque fringilla ligula in pellentesque lacinia. Aliquam bibendum pulvinar tempus. Vestibulum faucibus hendrerit finibus. In mollis enim id quam scelerisque aliquam. Mauris pretium varius condimentum. Sed finibus, urna a imperdiet laoreet, felis neque porta ligula, at iaculis odio est quis sapien. Phasellus hendrerit risus vulputate elit auctor lobortis.
</p>
p.tikui-paragraph.-bold Bold paragraph
p.tikui-paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elementum sit amet odio et dapibus. Duis sodales quam at eros ornare, sed finibus neque convallis. Quisque fringilla porta ante sit amet commodo. Pellentesque fringilla ligula in pellentesque lacinia. Aliquam bibendum pulvinar tempus. Vestibulum faucibus hendrerit finibus. In mollis enim id quam scelerisque aliquam. Mauris pretium varius condimentum. Sed finibus, urna a imperdiet laoreet, felis neque porta ligula, at iaculis odio est quis sapien. Phasellus hendrerit risus vulputate elit auctor lobortis.

Title

Title main

<h1 class="tikui-title-main">A title
on multiple lines
<span class="tikui-title-main--bordered">with
bordered styles</span>
</h1>
h1.tikui-title-main
  .
    A title
    on multiple lines
  span.tikui-title-main--bordered
    .
      with
      bordered styles

Title section

<h2 class="tikui-title-section">Title section
</h2>
h2.tikui-title-section Title section

Title part

<div class="tikui-title-part">Title part
</div>
.tikui-title-part Title part