Skip to main content

Catalog · @luz-ds/catalog

Catalog

The pieces that are not core's, one stylesheet each: the navigation of the site, the tags with a script or an identity of their own, such as search and cookie consent, and the patterns of a landing page, a blog, an app and a documentation site, grouped by what they do.

A site links only the files it uses, after core's. Each page says which kind of site its piece fits best; any site means it has no kind of its own.

The tags are <luz-search>, <luz-cookie-consent>, <luz-theme-time>, <luz-lang-switch>, <luz-submenu>, <luz-announcement>, <luz-faq>, <luz-timeline>, <luz-embed> and <luz-chart>: each works on its own, in any header or page. The navbar, the sidebar and the terminal are classes, with no tag of their own. The patterns are classes: the page structure of a landing page, a blog, an app or a documentation site, composed in the markup from core's objects.

Everything else is a component of core, one reusable piece that fits inside anything; components are in Core.

Use the catalog when

  • You want a site search, a cookie banner or a language switch without writing them yourself.
  • Your header has a few links grouped under one button.
  • You need a short announcement above the header on every page.

Use core alone when

  • You only need components such as buttons, forms and cards.
  • Your site has no search, no optional cookies and one language.
  • You build a single widget, not a whole page.

Your own components on top

Style what you add with semantic tokens too, so it follows the color mode and any theme of your own.

.my-panel {
  background: var(--luz-surface);
  border: 1px solid var(--luz-divider);
  color: var(--luz-text-primary);
}

.my-panel:hover {
  background: var(--luz-surface-muted);
  border-color: var(--luz-outline);
}

/* Not a primitive colour: it would stay the same in dark mode */
/* color: var(--luz-gray-100); */

Navigation

  • App header

    The quiet bar at the top of an application's main area: the menu button, the product name on a phone, the search and the account.

    Fits best: app — the top of an application's main area, beside the sidebar

  • Site header

    Starts every page of a site with its name, its main links and a few controls, in one row that stays at the top.

    Fits best: landing, blog — the top of every page of a landing site, a blog or a newspaper

  • Masthead

    Starts the front page and the sections of a newspaper with the date, a search, the publication's name in large type and its sections, in three rows that scroll away with the page.

    Fits best: blog — the front page and the sections of a newspaper, where the name and the date set the tone

  • Language switch

    Lets readers go to the same page in another language, from a button in the header.

    Fits best: any site — when the site comes in more than one language

  • Navbar

    Puts the main links of a site in a header's row, and in a panel under it on a narrow screen.

    Fits best: any site — the bar of a site's main sections, at the top of the page

  • Sidebar

    Holds the main navigation of a site or an app, and becomes a drawer on small screens.

    Fits best: docs, app — the navigation of a site with many pages or sections, beside the content, with a drawer on a phone

  • Submenu

    Groups a few links of a header under one button, so the header keeps a short row of links.

    Fits best: any site — when a header has more links than fit in one row

Page structure

  • Article header

    Opens a story with its section, its title, a standfirst, who wrote it and when, and an optional lead picture.

    Fits best: blog — the top of an article, under the site header

  • Blog page header

    Gives a page that is not an article, such as About or Contact, its title and one sentence about what it is for.

    Fits best: blog — a page that is not an article, such as About or Contact

  • Hero

    Opens a home or landing page with its title, one sentence, the main actions and an optional picture.

    Fits best: landing — the top of a landing page, under the header

  • Site footer

    Ends every page of a site with who made it, its licence and a few secondary links, under a rule, in a row or as columns.

    Fits best: landing, blog — the bottom of every page of a landing site, a blog or a newspaper

  • Main and sections

    Gives a landing page its rhythm: wide room between the blocks of the main, a closer one inside each section, with its head, and an optional glow behind the page.

    Fits best: landing — the body of a landing page, between the header and the footer

Content

  • FAQ

    Lists the questions visitors ask with their answers, in groups, as native disclosures that work without a script.

    Fits best: any site — a list of questions with their answers, on a help page, a landing page or the foot of a product page

  • Stat

    Shows one figure big, with a short label under it.

    Fits best: landing — a row of figures on a landing page

  • Table of contents

    Lists the sections of a long article, beside the text when there is room and above it when there is not.

    Fits best: blog — a long article, beside the text or above it

  • Terminal

    Shows a command in a framed block, with tabs as its title bar and a copy button for the open one.

    Fits best: docs — commands the reader can copy, in a guide or in a documentation site

  • Timeline

    Shows dated events in order, one card at a time on a rail of dates or all at once down a line; without JavaScript it is a list.

    Fits best: blog, landing — events or steps in order of time, such as a history or a roadmap

  • Post list

    Lays out a list of posts as a grid, with the latest one larger, or as a compact list of rows. Each post is a card.

    Fits best: blog — a page that lists posts: the home, a category, an archive, search results

  • Embed

    A poster and a play button in place of a player from another site, which loads only when the visitor asks, after consent.

    Fits best: any site — a page that shows a video or a map from another site

  • Social links

    Links to a site's profiles and feeds, each an icon and a name.

    Fits best: any site — the foot of a site, an author's page or a contact page

Charts

  • Dashboard

    The view of an application at a glance: its title and main action, then a grid of panels that fills the room the view has.

    Fits best: app — the first view of an application

  • Chart

    Draws a line, an area or a small trend line from a table or a list of numbers you already wrote, which stays in the page beside it.

    Fits best: any site — a page that shows a trend: a report, a dashboard, a post with a few figures

  • Bar list

    Compares a few values as a list of names, figures and bars, with the native meter element.

    Fits best: app — a report or an overview that compares a few sizes, counts or shares

  • Column chart

    Compares a few values as columns of one height scale, drawn from a native table that keeps every figure as text.

    Fits best: app — a report that compares a few values with an order, such as days or months

  • Stacked bar

    Shows the shares of a whole in one bar, with a legend that says each name and figure in text.

    Fits best: app — a page that shows how a whole is split: statuses, sources, a budget

  • Heat map

    Shows how much in each cell of a grid by colour and by figure, from a native table; a calendar is one.

    Fits best: app — a page that shows where a grid is high or low: a week by hours, a month of days

  • Ring

    Shows one value over a goal, or the shares of a total, as half a ring over the figure that says it.

    Fits best: app — a panel that shows progress to a goal or how one total is split

Site-wide

  • Color mode by time of day

    Adds the time of day to the color mode: a reader picks a moment you declare, or drags a slider through the hours, and Auto stays the system's.

    Fits best: any site — a site with a color mode control that wants a look for each part of the day

  • Announcement

    Tells every visitor one short thing at the top of the page, such as a sale, an event or planned maintenance.

    Fits best: any site — a short notice for every visitor, such as a sale or planned maintenance

  • Cookie consent

    Asks a visitor once whether the site may use optional cookies, with Accept and Reject side by side, and remembers the answer.

    Fits best: any site — when the site uses optional cookies

  • Search

    Finds a page, a section or an HTML element of a site by name, from a button in the header.

    Fits best: any site — when the site has more pages than a reader can scan

  • Page transition

    One page fades into the next when a visitor follows a link, in browsers that support it, with nothing to write but a link to one stylesheet.

    Fits best: any site — a site where visitors move from page to page and you want the change to feel softer

Documentation

  • Do and don't

    A Do and a Don't, one example to follow and one to avoid, each with its reason, side by side when there is room.

    Fits best: docs — a page that teaches by showing what to do and what to avoid

  • Example

    A live preview with its code under it, in one frame, as wide as the width you give it.

    Fits best: docs — a page that shows a live example with its code

  • Page foot

    The small print under a page: when it was last updated, and links to edit it or report a problem.

    Fits best: docs — the bottom of a documentation page

  • Page head

    The top of a documentation page: the eyebrow, the title, one sentence and the chips that say what the page covers.

    Fits best: docs — the top of a documentation page

  • Pager

    Two link blocks at the end of a page, to the previous page and to the next, each with the title it leads to.

    Fits best: any site — the end of a page that belongs to a sequence

  • Rail

    The list of the sections of the page that stays in view beside the content, with the actions of the page under it.

    Fits best: docs — the side of a long documentation page

  • Shell

    The page of a documentation site in three columns: the sidebar, the content and a rail, down to one column on a phone.

    Fits best: docs — the layout of every page of a documentation site

Reference

  • Class reference Every tag and class of the catalog, from search and cookie consent to the patterns of a kind of site, what element it goes on and what it does, in one place.

Last updated · Edit this page · Report a problem