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><span class="jhlite-logo-version--text">v0.45.0</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" 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" 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" 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" 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
      span.jhlite-logo-version--text v0.45.0
  .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(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(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(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(aria-label="Icon binoculars")
              span.jhlite-icon-text--text Swagger UI

Landscape

<div class="jhipster-landscape jhlite-menu-content-template">
  <div class="jhipster-landscape-modes-selection">
    <div class="jhlite-mode-switch">
      <div class="jhlite-mode-switch--modes">
        <button class="jhlite-button-switch -selected">Compacted
        </button>
        <button class="jhlite-button-switch">Extended
        </button>
      </div>
    </div>
  </div>
  <div class="jhipster-landscape-map jhlite-menu-content-template--content">
    <div class="jhipster-landscape-levels">
      <ul class="jhipster-landscape-levels--level -compacted">
        <li class="jhipster-landscape-element -compacted">
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
        </li>
      </ul>
      <ul class="jhipster-landscape-levels--level -compacted">
        <li class="jhipster-landscape-element -compacted">
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
        </li>
      </ul>
      <ul class="jhipster-landscape-levels--level -compacted">
        <li class="jhipster-landscape-element -compacted">
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
          <div class="jhlite-chip -selectable -compacted">
            <div class="jhlite-chip--title -selectable -compacted">github-codespaces</div>
            <div class="jhlite-chip--description -selectable -compacted">Init GitHub Codespaces configuration files</div>
          </div>
        </li>
      </ul>
    </div>
    <svg class="jhipster-landscape-connectors" style="width: 800px; height: 724px">
      <path class="jhipster-landscape-connectors--line -selectable -compacted" d="M 212 412 l 138 0"></path>
      <path class="jhipster-landscape-connectors--line -selectable -compacted" d="M 503 412 l 142 0"></path>
    </svg>
  </div>
  <div class="jhlite-menu-content-template--menu">
    <div class="jhlite-side-menu">
      <div class="jhlite-side-menu--slot -expand">
        <div class="jhlite-vertical-space -paragraph">
          <div class="jhlite-vertical-space--line">
            <div class="jhipster-module-properties jhlite-vertical-space -paragraph">
              <div class="jhlite-vertical-space--line">
                <h2 class="jhipster-modules-properties-form--properties-title"></h2>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-input">Project folder</label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="text"/>
                  </div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-label"><span>Base java package -&nbsp;</span><strong>packageName</strong></label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="text"/>
                  </div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-label"><span>Base Project full name -&nbsp;</span><strong>projectName</strong></label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="text"/>
                  </div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-label"><span>Project short name (only letters and numbers) -&nbsp;</span><strong>baseName</strong></label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="text"/>
                  </div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-label"><span>Server port -&nbsp;</span><strong>serverPort</strong></label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="number"/>
                  </div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-label"><span>Type of line break (lf or crlf) -&nbsp;</span><strong>endOfLine</strong></label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="text"/>
                  </div>
                  <div class="jhlite-field--optional">Optional</div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <div class="jhlite-field">
                  <div class="jhlite-field--label">
                    <label class="jhlite-label"><span>Number of spaces in indentation -&nbsp;</span><strong>indentSize</strong></label>
                  </div>
                  <div class="jhlite-field--field">
                    <input class="jhlite-input-text" type="number"/>
                  </div>
                  <div class="jhlite-field--optional">Optional</div>
                </div>
              </div>
              <div class="jhlite-vertical-space--line">
                <input id="commit-modules" type="checkbox"/>
                <label class="jhipster-modules-properties-form--commit-modules-label">Commit module application</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jhlite-side-menu--slot">
        <div class="jhipster-side-form--actions">
          <div class="jhlite-vertical-space -paragraph">
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-play-circled" aria-label="Icon play-circled"></em><span>&nbsp;Apply new</span>
              </button>
            </div>
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-play-circled" aria-label="Icon play-circled"></em><span>&nbsp;Apply selected</span>
              </button>
            </div>
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-code" aria-label="Icon code"></em><span>&nbsp;Format</span>
              </button>
            </div>
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-download" aria-label="Icon download"></em><span>&nbsp;Download</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.jhipster-landscape.jhlite-menu-content-template
  .jhipster-landscape-modes-selection
    .jhlite-mode-switch
      .jhlite-mode-switch--modes
        button.jhlite-button-switch.-selected Compacted
        button.jhlite-button-switch Extended
  .jhipster-landscape-map.jhlite-menu-content-template--content
    .jhipster-landscape-levels
      ul.jhipster-landscape-levels--level.-compacted
        li.jhipster-landscape-element.-compacted
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
      ul.jhipster-landscape-levels--level.-compacted
        li.jhipster-landscape-element.-compacted
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
      ul.jhipster-landscape-levels--level.-compacted
        li.jhipster-landscape-element.-compacted
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
          .jhlite-chip.-selectable.-compacted
            .jhlite-chip--title.-selectable.-compacted github-codespaces
            .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
    svg.jhipster-landscape-connectors(style="width: 800px; height: 724px")
      path.jhipster-landscape-connectors--line.-selectable.-compacted(d="M 212 412 l 138 0")
      path.jhipster-landscape-connectors--line.-selectable.-compacted(d="M 503 412 l 142 0")
  .jhlite-menu-content-template--menu
    .jhlite-side-menu
      .jhlite-side-menu--slot.-expand
        .jhlite-vertical-space.-paragraph
          .jhlite-vertical-space--line
            .jhipster-module-properties.jhlite-vertical-space.-paragraph
              .jhlite-vertical-space--line
                h2.jhipster-modules-properties-form--properties-title
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-input Project folder
                  .jhlite-field--field
                    input.jhlite-input-text(type="text")
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-label
                      span Base java package -
                      strong packageName
                  .jhlite-field--field
                    input.jhlite-input-text(type="text")
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-label
                      span Base Project full name -
                      strong projectName
                  .jhlite-field--field
                    input.jhlite-input-text(type="text")
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-label
                      span Project short name (only letters and numbers) -
                      strong baseName
                  .jhlite-field--field
                    input.jhlite-input-text(type="text")
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-label
                      span Server port -
                      strong serverPort
                  .jhlite-field--field
                    input.jhlite-input-text(type="number")
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-label
                      span Type of line break (lf or crlf) -
                      strong endOfLine
                  .jhlite-field--field
                    input.jhlite-input-text(type="text")
                  .jhlite-field--optional Optional
              .jhlite-vertical-space--line
                .jhlite-field
                  .jhlite-field--label
                    label.jhlite-label
                      span Number of spaces in indentation -
                      strong indentSize
                  .jhlite-field--field
                    input.jhlite-input-text(type="number")
                  .jhlite-field--optional Optional
              .jhlite-vertical-space--line
                input#commit-modules(type="checkbox")
                label.jhipster-modules-properties-form--commit-modules-label Commit module application
      .jhlite-side-menu--slot
        .jhipster-side-form--actions
          .jhlite-vertical-space.-paragraph
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-play-circled(aria-label="Icon play-circled")
                span Apply new
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-play-circled(aria-label="Icon play-circled")
                span Apply selected
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-code(aria-label="Icon code")
                span Format
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-download(aria-label="Icon download")
                span Download

Landscape loader

<div class="jhlite-landscape-loader jhlite-menu-content-template">
  <div class="ph-jhlite-landscape-modes-selection">
    <div class="ph-item">
      <div class="ph-row">
        <div class="ph-col-12 big"></div>
      </div>
    </div>
  </div>
  <div class="ph-jhlite-landscape-map jhlite-menu-content-template--content">
    <div class="ph-jhlite-landscape-levels">
      <ListPlaceHolderVue>
        <PhPictureVue></PhPictureVue>
        <PhRowVue></PhRowVue>
      </ListPlaceHolderVue>
    </div>
  </div>
  <div class="jhlite-menu-content-template--menu">
    <div class="ph-jhlite-landscape-sidemenu">
      <div class="ph-jhlite-landscape-sidemenu-top">
        <div class="ph-item">
          <div class="ph-col-12">
            <div class="ph-row">
              <div class="ph-col-12 empty"></div>
              <div class="ph-col-6 big"></div>
              <div class="ph-col-6 empty big"></div>
              <div class="ph-col-12 empty"></div>
            </div>
            <div class="ph-row">
              <div class="ph-col-6"></div>
              <div class="ph-col-6 empty"></div>
              <div class="ph-col-12 big"></div>
              <div class="ph-col-10"></div>
              <div class="ph-col-10 empty"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="ph-jhlite-landscape-sidemenu-bottom">
        <div class="ph-item">
          <div class="ph-col-12">
            <div class="ph-row">
              <div class="ph-col-12 big"></div>
              <div class="ph-col-12 big"></div>
              <div class="ph-col-12 big"></div>
              <div class="ph-col-12 big"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.jhlite-landscape-loader.jhlite-menu-content-template
  .ph-jhlite-landscape-modes-selection
    .ph-item
      .ph-row
        .ph-col-12.big
  .ph-jhlite-landscape-map.jhlite-menu-content-template--content
    .ph-jhlite-landscape-levels
      ListPlaceHolderVue
        PhPictureVue
        PhRowVue
  .jhlite-menu-content-template--menu
    .ph-jhlite-landscape-sidemenu
      .ph-jhlite-landscape-sidemenu-top
        .ph-item
          .ph-col-12
            .ph-row
              .ph-col-12.empty
              .ph-col-6.big
              .ph-col-6.empty.big
              .ph-col-12.empty
            .ph-row
              .ph-col-6
              .ph-col-6.empty
              .ph-col-12.big
              .ph-col-10
              .ph-col-10.empty
      .ph-jhlite-landscape-sidemenu-bottom
        .ph-item
          .ph-col-12
            .ph-row
              .ph-col-12.big
              .ph-col-12.big
              .ph-col-12.big
              .ph-col-12.big

Landscape minimap

<div class="jhlite-landscape-minimap">
  <div class="jhlite-minimap--container">
    <button class="jhlite-button-main -rounded-top -small"><em class="jhlite-icon jhlite-icon-eye-off" role="img" aria-label="Icon eye-off"></em></button>
    <div class="jhlite-minimap--size" style="height: 100px; width: 200px">
      <div class="jhlite-minimap--viewer"></div>
      <div class="jhlite-minimap--content"></div>
    </div>
  </div>
</div>

.jhlite-landscape-minimap
  .jhlite-minimap--container
    button.jhlite-button-main.-rounded-top.-small
      em.jhlite-icon.jhlite-icon-eye-off(role="img" aria-label="Icon eye-off")
    .jhlite-minimap--size(style="height: 100px; width: 200px")
      .jhlite-minimap--viewer
      .jhlite-minimap--content

Landscape preset configuration

<div class="jhlite-landscape-preset-configuration">
  <button class="jhlite-button-main -rounded-top -small"><em class="jhlite-icon jhlite-icon-eye-off" role="img" aria-label="Icon eye-off"></em></button>
  <div class="jhlite-landscape-preset-configuration--content">
    <div class="jhlite-field--label">
      <label class="jhlite-input" for="preset-configuration">Presets Configurations</label>
    </div>
    <div class="jhlite-landscape-preset-configuration--field">
      <select class="jhlite-select" id="preset-configuration" @change="handlePresetChange" :value="selectedPresetName">
        <option value="">Select a preset...</option>
        <option value="preset.name">Java Library with Maven</option>
        <option value="preset.name">Webapp: Vue + Spring Boot</option>
        <option value="preset.name">JHLite Extension with Maven</option>
      </select>
    </div>
  </div>
</div>

.jhlite-landscape-preset-configuration
  button.jhlite-button-main.-rounded-top.-small
    em.jhlite-icon.jhlite-icon-eye-off(role="img" aria-label="Icon eye-off")
  .jhlite-landscape-preset-configuration--content
    .jhlite-field--label
      label.jhlite-input(for="preset-configuration")
        | Presets Configurations
    .jhlite-landscape-preset-configuration--field
      select#preset-configuration.jhlite-select(@change="handlePresetChange" :value="selectedPresetName")
        option(value)
          | Select a preset...
        option(value="preset.name")
          | Java Library with Maven
        option(value="preset.name")
          | Webapp: Vue + Spring Boot
        option(value="preset.name")
          | JHLite Extension with Maven

Landscape rank module filter

<div class="jhlite-landscape-rank-module-filter">
  <div class="jhlite-landscape-rank-module-filter--ranks">
    <button class="jhlite-button-toggle">D
    </button>
    <button class="jhlite-button-toggle" disabled="disabled">C
    </button>
    <button class="jhlite-button-toggle" disabled="disabled">B
    </button>
    <button class="jhlite-button-toggle" disabled="disabled">A
    </button>
    <button class="jhlite-button-toggle -active">S
    </button>
  </div>
</div>

.jhlite-landscape-rank-module-filter
  .jhlite-landscape-rank-module-filter--ranks
    button.jhlite-button-toggle D
    button.jhlite-button-toggle(disabled="disabled")
      | C
    button.jhlite-button-toggle(disabled="disabled")
      | B
    button.jhlite-button-toggle(disabled="disabled")
      | A
    button.jhlite-button-toggle.-active S

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

Modules patch

<div class="jhipster-modules-patch jhlite-menu-content-template">
  <div class="jhipster-modules-list jhlite-menu-content-template--content">
    <div class="jhipster-modules-filters">
      <div class="jhipster-modules-filters--tags">
        <button class="jhipster-tag-filter">init</button>
        <button class="jhipster-tag-filter">init</button>
        <button class="jhipster-tag-filter">init</button>
      </div>
      <input class="jhipster-modules-filters--filter" placeholder="Filter"/>
      <div class="jhipster-modules-filters--displayed-modules-count">3 / 5</div>
    </div>
    <div class="jhipster-modules-list--categories">
      <div>
        <div>
          <h2 class="jhipster-module-category--name">Angular</h2>
          <div class="jhipster-module not-selected not-applied">
            <div class="jhipster-module--content not-selected not-applied">
              <div class="jhipster-module--tags not-selected not-applied">
                <div class="jhipster-module--tag">angular</div>
                <div class="jhipster-module--tag">client</div>
              </div>
              <div class="jhipster-module--slug not-selected not-applied">angular-core</div>
              <div class="jhipster-module--description not-selected not-applied">Add Angular + Angular CLI
                <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>
            </div>
            <button class="jhipster-module--apply-button"><span><em class="jhlite-icon jhlite-icon-play" aria-label="Icon play"></em></span></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <aside class="jhlite-menu-content-template--menu">
    <div class="jhlite-side-menu">
      <div class="jhlite-side-menu--slot -expand">
        <div class="jhipster-module-properties jhlite-vertical-space -paragraph">
          <div class="jhlite-vertical-space--line">
            <h2 class="jhipster-modules-properties-form--properties-title"></h2>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-input">Project folder</label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="text"/>
              </div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label"><span>Base java package -&nbsp;</span><strong>packageName</strong></label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="text"/>
              </div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label"><span>Base Project full name -&nbsp;</span><strong>projectName</strong></label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="text"/>
              </div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label"><span>Project short name (only letters and numbers) -&nbsp;</span><strong>baseName</strong></label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="text"/>
              </div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label"><span>Server port -&nbsp;</span><strong>serverPort</strong></label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="number"/>
              </div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label"><span>Type of line break (lf or crlf) -&nbsp;</span><strong>endOfLine</strong></label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="text"/>
              </div>
              <div class="jhlite-field--optional">Optional</div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <div class="jhlite-field">
              <div class="jhlite-field--label">
                <label class="jhlite-label"><span>Number of spaces in indentation -&nbsp;</span><strong>indentSize</strong></label>
              </div>
              <div class="jhlite-field--field">
                <input class="jhlite-input-text" type="number"/>
              </div>
              <div class="jhlite-field--optional">Optional</div>
            </div>
          </div>
          <div class="jhlite-vertical-space--line">
            <input id="commit-modules" type="checkbox"/>
            <label class="jhipster-modules-properties-form--commit-modules-label">Commit module application</label>
          </div>
        </div>
      </div>
      <div class="jhlite-side-menu--slot">
        <div class="jhipster-side-form--actions">
          <div class="jhlite-vertical-space -paragraph">
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-play-circled" aria-label="Icon play-circled"></em><span>&nbsp;Apply new</span>
              </button>
            </div>
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-play-circled" aria-label="Icon play-circled"></em><span>&nbsp;Apply selected</span>
              </button>
            </div>
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-code" aria-label="Icon code"></em><span>&nbsp;Format</span>
              </button>
            </div>
            <div class="jhlite-vertical-space--line">
              <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-download" aria-label="Icon download"></em><span>&nbsp;Download</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </aside>
</div>

.jhipster-modules-patch.jhlite-menu-content-template
  .jhipster-modules-list.jhlite-menu-content-template--content
    .jhipster-modules-filters
      .jhipster-modules-filters--tags
        button.jhipster-tag-filter init
        button.jhipster-tag-filter init
        button.jhipster-tag-filter init
      input.jhipster-modules-filters--filter(placeholder="Filter")
      .jhipster-modules-filters--displayed-modules-count 3 / 5
    .jhipster-modules-list--categories
      div
        div
          h2.jhipster-module-category--name Angular
          .jhipster-module.not-selected.not-applied
            .jhipster-module--content.not-selected.not-applied
              .jhipster-module--tags.not-selected.not-applied
                .jhipster-module--tag angular
                .jhipster-module--tag client
              .jhipster-module--slug.not-selected.not-applied angular-core
              .jhipster-module--description.not-selected.not-applied Add Angular + Angular CLI
                .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
            button.jhipster-module--apply-button
              span
                em.jhlite-icon.jhlite-icon-play(aria-label="Icon play")
  aside.jhlite-menu-content-template--menu
    .jhlite-side-menu
      .jhlite-side-menu--slot.-expand
        .jhipster-module-properties.jhlite-vertical-space.-paragraph
          .jhlite-vertical-space--line
            h2.jhipster-modules-properties-form--properties-title
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-input Project folder
              .jhlite-field--field
                input.jhlite-input-text(type="text")
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label
                  span Base java package -
                  strong packageName
              .jhlite-field--field
                input.jhlite-input-text(type="text")
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label
                  span Base Project full name -
                  strong projectName
              .jhlite-field--field
                input.jhlite-input-text(type="text")
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label
                  span Project short name (only letters and numbers) -
                  strong baseName
              .jhlite-field--field
                input.jhlite-input-text(type="text")
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label
                  span Server port -
                  strong serverPort
              .jhlite-field--field
                input.jhlite-input-text(type="number")
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label
                  span Type of line break (lf or crlf) -
                  strong endOfLine
              .jhlite-field--field
                input.jhlite-input-text(type="text")
              .jhlite-field--optional Optional
          .jhlite-vertical-space--line
            .jhlite-field
              .jhlite-field--label
                label.jhlite-label
                  span Number of spaces in indentation -
                  strong indentSize
              .jhlite-field--field
                input.jhlite-input-text(type="number")
              .jhlite-field--optional Optional
          .jhlite-vertical-space--line
            input#commit-modules(type="checkbox")
            label.jhipster-modules-properties-form--commit-modules-label Commit module application
      .jhlite-side-menu--slot
        .jhipster-side-form--actions
          .jhlite-vertical-space.-paragraph
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-play-circled(aria-label="Icon play-circled")
                span Apply new
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-play-circled(aria-label="Icon play-circled")
                span Apply selected
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-code(aria-label="Icon code")
                span Format
            .jhlite-vertical-space--line
              button.jhlite-button-main.-block
                em.jhlite-icon.jhlite-icon-download(aria-label="Icon download")
                span Download

Module patch loader

<div class="jhipster-module-patch-loader jhlite-modules-loader-content jhlite-menu-content-template">
  <div class="ph-jhlite-modules-container-content jhlite-menu-content-template--content">
    <div class="modules-filter">
      <div class="ph-item">
        <div class="ph-col-12">
          <div class="ph-row">
            <div class="ph-col-12 big"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="modules-list">
      <div class="ph-item">
        <div class="ph-col-12">
          <div class="ph-row">
            <div class="ph-col-2 big"></div>
            <div class="ph-col-10 empty big"></div>
            <div class="ph-col-12 empty"></div>
            <div class="ph-col-12 big"></div>
            <div class="ph-col-12 big"></div>
            <div class="ph-col-12 big"></div>
            <div class="ph-col-12 big"></div>
            <div class="ph-col-12 empty big"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="jhlite-menu-content-template--menu">
      <div class="ph-jhlite-modules-sidemenu">
        <div class="ph-jhlite-modules-sidemenu-top">
          <div class="ph-item">
            <div class="ph-col-12">
              <div class="ph-row">
                <div class="ph-col-12 empty"></div>
                <div class="ph-col-6 big"></div>
                <div class="ph-col-6 empty big"></div>
                <div class="ph-col-12 empty"></div>
              </div>
              <div class="ph-row">
                <div class="ph-col-6"></div>
                <div class="ph-col-6 empty"></div>
                <div class="ph-col-12 big"></div>
                <div class="ph-col-10"></div>
                <div class="ph-col-10 empty"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="ph-jhlite-modules-sidemenu-bottom">
          <div class="ph-item">
            <div class="ph-col-12">
              <div class="ph-row">
                <div class="ph-col-12 big"></div>
                <div class="ph-col-12 big"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.jhipster-module-patch-loader.jhlite-modules-loader-content.jhlite-menu-content-template
  .ph-jhlite-modules-container-content.jhlite-menu-content-template--content
    .modules-filter
      .ph-item
        .ph-col-12
          .ph-row
            .ph-col-12.big
    .modules-list
      .ph-item
        .ph-col-12
          .ph-row
            .ph-col-2.big
            .ph-col-10.empty.big
            .ph-col-12.empty
            .ph-col-12.big
            .ph-col-12.big
            .ph-col-12.big
            .ph-col-12.big
            .ph-col-12.empty.big
    .jhlite-menu-content-template--menu
      .ph-jhlite-modules-sidemenu
        .ph-jhlite-modules-sidemenu-top
          .ph-item
            .ph-col-12
              .ph-row
                .ph-col-12.empty
                .ph-col-6.big
                .ph-col-6.empty.big
                .ph-col-12.empty
              .ph-row
                .ph-col-6
                .ph-col-6.empty
                .ph-col-12.big
                .ph-col-10
                .ph-col-10.empty
        .ph-jhlite-modules-sidemenu-bottom
          .ph-item
            .ph-col-12
              .ph-row
                .ph-col-12.big
                .ph-col-12.big

Module properties

<div class="jhipster-module-properties jhlite-vertical-space -paragraph">
  <div class="jhlite-vertical-space--line">
    <h2 class="jhipster-modules-properties-form--properties-title"></h2>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-input">Project folder</label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="text"/>
      </div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-label"><span>Base java package -&nbsp;</span><strong>packageName</strong></label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="text"/>
      </div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-label"><span>Base Project full name -&nbsp;</span><strong>projectName</strong></label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="text"/>
      </div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-label"><span>Project short name (only letters and numbers) -&nbsp;</span><strong>baseName</strong></label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="text"/>
      </div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-label"><span>Server port -&nbsp;</span><strong>serverPort</strong></label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="number"/>
      </div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-label"><span>Type of line break (lf or crlf) -&nbsp;</span><strong>endOfLine</strong></label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="text"/>
      </div>
      <div class="jhlite-field--optional">Optional</div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <div class="jhlite-field">
      <div class="jhlite-field--label">
        <label class="jhlite-label"><span>Number of spaces in indentation -&nbsp;</span><strong>indentSize</strong></label>
      </div>
      <div class="jhlite-field--field">
        <input class="jhlite-input-text" type="number"/>
      </div>
      <div class="jhlite-field--optional">Optional</div>
    </div>
  </div>
  <div class="jhlite-vertical-space--line">
    <input id="commit-modules" type="checkbox"/>
    <label class="jhipster-modules-properties-form--commit-modules-label">Commit module application</label>
  </div>
</div>

.jhipster-module-properties.jhlite-vertical-space.-paragraph
  .jhlite-vertical-space--line
    h2.jhipster-modules-properties-form--properties-title
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-input Project folder
      .jhlite-field--field
        input.jhlite-input-text(type="text")
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-label
          span Base java package -
          strong packageName
      .jhlite-field--field
        input.jhlite-input-text(type="text")
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-label
          span Base Project full name -
          strong projectName
      .jhlite-field--field
        input.jhlite-input-text(type="text")
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-label
          span Project short name (only letters and numbers) -
          strong baseName
      .jhlite-field--field
        input.jhlite-input-text(type="text")
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-label
          span Server port -
          strong serverPort
      .jhlite-field--field
        input.jhlite-input-text(type="number")
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-label
          span Type of line break (lf or crlf) -
          strong endOfLine
      .jhlite-field--field
        input.jhlite-input-text(type="text")
      .jhlite-field--optional Optional
  .jhlite-vertical-space--line
    .jhlite-field
      .jhlite-field--label
        label.jhlite-label
          span Number of spaces in indentation -
          strong indentSize
      .jhlite-field--field
        input.jhlite-input-text(type="number")
      .jhlite-field--optional Optional
  .jhlite-vertical-space--line
    input#commit-modules(type="checkbox")
    label.jhipster-modules-properties-form--commit-modules-label Commit module application

Project actions

<div class="jhipster-side-form--actions">
  <div class="jhlite-vertical-space -paragraph">
    <div class="jhlite-vertical-space--line">
      <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-play-circled" aria-label="Icon play-circled"></em><span>&nbsp;Apply new</span>
      </button>
    </div>
    <div class="jhlite-vertical-space--line">
      <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-play-circled" aria-label="Icon play-circled"></em><span>&nbsp;Apply selected</span>
      </button>
    </div>
    <div class="jhlite-vertical-space--line">
      <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-code" aria-label="Icon code"></em><span>&nbsp;Format</span>
      </button>
    </div>
    <div class="jhlite-vertical-space--line">
      <button class="jhlite-button-main -block"><em class="jhlite-icon jhlite-icon-download" aria-label="Icon download"></em><span>&nbsp;Download</span>
      </button>
    </div>
  </div>
</div>

.jhipster-side-form--actions
  .jhlite-vertical-space.-paragraph
    .jhlite-vertical-space--line
      button.jhlite-button-main.-block
        em.jhlite-icon.jhlite-icon-play-circled(aria-label="Icon play-circled")
        span Apply new
    .jhlite-vertical-space--line
      button.jhlite-button-main.-block
        em.jhlite-icon.jhlite-icon-play-circled(aria-label="Icon play-circled")
        span Apply selected
    .jhlite-vertical-space--line
      button.jhlite-button-main.-block
        em.jhlite-icon.jhlite-icon-code(aria-label="Icon code")
        span Format
    .jhlite-vertical-space--line
      button.jhlite-button-main.-block
        em.jhlite-icon.jhlite-icon-download(aria-label="Icon download")
        span Download

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

Organisms

Header

Landscape

Landscape loader

Landscape minimap

Landscape preset configuration

Landscape rank module filter

Module parameters

Modules patch

Module patch loader

Module properties

Project actions

Side menu

Vertical space