Heroes

Split hero with media

Copy on the left, a product image on the right. Below 48rem the image stacks under the text without a breakpoint of yours.

4 components28 linesServer safeSource on GitHub

Live demo

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

What it uses

BadgeButtonHeroImage

Imports

import { Badge, Button, Hero, Image } 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 { Badge, Button, Hero, Image } from '@the_viveksingh/vivek-ui'

export default function HeroSplitMedia() {
  return (
    <Hero
      layout="split"
      eyebrow={<Badge tone="primary">v1.0</Badge>}
      title="Analytics your whole team can read"
      description="Dashboards that load in one request and explain themselves. No query language, no training day."
      actions={
        <>
          <Button size="lg">Try it free</Button>
          <Button size="lg" variant="ghost">
            Watch the demo
          </Button>
        </>
      }
      media={
        <Image
          src="/demo/vk-dash.svg"
          alt="The analytics dashboard showing weekly revenue"
          ratio={4 / 3}
          rounded="lg"
        />
      }
    />
  )
}
← All 62 blocks