Layout do documento

O layout do documento é um padrão de duas colunas para páginas de documentação — descrição à esquerda, código à direita — que se colapsa em uma única coluna em dispositivos móveis.

Estrutura

Use .doc como o wrapper externo e .doc-section para cada linha. Cada seção tem uma coluna .doc-section--description e uma coluna .doc-section--code.

Seção básica

Uma seção típica combina um bloco de descrição com um trecho de código.

Conteúdo de demonstração

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

Com um bloco de código

Use a parte code-block dentro de .doc-section--code para exemplos com destaque de sintaxe.

Conteúdo de demonstração

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