Components / Data display / Feed list
D11 · Data display
Feed list
Dated notes in order, each with a time and a kind.
<ul class="c-feed">
<li><time>27 Oct 2026</time><time class="num">09:00</time><span>Register opened for the day.</span><span class="sub">Status</span></li>
</ul>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- Notes arrive in time order.
- Each note is one or two lines.
When not to use
- The items are a table of peer records.
- The page is a thread with replies.
Usage
<ul class="c-feed">
<li><time>27 Oct 2026</time><time class="num">09:00</time><span>Register opened for the day.</span><span class="sub">Status</span></li>
</ul>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| time | date and clock | — | When the note was recorded in the example. |
| kind | Status, Rule, Record, Wallet | — | Short group name. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves past the list. |
Accessibility
- Dates and times use time elements.
- Kind is text.
- The list is in the same order as the dates, newest first.
Motion
- No motion.
Pattern origin
Pattern type: a dated feed.