Heroes

Hero over a photo

A full-bleed photograph behind the copy with a gradient scrim. The dark overlay switches the text to light for you.

2 components22 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

ButtonHero

Imports

import { Button, Hero } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import { Button, Hero } from '@the_viveksingh/vivek-ui'

export default function HeroBackdropGradient() {
  return (
    <Hero
      overlay="gradient"
      minHeight="half"
      backdrop={<img src="/demo/vk-summit.svg" alt="" />}
      eyebrow="Season 2026"
      title="Higher, lighter, further"
      description="The pack that disappears on your back and reappears in the photos."
      actions={
        <>
          <Button size="lg">Shop the range</Button>
          <Button size="lg" variant="outline">
            Find a stockist
          </Button>
        </>
      }
    />
  )
}
← All 62 blocks