HTML elements

Which elements have a style with no class

Write the HTML and LUZ styles it, with no class on it. Structure is the exception: the layout of a page is yours.

The one element left, track, is styled by the video player and needs its class.

The HTML says the variant

A class is not needed to tell one look from another when the HTML already says it:

• A button with no type, or with type="submit", is the primary action. type="button" and type="reset" are the secondary one.
• aria-invalid="true" marks a field with an error.
• disabled marks a control that cannot be used.
• aria-current="page" marks the link of the page you are on.

A class adds what HTML cannot say: a link that looks like a button, the danger and ghost roles, the sizes, and the parts that need markup of their own. The card of each element says what its class adds. An element with a luz-* class takes the look of its component.

All elements, A to Z

Every element, its category and how LUZ styles it. Select a name to open its card.

Deprecated elements, and what to use

The 23 elements below are left out of the reference on purpose: they are obsolete or removed, and LUZ styles none of them. Use the replacement.

Changing the default styles

Every rule that styles a bare element has zero specificity, so yours wins without a fight.

• Change the tokens. This is the way to change the look of the whole site: colors, type, space and radius. Copy themes/_template.css and change the values. Make it yours shows how.
• Write your own CSS. CSS with no layer beats every layer of LUZ. You need no !important and no longer selector. What you leave alone stays: if you change only the color of an h1, it keeps the size LUZ gives it.
• Use LUZ in one region of a page that already has a design. Load luz.conditional.css instead of luz.css, and put data-luz on the element that holds the region. The reset and the bare elements apply only inside it. Which level do I need? says when to choose it.

/* Your CSS has no layer, so it beats every layer of LUZ. */
h1 {
  font-weight: 600;
}

button {
  border-radius: 0;
}

The tokens, your CSS and the region work together: the tokens change what LUZ draws, your CSS has the last word, and the region limits where LUZ draws at all.