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.

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

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

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

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

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 tag is a prop rather than a fixed element, so the same component can sit at whatever level the surrounding document has reached.

`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 default tag. A heading that looks like one but must not enter the document outline -- the label of a list, say -- is a span.

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.

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. The table is given a bounded height and a scrollbar of its own -- a sticky header sticks to its scroll container, and a container with no height never scrolls, so the header would otherwise leave with the page. Scroll the table, not the page, to see it hold.

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.