Heroes

Hero with an email form

A hero whose only action is an email field: for a launch page, a waitlist or a newsletter with nothing else to sell yet.

5 components34 linesServer safeSource on GitHub

Live demo

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

What it uses

Button Hero Input Stack Text

Imports

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

export default function HeroNewsletter() {
  return (
    <Hero
      eyebrow="Weekly, on Thursdays"
      title="The five things that mattered in frontend this week"
      description="No sponsors, no roundup of roundups. Read by 40,000 engineers who would rather not scroll."
      actions={
        <Stack gap={2} style={{ inlineSize: '100%', maxInlineSize: '28rem' }}>
          <form
            onSubmit={(event) => event.preventDefault()}
            style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}
          >
            <Input
              aria-label="Email address"
              type="email"
              placeholder="you@company.com"
              required
              size="lg"
              style={{ flex: '1 1 14rem' }}
            />
            <Button size="lg" type="submit">
              Subscribe
            </Button>
          </form>
          <Text size="sm" tone="muted">
            One email a week. Unsubscribe in one click.
          </Text>
        </Stack>
      }
    />
  )
}

← All 62 blocks