Layouts / Catalog layout
Document
A compact document layout for finding one item among hundreds.
Basic usage
Layout reference
Choose by reading task.
.doc- Find and compare entries.
.sheet- Follow a point and its evidence.
HTML
<div class="doc doc-inset">
<div class="main">
<div class="content">
<h2>Layout reference</h2>
<p class="lede">Choose by reading task.</p>
<dl class="definitions">
<div><dt><code>.doc</code></dt><dd>Find and compare entries.</dd></div>
<div><dt><code>.sheet</code></dt><dd>Follow a point and its evidence.</dd></div>
</dl>
</div>
</div>
</div>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.doc | The catalog frame and its type scale. Wrap the document in this class. |
.main / .content | The main column and its responsive content container. |
.doc-inset | An embedded frame without the viewport-height minimum. |
.doc-quiet | A quieter sidebar surface that gives live previews greater prominence. |
.lede / .page-counts | A sentence explaining the page, followed by labeled counts. |
Usage notes
Use h1 for a standalone page title. This embedded example uses h2 to fit the surrounding document. A sidebar is optional.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.