Dokumentlayout

Das Dokumentlayout ist ein zweispaltiges Muster für Dokumentationsseiten – Beschreibung auf der linken Seite, Code auf der rechten Seite – das auf Mobilgeräten zu einer einzelnen Spalte zusammenklappt.

Struktur

Verwende .doc als äußeren Wrapper und .doc-section für jede Zeile. Jede Sektion hat eine .doc-section--description und eine .doc-section--code Spalte.

Basis-Sektion

Eine typische Sektion kombiniert einen Beschreibungsblock mit einem Code-Snippet.

Demo-Inhalt

<div class="doc">
  <div class="doc-section">
    <div class="doc-section--description">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <div class="doc-section--code">
      <!-- code snippet -->
    </div>
  </div>
</div>

Mit einem Codeblock

Verwende den Code-Block-Teil innerhalb von .doc-section--code für syntaxhervorgehobene Beispiele.

Demo-Inhalt

{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}