Layer

Stacks its children in one box, later ones on top, with the box as tall as the tallest of them.

Example

View Code

<figure class="layer">
    <img src="harbour.jpg" alt="Boats in a harbour at dawn">
    <figcaption data-align-self="end">Dawn at the harbour</figcaption>
</figure>

When to use it

A caption over a picture, a badge in the corner of a thumbnail, a heading over a hero image, a loading message over a form. Anything that sits on top of something else and should still take part in the layout: the box is as tall as its tallest child, so nothing overlaps its neighbours.

How it works

Every child is placed in the same grid cell, in source order, so later children paint over earlier ones. data-align on the layer sets where every child sits vertically when it is shorter than the box; by default they stretch to fill it. To place one child on its own, put data-align-self and data-justify-self on that child: a badge in the top-right corner is data-align-self="start" data-justify-self="end". Compare overlay, which takes one marked child out of the flow and centers it over the rest.

<div class="layer">
    <img src="thumb.jpg" alt="">
    <span data-align-self="start" data-justify-self="end">New</span>
</div>

Why this name

Layers is what every design tool calls things stacked in one frame. Foundation 6 readers did this with a positioned wrapper and an absolutely positioned child, which is what overlay still does when you need it.

Attributes

Attribute	Type	Values	Default	Description
`data-align`	enum	`start`, `center`, `end`, `stretch`, `baseline`	`stretch`	Vertical alignment of every child in the box. baseline behaves as start here.

Markers

Attributes that descendants carry, not the root.

Attribute	Type	Values	On	Description
`data-align-self`	enum	`start`, `center`, `end`, `stretch`, `baseline`	`> *`	Where the child sits vertically: start, center, end, stretch, or baseline.
`data-justify-self`	enum	`start`, `center`, `end`, `stretch`	`> *`	Where the child sits horizontally: start, center, end, or stretch.

Children

> *: at least 2. The layers, bottom first.
> [data-align-self]: any number. A child that places itself vertically: start, center, end, stretch, or baseline.
> [data-justify-self]: any number. A child that places itself horizontally: start, center, end, or stretch.

Tokens

No public tokens.

Internal tokens (may change between minor versions)

- `--_yeti-align` - `--_yeti-align-self` - `--_yeti-justify-self`

Accessibility

Everything stays in reading order. Text laid over a picture needs a contrast treatment (a scrim or a solid panel); the layer does not add one.

Browser support

Used without guards: grid-template-areas
Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.