YOUR LOGO

CSS System Demo Elementor + custom utility classes

Elementor CSS System Showcase

This page is a visual checklist for the CSS files you generated (colors, buttons, containers, spacing, images, typography, forms, FAQ, menus).

  • Assign classes via Advanced → CSS Classes
  • For sticky header: set container Motion Effects → Sticky: Top
  • For Nav Menu and Form: select your actual menu / recipients after import
Primary Button
Secondary
Accent
Outline

Background helpers

Apply these classes to a container/section to instantly set background + readable text.

bg-surface

Surface background

bg-surface-2

Alt surface

bg-primary

Primary background

bg-secondary

Secondary background

bg-accent

Accent background

bg-dark

Dark background

Container width helpers

These classes control max-width and centering. Apply them to a container that wraps your content.

.container–1800

Resize the preview to see max-width behavior.

.container–1600

Resize the preview to see max-width behavior.

.container–1200

Resize the preview to see max-width behavior.

.container–900

Resize the preview to see max-width behavior.

.container–50

Resize the preview to see max-width behavior.

Buttons

Apply btn + a variant class to Elementor Button widgets.

Primary
Primary (lg)
Secondary
Accent
Outline
Outline (secondary)

Cards + icon blocks

Example using Elementor Icon Box widgets inside your card styles.

Fast

Utility classes for quick builds.

Consistent

Tokens for color, spacing, radius.

Reusable

Copy/paste classes across projects.

Images

Rounded corners, shadows, hover effects, sticky images, and before/after swap.

Sticky image (scroll)

Apply img–sticky to an Image widget wrapper. The image stays visible while text scrolls.

Before / After hover swap

Container class: ba-swap. Add classes to the two Image widgets: ba-swap__before and ba-swap__after.

Typography

This area uses your typo + rhythm-* helpers, plus default element styles.

Typography Sample

Lead paragraph: use this for intros and hero supporting copy.

Regular paragraph text. A sample link, bold, italic, and inline code.

Lists

  • Unordered item one
  • Unordered item two
  1. Ordered item one
  2. Ordered item two
“Blockquotes are great for testimonials and pull-quotes.” — Sample citation

Small details

Small text note. This is useful for footers, disclaimers, and helper copy.

Forms

Elementor Pro Form widget demo. After import, update the recipient email and any actions.

Dark form variant

Wrap it in bg-dark and add form–dark to the widget.

FAQ + Menu navigation

FAQ uses Accordion widget. Menu uses Nav Menu widget (select your actual menu after import).

It showcases your custom Elementor CSS utility classes on a single page.

Only for the Form widget. Everything else works with Elementor free.

Select the header container → Motion Effects → Sticky: Top.

Menu demo

Add nav-menu to your Nav Menu widget. For CTA menu item, set the WP menu item’s CSS class to menu-cta.

Tip: Keep these CSS files versioned per project. When you tweak tokens (primary/secondary), your whole UI updates.