# Collection banner styling

> Class names, states and CSS custom properties for the AndOr collection banner, with Dawn and Horizon examples.

Source: https://backtrackhq.com/docs/widgets/collection-banner/styling/

This page is for theme developers. It lists the classes, states and CSS
custom properties of the collection banner,
`<andor-banner class="andor-banner">`.

The widget comes from the **AndOr Collection banner** block. It uses
AndOr's widget styles. Liquid renders it whole, with no
JavaScript. It has `role="note"`.

## What each token changes

The numbers on the diagram match the table. The diagram is a simplified drawing. The full list of tokens is below.
For every layout the block offers, see [Layouts](https://backtrackhq.com/docs/widgets/collection-banner/#layouts).
(Diagram: The collection banner across the top of a collection page, with a heading)
1. `--andor-banner-background`: the fill
2. `--andor-banner-color`: the text
3. `--andor-banner-heading-font-size`: the heading size
4. `--andor-banner-padding`: padding
5. `--andor-banner-radius`: corners
6. `--andor-banner-gap`: space from the heading to the text

## How precedence works

Put your CSS in your theme's stylesheet or in the app embed's
**Custom CSS** box. To see which value wins, read
[Which value wins](https://backtrackhq.com/docs/developers/tokens/#which-value-wins).

What this means for the banner:

- **The two colors are inline.** The block writes
  `--andor-banner-background` and `--andor-banner-color` into the
  host's `style` on every render. A stylesheet rule on those two needs
  `!important`.

## Parts

| Class | What it is |
|---|---|
| `.andor-banner` | the bar, an `<andor-banner>` |
| `.andor-banner__heading` | the heading, the collection name |
| `.andor-banner__text` | the sentence |

## States and data attributes

| Attribute or class | On | Meaning |
|---|---|---|
| `.andor-banner--fit` | host | **Full width** is off: as wide as its text |
| `data-andor-widget-id` | host | the block id |
| `data-andor-sample` | host | theme editor only: the dashed sample |

When no qualifying discount runs, Liquid prints no banner at all, so
there is no hidden state to style.

## Custom properties

| Property | Default | Controls |
|---|---|---|
| `--andor-banner-background` | block setting, inline | fill |
| `--andor-banner-color` | block setting, inline | text |
| `--andor-banner-space-block-start` | `0` | margin above |
| `--andor-banner-space-block-end` | `0` | margin below |
| `--andor-banner-padding` | `0.75em 1em` | padding |
| `--andor-banner-gap` | `0.25em 0.75em` | heading to text |
| `--andor-banner-border` | `0` | a border, for example `1px solid` |
| `--andor-banner-radius` | `--andor-radius`, `4px` | corners |
| `--andor-banner-font-size` | `inherit` | text size |
| `--andor-banner-font-weight` | `600` | text weight |
| `--andor-banner-text-font-weight` | `inherit` | the sentence only |
| `--andor-banner-heading-font-size` | `0.85em` | heading size |
| `--andor-banner-heading-letter-spacing` | `0.06em` | heading tracking |
| `--andor-banner-heading-transform` | `uppercase` | heading case |

## Examples

A softer banner with a border and normal-case heading:

```css
andor-banner {
  --andor-banner-background: #fff4e5 !important;
  --andor-banner-color: #5c3a00 !important;
  --andor-banner-border: 1px solid #ffd699;
  --andor-banner-heading-transform: none;
}
```

Dawn:

<p class="docs-code-file">assets/base.css</p>

```css
andor-banner {
  --andor-banner-radius: var(--text-boxes-radius, 0);
  --andor-banner-heading-letter-spacing: 0.13rem;
  --andor-banner-font-weight: 400;
}
```

Horizon:

<p class="docs-code-file">assets/base.css</p>

```css
andor-banner {
  --andor-banner-radius: var(--style-border-radius-inputs, 8px);
  --andor-banner-heading-transform: none;
  --andor-banner-font-weight: var(--font-body--weight, 400);
}
```

> **Note:** The theme variable names were checked against Dawn 16.0.0 and
> Horizon 4.2.0. Check the names in the version you run.