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 jhlite-with-theme-switch"><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.jhlite-with-theme-switch
    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

Module parameters

<div class="jhipster-module-parameters selected all-valid-parameters">
  <div class="jhipster-module-parameters--type selected all-valid-parameters">
    <div class="jhipster-module-parameters--type-title selected all-valid-parameters">Mandatory</div>
    <div class="jhipster-module-parameters--type-stats selected all-valid-parameters">3 / 3</div>
  </div>
  <div class="jhipster-module-parameters--parameter selected all-valid-parameters">
    <div class="jhipster-module-parameters--parameter-key selected all-valid-parameters">packageName</div>
    <div class="jhipster-module-parameters--parameter-value selected all-valid-parameters"></div>
  </div>
  <div class="jhipster-module-parameters--parameter selected all-valid-parameters">
    <div class="jhipster-module-parameters--parameter-key selected all-valid-parameters">projectName</div>
    <div class="jhipster-module-parameters--parameter-value selected all-valid-parameters"></div>
  </div>
  <div class="jhipster-module-parameters--parameter selected all-valid-parameters">
    <div class="jhipster-module-parameters--parameter-key selected all-valid-parameters">baseName</div>
    <div class="jhipster-module-parameters--parameter-value selected all-valid-parameters"></div>
  </div>
</div>
<div class="jhipster-module-parameters selected invalid-optional-parameter">
  <div class="jhipster-module-parameters--type selected invalid-optional-parameter">
    <div class="jhipster-module-parameters--type-title selected invalid-optional-parameter">Mandatory</div>
    <div class="jhipster-module-parameters--type-stats selected invalid-optional-parameter">3 / 3</div>
  </div>
  <div class="jhipster-module-parameters--parameter selected invalid-optional-parameter">
    <div class="jhipster-module-parameters--parameter-key selected invalid-optional-parameter">packageName</div>
    <div class="jhipster-module-parameters--parameter-value selected invalid-optional-parameter"></div>
  </div>
  <div class="jhipster-module-parameters--parameter selected invalid-optional-parameter">
    <div class="jhipster-module-parameters--parameter-key selected invalid-optional-parameter">projectName</div>
    <div class="jhipster-module-parameters--parameter-value selected invalid-optional-parameter"></div>
  </div>
  <div class="jhipster-module-parameters--parameter selected invalid-optional-parameter">
    <div class="jhipster-module-parameters--parameter-key selected invalid-optional-parameter">baseName</div>
    <div class="jhipster-module-parameters--parameter-value selected invalid-optional-parameter"></div>
  </div>
</div>
<div class="jhipster-module-parameters selected invalid-mandatory-parameter">
  <div class="jhipster-module-parameters--type selected invalid-mandatory-parameter">
    <div class="jhipster-module-parameters--type-title selected invalid-mandatory-parameter">Mandatory</div>
    <div class="jhipster-module-parameters--type-stats selected invalid-mandatory-parameter">3 / 3</div>
  </div>
  <div class="jhipster-module-parameters--parameter selected invalid-mandatory-parameter">
    <div class="jhipster-module-parameters--parameter-key selected invalid-mandatory-parameter">packageName</div>
    <div class="jhipster-module-parameters--parameter-value selected invalid-mandatory-parameter"></div>
  </div>
  <div class="jhipster-module-parameters--parameter selected invalid-mandatory-parameter">
    <div class="jhipster-module-parameters--parameter-key selected invalid-mandatory-parameter">projectName</div>
    <div class="jhipster-module-parameters--parameter-value selected invalid-mandatory-parameter"></div>
  </div>
  <div class="jhipster-module-parameters--parameter selected invalid-mandatory-parameter">
    <div class="jhipster-module-parameters--parameter-key selected invalid-mandatory-parameter">baseName</div>
    <div class="jhipster-module-parameters--parameter-value selected invalid-mandatory-parameter"></div>
  </div>
</div>
.jhipster-module-parameters.selected.all-valid-parameters
  .jhipster-module-parameters--type.selected.all-valid-parameters
    .jhipster-module-parameters--type-title.selected.all-valid-parameters Mandatory
    .jhipster-module-parameters--type-stats.selected.all-valid-parameters 3 / 3
  .jhipster-module-parameters--parameter.selected.all-valid-parameters
    .jhipster-module-parameters--parameter-key.selected.all-valid-parameters packageName
    .jhipster-module-parameters--parameter-value.selected.all-valid-parameters
  .jhipster-module-parameters--parameter.selected.all-valid-parameters
    .jhipster-module-parameters--parameter-key.selected.all-valid-parameters projectName
    .jhipster-module-parameters--parameter-value.selected.all-valid-parameters
  .jhipster-module-parameters--parameter.selected.all-valid-parameters
    .jhipster-module-parameters--parameter-key.selected.all-valid-parameters baseName
    .jhipster-module-parameters--parameter-value.selected.all-valid-parameters
.jhipster-module-parameters.selected.invalid-optional-parameter
  .jhipster-module-parameters--type.selected.invalid-optional-parameter
    .jhipster-module-parameters--type-title.selected.invalid-optional-parameter Mandatory
    .jhipster-module-parameters--type-stats.selected.invalid-optional-parameter 3 / 3
  .jhipster-module-parameters--parameter.selected.invalid-optional-parameter
    .jhipster-module-parameters--parameter-key.selected.invalid-optional-parameter packageName
    .jhipster-module-parameters--parameter-value.selected.invalid-optional-parameter
  .jhipster-module-parameters--parameter.selected.invalid-optional-parameter
    .jhipster-module-parameters--parameter-key.selected.invalid-optional-parameter projectName
    .jhipster-module-parameters--parameter-value.selected.invalid-optional-parameter
  .jhipster-module-parameters--parameter.selected.invalid-optional-parameter
    .jhipster-module-parameters--parameter-key.selected.invalid-optional-parameter baseName
    .jhipster-module-parameters--parameter-value.selected.invalid-optional-parameter
.jhipster-module-parameters.selected.invalid-mandatory-parameter
  .jhipster-module-parameters--type.selected.invalid-mandatory-parameter
    .jhipster-module-parameters--type-title.selected.invalid-mandatory-parameter Mandatory
    .jhipster-module-parameters--type-stats.selected.invalid-mandatory-parameter 3 / 3
  .jhipster-module-parameters--parameter.selected.invalid-mandatory-parameter
    .jhipster-module-parameters--parameter-key.selected.invalid-mandatory-parameter packageName
    .jhipster-module-parameters--parameter-value.selected.invalid-mandatory-parameter
  .jhipster-module-parameters--parameter.selected.invalid-mandatory-parameter
    .jhipster-module-parameters--parameter-key.selected.invalid-mandatory-parameter projectName
    .jhipster-module-parameters--parameter-value.selected.invalid-mandatory-parameter
  .jhipster-module-parameters--parameter.selected.invalid-mandatory-parameter
    .jhipster-module-parameters--parameter-key.selected.invalid-mandatory-parameter baseName
    .jhipster-module-parameters--parameter-value.selected.invalid-mandatory-parameter

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