Block
A piece of paper on the page: it groups what belongs together.
On this page
Playground
Weekly backup
Element
Background
<div style="inline-size: min(100%, 26rem)"><div class="feitio-block"><strong>Weekly backup</strong></div></div>When to use
- To set apart a part of the page with a start and an end: a form, a summary, a table with its filter.
When not to use
- For each item of a list: use TaskList or Table. Repeated identical blocks become the generic grid of cards.
- For what floats (menu, window): that is lifted paper.
- One inside another: it muddles the hierarchy.
Examples
Reminders
Water the plants, Tuesday at 9. Report, on the 1st.
A block
Raised surface, uneven corners and padding from the scale. No border and no shadow: it sits on the page, it does not float.
Show code
<section class="feitio-block" aria-labelledby="lembretes">
<h3 id="lembretes">Lembretes</h3>
…
</section>Do and don’t
Do
SchedulesWeekly backup, water the plants, monthly report.
One block with a list inside.
Don’t
Weekly backup
Water the plants
Monthly report
A block per item becomes a pile of identical cards, with no hierarchy.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-block" | required | Raised surface, uneven corners, padding from the scale. |
aria-labelledby | the heading’s id | On a <section>, names the region. |