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

Field

<div class="jhlite-field">
  <div class="jhlite-field--label">
    <label class="jhlite-label" for="field-name">Field name
    </label>
  </div>
  <div class="jhlite-field--field">
    <input class="jhlite-input-text" id="field-name" value="Field value"/>
  </div>
</div>
<div class="jhlite-field">
  <div class="jhlite-field--label">
    <label class="jhlite-label" for="field-optional">Field optional
    </label>
  </div>
  <div class="jhlite-field--field">
    <input class="jhlite-input-text" id="field-optional"/>
  </div>
  <div class="jhlite-field--optional">Optional</div>
</div>
.jhlite-field
  .jhlite-field--label
    label.jhlite-label(for='field-name').
      Field name
      
  .jhlite-field--field
    input.jhlite-input-text#field-name(value='Field value')
.jhlite-field
  .jhlite-field--label
    label.jhlite-label(for='field-optional').
      Field optional
      
  .jhlite-field--field
    input.jhlite-input-text#field-optional
  .jhlite-field--optional Optional

Icon text

<span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-book" role="img" aria-label="Icon book"></em></span><span class="jhlite-icon-text--text">Icon text</span></span><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-book" role="img" aria-label="Icon book"></em></span><span class="jhlite-icon-text--text -lg-only">Show lg only</span></span>
span.jhlite-icon-text
  span.jhlite-icon-text--icon
    em.jhlite-icon.jhlite-icon-book(role='img', aria-label='Icon book')
  span.jhlite-icon-text--text Icon text
span.jhlite-icon-text
  span.jhlite-icon-text--icon
    em.jhlite-icon.jhlite-icon-book(role='img', aria-label='Icon book')
  span.jhlite-icon-text--text.-lg-only Show lg only

Loader container

<div class="jhlite-loader-container">
  <div class="jhlite-loader"></div>
</div>
.jhlite-loader-container
  .jhlite-loader
<nav>
  <ul class="jhlite-nav">
    <li class="jhlite-nav--item"><span class="jhlite-nav-item -current"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-puzzle" role="img" aria-label="Icon puzzle"></em></span><span class="jhlite-icon-text--text">Modules</span></span></span>
    </li>
    <li class="jhlite-nav--item"><a class="jhlite-nav-item" href="#"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-map" role="img" aria-label="Icon map"></em></span><span class="jhlite-icon-text--text">Landscape</span></span></a>
    </li>
    <li class="jhlite-nav--item"><a class="jhlite-nav-item" href="#"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-book" role="img" aria-label="Icon book"></em></span><span class="jhlite-icon-text--text">Documentation</span></span></a>
    </li>
    <li class="jhlite-nav--item"><a class="jhlite-nav-item" href="#"><span class="jhlite-icon-text"><span class="jhlite-icon-text--icon"><em class="jhlite-icon jhlite-icon-binoculars" role="img" aria-label="Icon binoculars"></em></span><span class="jhlite-icon-text--text">Swagger UI</span></span></a>
    </li>
  </ul>
</nav>
nav
  ul.jhlite-nav
    li.jhlite-nav--item
      span.jhlite-nav-item.-current
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-puzzle(role='img', aria-label='Icon puzzle')
          span.jhlite-icon-text--text Modules
    li.jhlite-nav--item
      a.jhlite-nav-item(href='#')
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-map(role='img', aria-label='Icon map')
          span.jhlite-icon-text--text Landscape
    li.jhlite-nav--item
      a.jhlite-nav-item(href='#')
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-book(role='img', aria-label='Icon book')
          span.jhlite-icon-text--text Documentation
    li.jhlite-nav--item
      a.jhlite-nav-item(href='#')
        span.jhlite-icon-text
          span.jhlite-icon-text--icon
            em.jhlite-icon.jhlite-icon-binoculars(role='img', aria-label='Icon binoculars')
          span.jhlite-icon-text--text Swagger UI

Toast

<div class="jhlite-toast -success" role="alert">
  <div class="jhlite-toast--message">Good message
  </div>
  <button class="jhlite-toast--action" aria-label="Close"><em class="jhlite-icon jhlite-icon-cancel" role="img" aria-label="Icon cancel"></em>
  </button>
</div>
<div class="jhlite-toast -error" role="alert">
  <div class="jhlite-toast--message">Bad message
  </div>
  <button class="jhlite-toast--action" aria-label="Close"><em class="jhlite-icon jhlite-icon-cancel" role="img" aria-label="Icon cancel"></em>
  </button>
</div>
.jhlite-toast.-success(role='alert')
  .jhlite-toast--message.
    Good message
    
  button.jhlite-toast--action(aria-label='Close')
    em.jhlite-icon.jhlite-icon-cancel(role='img', aria-label='Icon cancel')
.jhlite-toast.-error(role='alert')
  .jhlite-toast--message.
    Bad message
    
  button.jhlite-toast--action(aria-label='Close')
    em.jhlite-icon.jhlite-icon-cancel(role='img', aria-label='Icon cancel')