# 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.

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](https://nandovejer.github.io/luz/docs/kinds/landing/), a [blog](https://nandovejer.github.io/luz/docs/kinds/blog/), an [app](https://nandovejer.github.io/luz/docs/kinds/app/) or a [documentation site](https://nandovejer.github.io/luz/docs/kinds/docs/), 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](https://nandovejer.github.io/luz/docs/components/).

- Each tag is the block, and its parts are `.luz-<tag>__<part>`; every rule uses semantic tokens only.
- [The LUZ home page](https://nandovejer.github.io/luz/) and these docs are built with them.
- Not sure which package a piece belongs to? [What each package needs](https://nandovejer.github.io/luz/docs/get-started/structure/#needs) lists every piece, with the package it is in.

### 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](https://nandovejer.github.io/luz/docs/tokens/themes/).

Semantic tokens in an app-level component
```css
.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); */
```