Layout del documento

Il layout del documento è un modello a due colonne per le pagine di documentazione — descrizione a sinistra, codice a destra — che si riduce a una sola colonna su mobile.

Struttura

Usa .doc come wrapper esterno e .doc-section per ogni riga. Ogni sezione ha una colonna .doc-section--description e una colonna .doc-section--code.

Sezione base

Una sezione tipica abbina un blocco di descrizione a un frammento di codice.

Contenuto demo

<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>

Con un blocco di codice

Usa il parziale code-block all'interno di .doc-section--code per esempi con evidenziazione della sintassi.

Contenuto demo

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