Collection banner styling

On this page

What each token changes
How precedence works
Parts
States and data attributes
Custom properties
Examples

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.

No.	Token	What it changes
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.

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:

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

CSS

Dawn:

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

assets/base.css

Horizon:

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);
}