# Layouts

Pick a layout on the separator line: `--- layout=…`. Each demo below is the matching slide of the
showcase deck, also available in the gallery of [presentation.recit.dev](https://presentation.recit.dev).

## Card grid

```md
--- layout=grid cols=3

# Card grid

:::card
### ⚡ Lorem
Ipsum dolor sit amet.
:::
```

The blocks after the title form the grid (1 to 4 columns). For a grid in the middle of a slide, wrap
the cards in `:::grid{cols=2}`: see the Grid component on [components.recit.dev](https://components.recit.dev).

<StoryEmbed slug="showcase" slide={3} />

## Image left, image right

```md
--- layout=split ratio=1:1

# Image left, image right

:::left
::image{src=./photo.svg alt="Purple gradient" fit=cover}
:::

:::right
::image{src=./logo.svg alt="Logo" fit=contain}
:::
```

<StoryEmbed slug="showcase" slide={4} />

## Full-height image

```md
--- layout=image-right image=./photo.svg alt="Illustration"
```

`layout=image-left` swaps sides, `fit=contain` avoids cropping.

<StoryEmbed slug="showcase" slide={5} />

## Background image

```md
--- layout=image image=./photo.svg overlay=0.35
```

<StoryEmbed slug="showcase" slide={6} />

## All layouts

| Layout                      | Use                                                                     |
| --------------------------- | ----------------------------------------------------------------------- |
| `default`                   | content at the top left                                                 |
| `center`                    | centered content; a `>` quote followed by `— Author` gets quote styling |
| `cover`                     | title page (footer hidden by default)                                   |
| `section`                   | divider between two parts                                               |
| `grid`                      | card grid (`cols=1..4`)                                                 |
| `columns`, `split`          | columns made of `:::col`, `:::left`, `:::right` (`ratio=2:1`)           |
| `image-left`, `image-right` | full-height image on one half (`image=`, `alt=`, `fit=`)                |
| `image`                     | full-bleed background image (`overlay=0..1`)                            |