Hero

Full-width hero sections with gradient background, badges and call-to-action buttons.

← Back to examples

µCSS Framework

Lightweight CSS framework built on PicoCSS

20 themes, 14 components, dark mode, zero JavaScript

~15 KB gzipped Zero dependencies MIT license

11 color variants

Primary

The default hero color

Secondary

Secondary color variant

Tertiary

Tertiary color variant

Contrast

Contrast color variant

Success

Success color variant

Info

Info color variant

Warning

Warning color variant

Error

Error color variant

Accent

Accent color variant

Pop

Pop color variant

Spark

Spark color variant

Flat variant

Use .hero-flat for a solid background without gradient.

Flat Hero

Solid background, no gradient

Left-aligned variant

Use .hero-start for left-aligned content.

Left-Aligned

Content aligned to the start

Useful for landing pages with asymmetric layouts

Minimal hero

Title and tagline only, no badges or actions.

Minimal Hero

Just a title and a tagline