Doc layout

The doc layout is a two-column pattern for documentation pages — description on the left, code on the right — that collapses to a single column on mobile.

Structure

Use .doc as the outer wrapper and .doc-section for each row. Each section has a .doc-section--description and a .doc-section--code column.

Basic section

A typical section pairs a description block with a code snippet.

Demo content

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

With a code block

Use the code-block partial inside .doc-section--code for syntax-highlighted examples.

Demo content

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