Site

Feature

A centered teaser column: light title, one or two sentences, one action.

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

Examples

Feature row

What is this?

JSON Resume is a standard created to empower developers.

Themes

Browse our gallery of resume themes made by the community.

Open Source

Every part of JSON Resume is open source on GitHub.

feature/row.tsx

import { Button, Container, Feature, Grid, Section } from '@jsonresume/ui';

export default function FeatureRow() {
  return (
    <Section tone="subtle">
      <Container>
        <Grid minColumnWidth="14rem" gap={8}>
          <Feature title="What is this?" action={<Button>Get started</Button>}>
            JSON Resume is a standard created to empower developers.
          </Feature>
          <Feature title="Themes" action={<Button>View themes</Button>}>
            Browse our gallery of resume themes made by the community.
          </Feature>
          <Feature title="Open Source" action={<Button>View on GitHub</Button>}>
            Every part of JSON Resume is open source on GitHub.
          </Feature>
        </Grid>
      </Container>
    </Section>
  );
}

Accessibility

Set level to fit the page outline (2 by default).

Props

Also accepts the attributes of the element Feature renders.
Prop	Type	Default	Description
title required	ReactNode	–
action	ReactNode	–
level	234	2	Heading level for the title. Defaults to 2.