Kitchen sink

Every example from the component pages on one page, with no demo controls.

Typography

Text

Body text includes strong text, emphasis, small print, highlighted text, an abbreviation like CSS, and notation such as E = mc2 and H2O without stretching the line.

Edits show as removed text and inserted text. Figures in and 1,180 items use tabular numbers, so digits line up.

Headings

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six

A much longer heading that wraps onto a second line to show balanced wrapping

A linked heading keeps the heading color

Heading groups

Eyebrow

A heading group

A muted subtitle that sits right under its heading.

Lists

  • Unordered list item
  • Item with a nested list
    • Nested item one
    • Nested item two
  • Last unordered item
  1. First step
  2. Second step
  3. Third step
Density
Scales every spacing token.
Primary
The single accent color every interactive state derives from.
  • Menu item
  • Another item
  • Third item
    •

    Quotes

    Simplicity is prerequisite for reliability.

    — Edsger W. Dijkstra

    “A quote that opens with punctuation lets the mark hang outside the text edge where supported.”

    A footer inside the quote

    An inline quote reads like this short quoted phrase within a sentence.

    Code

    Inline code, keyboard input like Ctrl + C, sample output Build succeeded, and a variable x. 

    :root {
  --m-primary: oklch(55% 0.19 40);
  --m-density: 1;
}

    Links and buttons

    Buttons

    Groups and toggles

    Forms

    Text fields

    Select

    Validation

    Float labels

    Checkboxes and radios

    Notifications
    Frequency
    How often we email a summary.

    Switches

    Range, color, and file

    Field groups

    https:// USD

    Fieldsets

    Billing

    Content

    Cards

    Starter

    For personal pages and small projects.

    Team

    For groups that need shared settings, more storage, and a longer description than the others.

    Enterprise

    For organizations with custom needs.

    Changelog

    A card without bands

    An article with no header or footer is a plain padded card.

    Tables

    Public custom properties
    Property Default Unit
    --m-density 1 number
    --m-radius 0.5 rem
    --m-measure 100 ch

    Media

    Illustrated mountains under a pale blue sky
    An image scales down to the column and keeps its aspect ratio.

    Details

    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.

    Navigation

    Split bar

    Callouts and contact details

    m.css
    hello@example.com

    Overlays

    Dialog

    Dialog title

    A modal dialog on the overlay surface with a blurred backdrop.

    Popover

    A popover opened with popovertarget, no JavaScript needed.

    Feedback

    Progress

    Meter

    Busy

    Fetching the latest results

    Monthly report

    Revenue, signups, and churn for the last 30 days.