Layouts

<div class="lg-window mini-explorer lg-window--flat" role="group" aria-labelledby="ex-t">
  <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg><span class="lg-window__text" id="ex-t">Dokumente</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
  <div class="lg-toolbar">
    <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-home"/></svg>Start</button>
    <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-search"/></svg>Suchen</button>
    <span class="lg-sep" aria-hidden="true"></span>
    <button type="button" class="lg-btn lg-btn--tool"><svg class="lg-icon" aria-hidden="true"><use href="#i-printer"/></svg>Drucken</button>
  </div>
  <div class="mini-explorer__cols">
    <div>
      <details class="lg-pane__group" open>
        <summary>Dateiaufgaben</summary>
        <div class="lg-pane__body"><ul>
          <li><a href="#rahmen"><svg class="lg-icon" aria-hidden="true"><use href="#i-folder"/></svg>Neuer Ordner</a></li>
          <li><a href="#rahmen"><svg class="lg-icon" aria-hidden="true"><use href="#i-download"/></svg>Herunterladen</a></li>
        </ul></div>
      </details>
      <details class="lg-pane__group">
        <summary>Andere Orte</summary>
        <div class="lg-pane__body"><ul><li><a href="#rahmen">Arbeitsplatz</a></li></ul></div>
      </details>
    </div>
    <div>
      <div class="panel-grid">
        <a class="lg-tile" href="#rahmen"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-folder"/></svg>Archiv</a>
        <a class="lg-tile" href="#rahmen"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-doc"/></svg>bericht.doc</a>
        <a class="lg-tile" href="#rahmen"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-doc"/></svg>notizen.txt</a>
      </div>
    </div>
  </div>
  <ul class="lg-statusbar"><li>3 Objekte</li><li>Arbeitsplatz</li></ul>
</div>

<div class="lg-window lg-window--flat" role="group" aria-labelledby="wz-t" data-lg-wizard>
  <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-gear"/></svg><span class="lg-window__text" id="wz-t">Einrichtungs-Assistent</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
  <div class="lg-wizard">
    <div class="lg-wizard__side">
      <img src="assets/brand/trfx-legacy-icon.svg" width="48" height="48" alt="">
      <ol>
        <li data-mark>Willkommen</li>
        <li data-mark>Design wählen</li>
        <li data-mark>Fertig</li>
      </ol>
    </div>
    <div class="lg-wizard__main">
      <section data-step>
        <h3>Willkommen</h3>
        <p>Dieser Assistent richtet TRFX Legacy für Ihr Projekt ein. Er braucht ungefähr eine halbe Minute und ändert nichts an Ihrem Computer.</p>
        <p>Klicken Sie auf „Weiter“, um fortzufahren.</p>
      </section>
      <section data-step>
        <h3>Design wählen</h3>
        <fieldset class="lg-group">
          <legend>Farbschema</legend>
          <label class="lg-check"><input type="radio" name="wz-design" checked><span>Luna Blau (empfohlen)</span></label>
          <label class="lg-check"><input type="radio" name="wz-design"><span>Klassisch</span></label>
          <label class="lg-check"><input type="radio" name="wz-design"><span>Hoher Kontrast</span></label>
        </fieldset>
      </section>
      <section data-step>
        <h3>Fertig</h3>
        <p>Die Einrichtung ist abgeschlossen. Mehr war es nicht.</p>
        <label class="lg-check"><input type="checkbox" checked><span>Dokumentation öffnen</span></label>
      </section>
    </div>
  </div>
  <div class="lg-wizard__bar">
    <button type="button" class="lg-btn" data-lg-back>&lt; Zurück</button>
    <button type="button" class="lg-btn is-default" data-lg-next>Weiter &gt;</button>
    <button type="button" class="lg-btn" data-lg-cancel>Abbrechen</button>
  </div>
</div>

<div class="lg-window lg-window--flat login-demo" role="group" aria-labelledby="login-t">
  <div class="lg-window__title"><svg class="lg-icon" aria-hidden="true"><use href="#i-lock"/></svg><span class="lg-window__text" id="login-t">Bei TRFX anmelden</span><span class="lg-window__ctl" aria-hidden="true"><span></span><span></span><span></span></span></div>
  <form class="lg-window__body" action="#anmeldung" data-lg-noop>
    <div class="lg-msg">
      <svg class="lg-icon lg-icon--xl lg-msg__icon" aria-hidden="true"><use href="#i-key"/></svg>
      <div class="lg-msg__text">
        <p>Melden Sie sich mit Ihrem Konto an.</p>
        <div class="lg-field"><label for="lg-u">Benutzername</label><input class="lg-input" id="lg-u" type="text" autocomplete="off"></div>
        <div class="lg-field"><label for="lg-p">Kennwort</label><input class="lg-input" id="lg-p" type="password" autocomplete="off"></div>
        <label class="lg-check"><input type="checkbox"><span>Kennwort speichern</span></label>
        <div class="lg-actions"><button type="submit" class="lg-btn is-default">OK</button><button type="reset" class="lg-btn">Abbrechen</button></div>
      </div>
    </div>
  </form>
</div>

<div class="panel-grid">
  <a class="lg-tile" href="farben.html"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-palette"/></svg>Farben</a>
  <a class="lg-tile" href="typografie.html"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-type"/></svg>Schriften</a>
  <a class="lg-tile" href="komponenten.html"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-box"/></svg>Komponenten</a>
  <a class="lg-tile" href="marke.html"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-mark"/></svg>Marke</a>
  <a class="lg-tile" href="einbindung.html"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-download"/></svg>Einbindung</a>
  <a class="lg-tile" href="grundlagen.html"><svg class="lg-icon lg-icon--xl" aria-hidden="true"><use href="#i-book"/></svg>Hilfe</a>
</div>