Banners

Banners are the bold, full-width blocks that open a page or break up a long one — a headline, some supporting text, and a call to action over a background. Shock includes two banner layouts you can drop into any page.

Basic banner

A clean hero banner: heading, subtext, and a button over a background color or image. Use it for page headers or a simple mid-page call to action.

Extended banner

A richer layout with room for more content, extra media, and additional layout variations — use it when a basic banner feels too plain for the section.

Reference image — replace before publishing16:9

Shock preview pages, the basic banner demo — full-width hero block with heading, subtext, and call-to-action button over a background image.

Anatomy of a great banner

Pair a Super Heading with a Super Button and a section background color — that combination is what makes Shock’s demo heroes stand out, and every piece is swappable.

Open the matching demo page in the Shock preview pages included with your download to see the full markup for each banner, then copy the block into your page and edit the text, image, and button link.

Related reading

• Text Effects for heading animations to pair with a banner.
• Buttons for the call-to-action styles used inside banners.
• Colors to change a banner’s background or accent color.