Site

Hero

The centered yellow promo band from the jsonresume.org home page.

import { Hero } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Promo

JSON Resume

The open-source initiative to create a JSON-based standard for resumes. For developers, by developers.

hero/promo.tsx

import { Button, Hero } from '@jsonresume/ui';

export default function HeroPromo() {
  return (
    <Hero
      title="JSON Resume"
      lede="The open-source initiative to create a JSON-based standard for resumes. For developers, by developers."
      actions={
        <Button variant="primary" size="lg">
          Read more
        </Button>
      }
    />
  );
}

Usage

Do

Use it once, on landing pages.
Keep the lede to two short sentences.

Don’t

Put more than two buttons in it.

Accessibility

The title is the page’s h1; do not add another.

Props

<Hero>

Also accepts the attributes of the element Hero renders.
Prop	Type	Default
title required	ReactNode	–
actions	ReactNode	–
lede	ReactNode	–