For reference

Cheat sheet & glossary

The most common CSS classes for the CSS ID/class field and an explanation of the most important terms. The complete technical reference is bundle/cheat-sheet.md.

Backgrounds

`bg-surface-1` / `-2` / `-3`	base surface · offset · more strongly offset
`bg-primary` / `bg-secondary`	brand or second colour (also `-light`)
`bg-gradient-subtle` / `-primary` / `-secondary` / `-dark` / `-animated`	gradients
`bg-image` / `bg-image-dark` / `-light` / `-brand` / `-secondary` / `-gradient`	background image with overlay (needs the “Background image” field)
`bg-blur`	add-on: blur the background image
`bg-none`	remove an inherited surface

Style

`style-card`	card: surface, border, rounding, padding, shadow
`style-interactive-card`	card that lifts on hover
`style-pop`	springy hover (slight growth) – on a card, image or button
`style-tile`	tile: surface + padding, without rounding/shadow
`media-card`	on an element group with an image at the top: image edge to edge, the rest a padded body
`style-glass` / `style-glass-dark`	frosted glass (light / dark) – on image/colour surfaces
`style-shadow` / `style-rounded` / `style-squircle`	shadow only · rounding only · very soft corners
`shadow-sm` / `-md` / `-lg` / `shadow-none`	shadow levels
`glow` / `glow-sm` / `-md` / `-lg` / `glow-none`	coloured glow instead of a shadow (colour/strength in the Studio)
`text-glow` / `-sm` / `-md` / `-lg`	glow around the lettering
`border-primary` / `-secondary` / `border-strong` / `border-none`	coloured border · thicker · none
`border-top` / `-bottom` / `-left` / `-right`	line on one side (freely combinable)
`style-divider`	horizontal divider (top border)
`cards-solid` / `cards-primary` / `cards-secondary`	on the section: make glass cards inside it opaque (for dark image sections)
`dividers-v`	on the element group: vertical dividers between columns
`accordion--cards` / `--filled` / `--accent`	accordion styles (from `theme.css`)

Text colour in an area

`style-light`	white text – for dark backgrounds
`text-on-light`	dark text – for light backgrounds
`color-primary` / `color-secondary`	section text in the brand / second colour
`text-muted` / `text-primary` / `text-secondary`	colour for this one element only (headline + text inside it)
`links-plain` / `links-hover-underline` / `links-underline`	link underline in this area: never / on hover / always – also switches off the persona's hover effect there

Typography

`display-1` / `-2` / `-3` / `display-hero`	hero title sizes
`lead`	larger intro paragraph
`eyebrow` / `section-label` / `section-index` / `badge`	small uppercase line · section label · large kicker · chip
`pull-quote`	oversized, centred statement quote
`text-sm` … `text-3xl`	text size (affects headline + text in the element)
`font-light` … `font-black`	font weight
`tracking-tight` / `tracking-wide` / `tracking-widest`	letter spacing
`leading-none` … `leading-loose`	line height (on the element, affects headline + text inside it)
`text-balance` / `text-pretty` / `text-truncate`	balanced wrapping · pretty wrapping · one line with “…”
`measure-45` … `measure-70` / `measure` / `measure-none`	limit line length (characters) or switch the heading measure on/off
`prose` / `prose--sm` / `prose--lg`	comfortable reading rhythm for long texts

Layout & alignment

`container--sm` … `container--2xl` / `container--full`	narrower / full content width for this section
`section--bleed`	section across the full window width (with `section`, without a side column)
`layout-columns-2/3/4/6`	columns of equal width (stack on phones)
`layout-columns-asymmetric` / `--reverse`	2:1 or 1:2
`layout-feature`	text + image, centred, large gap
`layout-sidebar` / `--left`	main content + narrow side column
`layout-auto-grid`	as many columns as fit
`layout-stack` / `layout-row`	children stacked / in one row (add-on `row-spread`)
`col-span-2` … `col-span-full`	on a single element in a column layout: span several columns
`no-stack`	modifier: do not stack on phones
`align-text-center` / `align-text-end`	text centred / right
`av-y-center` / `av-y-end`	content vertically centred / at the bottom
`align-items-start` / `-center` / `-end` / `-stretch`	alignment of the columns within the row
`self-center` / `self-end`	the element itself centred / right (button, image)
`align-all-center`	centre on both axes (button/icon/small content)
`v-center`	centre content vertically only (text stays left-aligned)
`h-full` / `grow` / `fill-stack` / `fill-stack--even`	make boxes in the grid the same height / let them fill the free space
`ratio-16-9` / `-4-3` / `-3-2` / `-1-1`	fixed aspect ratio, child fills the frame
`vh-third` / `vh-half` / `vh-large` / `vh-full`	minimum height (hero)
`layout-sticky`	element sticks while scrolling (desktop only)
`desktop-only` / `mobile-only`	show/hide per screen size
`order-first--mobile` / `order-last--mobile` / `order-1` … `order-4`	change the order

Spacing

`space-box-2xs` … `space-box-xl`	padding all round
`space-block-xs` … `space-block-2xl`	padding top/bottom only
`space-below-xs` … `space-below-2xl` / `no-space-below`	margin below
`gap-none` … `gap-2xl`	column and row gap on the layout wrapper
`gap-row-none` … `gap-col-2xl`	row gap only or column gap only
`space-none-mobile` / `space-inline-none-mobile` / `space-block-none-mobile`	remove padding on phones (all / sides / top-bottom)
`space-mobile-collapse`	on phones, set the section's padding and margin to 0

Images

`image--cover`	image fills its box (with cropping)
`image-left` / `image-right`	on the text element: image shrinks and moves to the edge (no text wrap)
`media--wrap-left` / `media--wrap-right`	image with text wrapping around it (full width on phones)
`image--original`	exclude this image from the global image filter
`logo-tint`	logo takes on the colours of its surroundings (word mark = text colour, symbol = accent); SVG with the parts `logo-mark` / `logo-word`, otherwise original colours · PNG single-colour · JPG never
`shape-rounded` / `-squircle` / `-circle` / `-blob`	image shape (on the `<img>`)
`shape-border` (+ `--secondary` / `--light` / `--dark`) / `shape-shadow`	border or shadow, follows the shape

Buttons

More convenient to set via Element Style on the Hyperlink element; the classes behind it:

`btn`	primary button (filled)
`btn--secondary` / `--neutral` / `--outline` / `--outline-secondary`	colour/outline variants
`btn--ghost` / `--soft` / `--dark` / `--glass`	transparent · primary tint · dark · frosted glass
`btn--sm` / `--lg` / `--pill` / `--full` / `--icon`	size / shape / full width / icon only
`btn--shadow` / `btn--glow` / `btn--hover-flat`	shadow / glow / switch off the lift

Animation & tables

`animate`	element fades in while scrolling (fade + slight upward slide)
`animate--fade` / `--left` / `--right`	direction of the fade-in
`animate--stagger` / `--hero` / `--count-up`	children one after another · on load · first number counts up
`table-compact` / `-comfortable` / `-spacious` / `-nowrap`	cell padding of a table · don't wrap columns

Glossary

Design variable / token	A named value (colour, spacing, radius …) that the whole theme refers to. Name in the code: `--av-…`. Changing it = changing it everywhere at once.
Design Studio	The slide-in panel in the front end with which administrators set the overall look. An optional add-on module; on save it writes the file theme-vars.css. The theme works without it.
Panel	A collapsible area in the Contao edit form (grey bar), e.g. Design, Element Style, Expert settings. Not a browser tab.
Section	This help's umbrella term for an article or an element group. Both carry the Design panel. The back end itself doesn't use the word “section” in this sense.
Element group	Itself a content element: insert “Element group”, drag other elements into it. It behaves like a small section (its own layout, its own background) and can also be framed as a card.
Content element	A single building block: text, image, headline, button, accordion … It carries the Element Style panel.
Overlay	A semi-transparent layer over a background image so that the text stays readable. Dark overlay → light text (the “dark”/“light” overlay options switch the text colour along with it).
Hero / minimum height	A large opening area that is at least a certain share of the screen high. Field Minimum height on the article/element group.
Preset / persona	The same list of complete looks, two ways in: as “Presets” tiles in the Studio panel, and as ?persona=name in the address bar (demo). The same sliders, different numbers.
Utility class	A short name for the CSS ID/class field with a small, clearly defined effect (e.g. `align-text-center`).
custom.css	Project-specific file for details the sliders don't cover. It is loaded last and wins – which is why a fixed value there makes the matching Studio slider ineffective.
File reference by ID	Contao remembers chosen images by an internal ID, not by the file path. Renaming/moving is therefore harmless – only deleting is not.