Tata Letak Dokumen

Tata letak dokumen adalah pola dua kolom untuk halaman dokumentasi — deskripsi di kiri, kode di kanan — yang menyusut menjadi satu kolom di perangkat mobile.

Struktur

Gunakan .doc sebagai pembungkus luar dan .doc-section untuk setiap baris. Setiap bagian memiliki kolom .doc-section--description dan .doc-section--code.

Bagian Dasar

Sebuah bagian yang khas menggabungkan blok deskripsi dengan cuplikan kode.

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

Dengan blok kode

Gunakan bagian code-block di dalam .doc-section--code untuk contoh dengan penyorotan sintaks.

Konten demo

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