A site with no logo uploaded. Each of the three parts is printed only when it has a value, so this is the case where the name has to carry the navbar on its own.

The name and the slogan turned off in the site branding block, which is what a site whose logo carries the name does.

A label long enough to wrap, to check padding and line height.

Fills the width of its container.

Without a URL the component renders a rather than a link.

Card as used in the Bikes grid view (retrograde site, /bikes).

Card carrying only content, with no image, title or caption.

The first three rows of the Bikes grid view (retrograde site, /bikes).

Content-only cards, to show the grid without images.

Gold drop, top hat, shades. Both accessories at their defaults, through the `hat` and `glasses` props -- which is all it takes when the default placement and palette are what you want.

A crown and heart glasses, with the hearts tinted rather than left open.

Synthwave, a wizard hat pulled down over the drop's eyes, and a monocle under it. `y` and `scale` on the hat are a transform about the middle of its band, so the hat grows and drops without its drawing changing.

Pixel glasses and a santa hat, both nudged with the placement props: the glasses sit low and the hat is pushed off to one side.

A bobble hat and round glasses over the night sky. The hat is recolored through the `accessories` slot rather than the `hat` prop, which is the one way to reach an accessory's own props.

Party hat and star glasses over the prism style.

Star frames with a translucent lens. `lens` is the fill of the same path the frame strokes, so a color with alpha tints the logo's eyes instead of hiding them -- and `weight` thickens the frame without redrawing anything.

The glasses on their own, in the box they are drawn for -- the same shape and viewBox as the logo, with the lenses over where its eyes are. To see them worn, use `mantra_starter:drupal_logo`'s `glasses` prop or its `accessories` slot.

A party hat in colors of its own. Each prop writes one CSS variable onto the group that carries the drawing, so a variable set further out -- a UI Skins theme, a page, a parent component -- still wins where a prop is left out.

The hat on its own, in the box it is drawn for -- the same shape and viewBox as the logo, so the hat sits where it would sit on the drop's head. To see it worn, use `mantra_starter:drupal_logo`'s `hat` prop or its `accessories` slot.

A label and a body, which is the shape every field render array arrives in.

Three thumbnails. The row height comes from `field_thumbnail_height` on the paragraph the gallery is built from; there is no paragraph here, so the template falls back to its 12rem default.

The default tag. A heading that looks like one but must not enter the document outline -- the label of a list, say -- is a span.

`heading_classes` is added to the element's attributes, so a caller can size a heading without the component knowing anything about the scale.

The tag is a prop rather than a fixed element, so the same component can sit at whatever level the surrounding document has reached.

A background image with the content set over it. `title` and `url` are declared on the component but the template does not print them -- the heading and the link belong to whatever is placed in the content slot.

No background image. The background element is still emitted, so this is the case to check that an empty one collapses rather than leaving a band of whitespace above the content.

Four pages, sitting on the first. Previous and first are dropped, and so is the leading ellipsis -- the template hides first while the numbers already start at 1, so this is the case where the row must not open with a gap.

Page 3 of 8, which is the only state that puts every item on the page at once: first and previous on the left, last and next on the right, an ellipsis either side of the numbers, and the current page marked. `current` and `ellipses` are set by template_preprocess_pager() rather than declared on the component, and they are what decides which of those items appear.

An internal label linked to the node it names, and the resource it points at printed as its own URL.

The same reference with `published` false. The template does not act on the prop today; this is the story to check against once it does.

An image in the frame the theme puts around a screenshot. A real screenshot is used rather than a photograph, because the frame is what the component contributes and a photograph hides where it ends.

The form the site search block renders as. `key` is the query parameter the input is submitted under, so it has to match what the target route reads.

Three slides, the pagination, the two arrows and the scrollbar. The markup is what Swiper is initialised against; without its JavaScript running the slides simply stack, which is the state to check the unenhanced page in.

One slide on its own. The slide is a 16:9 box and the image is contained inside it, so a picture of any shape keeps every slide the same height.

Core's responsive table option, declared per column. The last three columns are marked `low` and the summary `medium`, so a narrow window shows the component and its machine name alone, a medium one adds the summary, and only a wide one shows the lot. Narrow the window to see it: the columns leave the table rather than being scrolled to, and core adds a "Show all columns" toggle above the table to get them back. The toggle is stuck to the left edge of the scroll container, so it stays put when a wide table is scrolled sideways.

No rows. The header is still printed, and `empty` fills a single cell spanning every column -- so a filter that matches nothing keeps the columns it was filtering rather than collapsing the table to one narrow cell.

The same table with `sticky` on. Scroll the *page*: the table keeps its full height and no scrollbar of its own, and the header is carried down the table by a script until the last row, where it stops. Scroll the table sideways while it is holding and the header goes with its own columns, which is the half a viewport-fixed header gets wrong.

Every role at once: a shrink-wrapped check box column, a growing title, a prose column sized at 24 characters, a column that is empty in every row, and shrink-wrapped operations.