Mise en page documentaire

La mise en page du doc est un modèle à deux colonnes pour les pages de documentation — description à gauche, code à droite — qui se réduit à une seule colonne sur mobile.

Structure

Utilisez .doc comme conteneur extérieur et .doc-section pour chaque ligne. Chaque section a une colonne .doc-section--description et une colonne .doc-section--code.

Section de base

Une section typique associe un bloc de description à un extrait de code.

Contenu de démonstration

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

Avec un bloc de code

Utilisez le partiel code-block à l'intérieur de .doc-section--code pour des exemples avec mise en surbrillance de la syntaxe.

Contenu de démonstration

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