Hero

Full-width banner section for landing pages and marketing copy. Wraps a <div class="hero"> with an inner hero-content div. Supports background images and dark overlays.

Default

Minimal hero with heading and CTA.

Simple hero

Hello there

Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi.

With background image + overlay

Pass a bgImage URL and set overlay for a dark overlay.

Hero with background image

Box Office News!

Utra-realist CGI will make you question what's real and what isn't.

Text beside image

The hero-content div can hold any layout — flex row with an image and text.

Image + text side by side

New

Meet the Team

We're a small, distributed team building great tools for developers. We love open source.

Centered

Use contentClasses="text-center" to center content.

Centered content

Centered Hero

Great for simple landing sections without imagery.