HTML elements
Tell browsers, search engines and scripts about the page. Readers never see these elements, so the cards show the markup only.
Changes the starting point of every relative URL on the page, and can set a default target for links. Use at most one, and place it before any tag that has a URL.
Markup only: this element is not rendered.
<base href="https://example.com/app/" target="_blank">LUZ adds no style: the browser look is kept. It also rewrites hash-only links such as href="#top", so use it with care.
The part of the page the visitor never sees: the title, the character set, stylesheets, scripts and other settings for the browser.
Markup only: this element is not rendered.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My page</title>
</head>LUZ adds no style: the browser look is kept.
Points the browser to a file the page needs, most often a stylesheet, but also icons and preloads. Load tokens first, then core, then catalog.
Markup only: this element is not rendered.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">LUZ adds no style: the browser look is kept.
Settings and facts for browsers and search engines that have no tag of their own: character set, viewport, description, color scheme.
Markup only: this element is not rendered.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A vanilla design system in plain CSS.">LUZ adds no style: the browser look is kept.
CSS written straight into the page. Prefer a linked stylesheet, and keep this for a few lines of critical or generated CSS.
Markup only: this element is not rendered.
<style>
.banner { padding: var(--luz-space-md); }
</style>LUZ adds no style: the browser look is kept.
The name of the page. Browsers show it in the tab, bookmarks and search results use it, and screen readers announce it first.
Markup only: this element is not rendered.
<title>HTML elements: LUZ Design System</title>LUZ adds no style: the browser look is kept.