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

Atom

<div class="tikui-atom">
  <div class="tikui-atom--heart">
    <div class="tikui-atom--content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ipsum metus, tempor eu odio non, mollis volutpat risus. Donec eleifend condimentum sodales. Cras faucibus massa non scelerisque laoreet. Vivamus arcu lacus, sodales eu massa semper, dapibus ultricies libero. Quisque aliquam sed mauris id consectetur. Nullam accumsan pulvinar nulla ac varius. Donec vitae ultrices nibh, sit amet molestie leo. Nullam laoreet ipsum ac faucibus cursus. Fusce nec nibh porttitor, tempus lorem a, auctor nisi. Phasellus malesuada, neque non gravida tempus, risus massa consectetur erat, at laoreet mi augue vel leo. Nullam tempor pellentesque dignissim. Duis congue velit ut magna varius facilisis. Fusce sodales elit dui, in egestas est placerat vitae. Nam pulvinar nunc mi, ac molestie nibh luctus eu.
    </div>
  </div>
</div>

.tikui-atom
  .tikui-atom--heart
    .tikui-atom--content.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ipsum metus, tempor eu odio non, mollis volutpat risus. Donec eleifend condimentum sodales. Cras faucibus massa non scelerisque laoreet. Vivamus arcu lacus, sodales eu massa semper, dapibus ultricies libero. Quisque aliquam sed mauris id consectetur. Nullam accumsan pulvinar nulla ac varius. Donec vitae ultrices nibh, sit amet molestie leo. Nullam laoreet ipsum ac faucibus cursus. Fusce nec nibh porttitor, tempus lorem a, auctor nisi. Phasellus malesuada, neque non gravida tempus, risus massa consectetur erat, at laoreet mi augue vel leo. Nullam tempor pellentesque dignissim. Duis congue velit ut magna varius facilisis. Fusce sodales elit dui, in egestas est placerat vitae. Nam pulvinar nunc mi, ac molestie nibh luctus eu.

Header navigation

<nav>
  <ul class="tikui-header-navigation">
    <li class="tikui-header-navigation--slot">
      <button class="tikui-header-item -selected" aria-current="page"><span class="tikui-header-item--text">First</span><span class="tikui-header-item--feedback"></span></button>
    </li>
    <li class="tikui-header-navigation--slot">
      <button class="tikui-header-item"><span class="tikui-header-item--text">Second</span><span class="tikui-header-item--feedback"></span></button>
    </li>
    <li class="tikui-header-navigation--slot">
      <button class="tikui-header-item"><span class="tikui-header-item--text">Third</span><span class="tikui-header-item--feedback"></span></button>
    </li>
  </ul>
</nav>

nav
  ul.tikui-header-navigation
    li.tikui-header-navigation--slot
      button.tikui-header-item.-selected(aria-current='page')
        span.tikui-header-item--text First
        span.tikui-header-item--feedback
    li.tikui-header-navigation--slot
      button.tikui-header-item
        span.tikui-header-item--text Second
        span.tikui-header-item--feedback
    li.tikui-header-navigation--slot
      button.tikui-header-item
        span.tikui-header-item--text Third
        span.tikui-header-item--feedback

Nav vertical

<div class="tikui-nav-vertical">
  <div class="tikui-nav-vertical--item -level-1"><a class="tikui-nav-item -main" href="#">Level one</a>
  </div>
  <div class="tikui-nav-vertical--item -level-2"><a class="tikui-nav-item -child -selected" href="#">Level two</a>
  </div>
  <div class="tikui-nav-vertical--item -level-3"><a class="tikui-nav-item -child" href="#">Level three</a>
  </div>
  <div class="tikui-nav-vertical--item -level-4"><a class="tikui-nav-item -child" href="#">Level four</a>
  </div>
  <div class="tikui-nav-vertical--item -level-5"><a class="tikui-nav-item -child" href="#">Level five</a>
  </div>
  <div class="tikui-nav-vertical--item -level-6"><a class="tikui-nav-item -child" href="#">Level six</a>
  </div>
</div>

.tikui-nav-vertical
  .tikui-nav-vertical--item.-level-1
    a.tikui-nav-item.-main(href='#') Level one
  .tikui-nav-vertical--item.-level-2
    a.tikui-nav-item.-child.-selected(href='#') Level two
  .tikui-nav-vertical--item.-level-3
    a.tikui-nav-item.-child(href='#') Level three
  .tikui-nav-vertical--item.-level-4
    a.tikui-nav-item.-child(href='#') Level four
  .tikui-nav-vertical--item.-level-5
    a.tikui-nav-item.-child(href='#') Level five
  .tikui-nav-vertical--item.-level-6
    a.tikui-nav-item.-child(href='#') Level six