Heroes

Media-first hero

The same split, with the picture before the copy. mediaPosition="start" moves it on wide screens; on phones it still stacks under the text.

3 components22 linesServer safeSource on GitHub

Live demo

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

What it uses

Button Hero Image

Imports

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

export default function HeroMediaFirst() {
  return (
    <Hero
      layout="split"
      mediaPosition="start"
      eyebrow="Hardware"
      title="A keyboard you can hear yourself think on"
      description="Low-profile switches, a case machined from one block, and a battery measured in months."
      actions={<Button size="lg">Pre-order — ₹14,900</Button>}
      media={
        <Image
          src="/demo/vk-keys.svg"
          alt="The keyboard photographed from above"
          ratio={4 / 3}
          rounded="lg"
        />
      }
    />
  )
}

← All 62 blocks