CSS Reference

Use these CSS classes in the Theme Custom CSS field or assign them to blocks via the CSS Class field in the block editor.

Page Structure

Selector	Description
.cms-page	Wraps the entire page content
.cms-zone	A content zone (header, main, sidebar, footer)
.cms-zone-main	The main content zone
.cms-zone-header	The header zone
.cms-zone-sidebar	The sidebar zone
.cms-zone-footer	The footer zone
.cms-block	Wraps each block instance

Block Types

Selector	Block
.cms-block-text	Text block
.cms-block-rich-text	Rich Text / Markdown block
.cms-block-hero-banner	Hero Banner (full-width header)
.cms-block-image	Image with caption
.cms-block-video	Video player
.cms-block-html	Raw HTML
.cms-block-spacer	Vertical spacing
.cms-block-call-to-action	CTA section with button
.cms-block-accordion	Collapsible FAQ sections
.cms-block-card-grid	Grid of cards
.cms-block-breadcrumb	Breadcrumb navigation

Inner Elements

Selector	Description
.cms-hero-banner	Hero section container
.cms-hero-content	Hero text/CTA wrapper
.cms-hero-cta	Hero call-to-action button
.cms-cta	CTA section container
.cms-cta-button	CTA button
.cms-image	Image figure wrapper
.cms-card	Individual card in card grid
.cms-card-grid	Card grid container
.cms-accordion-item	Individual accordion item
.cms-breadcrumb	Breadcrumb nav wrapper

Theme Variables

Variable	Description
--color-primary	Primary brand color
--color-secondary	Secondary color
--color-accent	Accent/highlight color
--color-background	Page background
--color-text	Body text color
--color-header-bg	Header background
--color-footer-bg	Footer background
--font-heading	Heading font family
--font-body	Body font family

Layout Examples

Use in Theme Custom CSS or assign via CSS Class field:

/* Full-width hero (bleeds past content padding) */
.cms-block-hero-banner { margin: -2rem -1.5rem 2rem -1.5rem; }

/* Two-column layout with sidebar */
.cms-zone-main { display: flex; gap: 2rem; }

/* Constrain content width */
.contained { max-width: 800px; margin: 0 auto; }

/* Add spacing around a block */
.padded { padding: 2rem; }

/* Center text in a block */
.text-center { text-align: center; }