Diseño del documento

El diseño del documento es un patrón de dos columnas para páginas de documentación: descripción a la izquierda, código a la derecha, que se colapsa a una sola columna en dispositivos móviles.

Estructura

Usa .doc como el contenedor exterior y .doc-section para cada fila. Cada sección tiene una columna .doc-section--description y una columna .doc-section--code.

Sección básica

Una sección típica empareja un bloque de descripción con un fragmento de código.

Contenido de demostración

<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 bloque de código

Usa el fragmento de código dentro de .doc-section--code para ejemplos con resaltado de sintaxis.

Contenido de demostración

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