For personal pages and small projects.
Cards
Every article is a card. A container holding only articles lays them out as a grid of
equal-height cards.
For groups that need shared settings, more storage, and a longer description than the others.
For organizations with custom needs.
Changelog
A card without bands
An article with no header or footer is a plain padded card.
Accessibility
An article is a self-contained piece of content. For a long-form page, a lone article in
main stays plain text instead of a card.
Customize
Cards use the overlay surface and 1.5 times --m-radius.
Tables
Tables get row rules, a sticky header row, and tabular numbers.
| Property | Default | Unit |
|---|---|---|
--m-density |
1 | number |
--m-radius |
0.5 | rem |
--m-measure |
100 | ch |
Accessibility
Give header cells a scope, and the table a caption.
Customize
--m-density sets the cell padding.
Media
Images and video scale down to the column and keep their aspect ratio.
Accessibility
Describe images with alt. Set width and height to avoid layout shift.
Customize
Images keep the page's corner radius.
Details
A details element opens and closes smoothly where the browser supports it.
What is a classless framework?
It styles plain HTML elements directly, so you write semantic markup without adding classes.
Does it support dark mode?
Yes. It follows the system setting, and data-theme overrides it for the page or any section.
Accessibility
The summary is a button to screen readers, and opening happens instantly when motion is reduced.
Customize
The open animation follows the motion tokens.