Lists & data / Scannable lists
Listing
Keep short and long entries in the same rhythm so the right item is easy to find.
Basic usage
HTML
<ul class="rows">
<li class="row">
<a class="row-main" href="../code/">
<span class="chip tone-blue">SELECT</span>
<span class="row-body">SELECT id, title FROM posts WHERE status = 'published'</span>
</a>
<p class="row-meta">src/PostRepository.php:42 <span>2 columns</span></p>
</li>
<li class="row">
<a class="row-main" href="../code/">
<span class="chip tone-violet">INSERT</span>
<span class="row-body">INSERT INTO events (name) VALUES (:name)</span>
</a>
<p class="row-meta">src/EventRepository.php:18 <span>1 parameter</span></p>
</li>
</ul>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.rows / .row | The list and each entry. |
.row-main / .row-body / .row-meta | The link, a preview of up to three lines, and source metadata. |
.peek / .peek-figures | A short list of names and figures, useful inside a card. |
data-dd-defer | Optionally defer rendering in very long, uniform lists. |
Usage notes
A preview is limited to three lines. Link to the complete content. Printed rows expand to their full text.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.