# Banner

A **banner** is a full-width announcement row pinned across the very top of the page, above the
header, filled with your site's **primary color**. The colored row at the very top of *this* page
is a live banner. Its text is ordinary **Markdown**, so **bold**, `code`, and [links](/) all work.

Unlike the other built-ins, the banner isn't a tag you write in the body — there's nothing to
place inside your content. You turn it on from **configuration**: once site-wide, or per page in
front matter.

## Site-wide

Set a `banner:` string in `aardvark.config.yaml` and it shows on every page:


```yaml
banner: "**Heads up:** scheduled maintenance this Saturday. [Status page](/status/)."
```


## Per page

A page can set its own `banner:` in front matter. It **overrides** the site-wide banner on that
page only:


```markdown
---
title: "Release notes"
banner: "**Version 2.0** is out — see what changed below."
---
```


To **hide** the site-wide banner on a single page, set `banner: false`:


```markdown
---
title: "Checkout"
banner: false
---
```


## Behavior

- **Color** is always your theme's primary color, in both light and dark mode.
- **Markdown**, rendered inline — **bold**, *italics*, `code`, and links. (It's plain text, not a
  place for tags or other components.)
- **Dismissible** — a × button closes it; it stays closed for that visitor until you change the
  text. Editing the announcement brings it back for everyone.
- **Scrolls away** — the banner sits at the top and scrolls off as the reader moves down the page,
  while the header stays pinned.