Components · Links

Tile link

A tile link is a clickable, graphical link with an SVG graphic or an icon with a label. It highlights navigation destinations in grids and horizontal scrollers.

How to add a tile link to a page. The file is components/css/tile-link.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules into a page.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/tile-link.css">`. The page needs the Material Symbols Outlined font.
2. Markup	An `<a href>` with `tile-link`, a size, a placement and a background, around a `div.tile-link__inner`.
3. Content	An icon and a label, a label alone, or a logo `img` with an `alt` (brand).
4. Group	Use one size and one background for tiles in a group.

Tile link

Copy the markup you need. Hover comes from :hover; the [data-state] selectors in the CSS exist only so the documentation can force a state.

API

Classes

Class	Use
`tile-link`	The link.
`tile-link--large`, `--small`	Size.
`tile-link--vertical`, `--horizontal`	Placement of the icon.
`tile-link--white`, `--grey`, `--black`	Background.
`tile-link--brand`	A logo tile. Large only.
`tile-link--weight-medium`, `--bold`, `--italic`	Label weight and style.
`tile-link__inner`, `__icon`, `__label`	Parts.

Things to know

Breakpoint: the padding, the gap and the brand height change at 769px. The CSS does this by itself.
White is the default background when no color class is given; add one anyway for clarity.
The border is its own layer: do not add a border to the container.
The focus ring needs body.keyboard-nav, which the templates set on the first Tab press.
The [data-state] selectors do nothing outside the documentation pages.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/tile-link.css)