Tikui

Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Building up from molecules to organisms encourages creating standalone, portable, reusable components.

Atomic Design by Brad Frost
<header class="jhlite-header">
  <div class="jhlite-header--slot"><a class="jhlite-logo" href="#"><img class="jhlite-logo--icon" src="../atom/logo/jhipster.png" alt="JHipster bow tie" width="48"/><span class="jhlite-logo--text">JHipster lite</span></a>
  </div>
  <div class="jhlite-header--slot -expand"></div>
  <div class="jhlite-header--slot">
    <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>
  </div>
</header>
header.jhlite-header
  .jhlite-header--slot
    a.jhlite-logo(href='#')
      img.jhlite-logo--icon(src='../atom/logo/jhipster.png', alt='JHipster bow tie', width='48')
      span.jhlite-logo--text JHipster lite
  .jhlite-header--slot.-expand
  .jhlite-header--slot
    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

Side menu

<div class="jhlite-side-menu">
  <div class="jhlite-side-menu--slot -expand">First
  </div>
  <div class="jhlite-side-menu--slot">Second
  </div>
</div>
.jhlite-side-menu
  .jhlite-side-menu--slot.-expand.
    First
    
  .jhlite-side-menu--slot.
    Second

Vertical space

<div class="jhlite-vertical-space -paragraph">
  <div class="jhlite-vertical-space--line">First paragraph
  </div>
  <div class="jhlite-vertical-space--line">Second paragraph
  </div>
  <div class="jhlite-vertical-space--line">Third paragraph
  </div>
</div>
.jhlite-vertical-space.-paragraph
  .jhlite-vertical-space--line.
    First paragraph
    
  .jhlite-vertical-space--line.
    Second paragraph
    
  .jhlite-vertical-space--line.
    Third paragraph