Skip to content

Data display

Resume card

A person summary from their resume: avatar, name, headline and skills.

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

Examples

Explore

Thomas Davis

Full Stack Developer & AI Engineer

  • Cairns, Australia
  • Updated 2 days ago
TypeScriptReactNode.jsRustPostgresLLMs+2
Show code
resume-card/explore.tsx
import { Grid, ResumeCard } from '@jsonresume/ui';

export default function ResumeCardExplore() {
  return (
    <Grid minColumnWidth="16rem" gap={4}>
      <ResumeCard
        name="Thomas Davis"
        label="Full Stack Developer & AI Engineer"
        avatarUrl="https://avatars.githubusercontent.com/u/416209?v=4"
        location="Cairns, Australia"
        updated="Updated 2 days ago"
        href="#thomasdavis"
        skills={[
          'TypeScript',
          'React',
          'Node.js',
          'Rust',
          'Postgres',
          'LLMs',
          'Go',
          'Kubernetes',
        ]}
      />
      <ResumeCard
        name="Ada Lovelace"
        label="Analyst"
        location="London"
        href="#ada"
        skills={['Mathematics', 'Algorithms']}
      />
    </Grid>
  );
}

Accessibility

  • The name is the link; long skill lists collapse to "+n".

Props

<ResumeCard>

Also accepts the attributes of the element ResumeCard renders.
PropTypeDefaultDescription
name requiredstring–
actionsReactNode–
avatarUrlstring | null–
headingLevel2343
hrefstring–
labelstring–Headline from basics.label: "Full Stack Developer".
locationstring–
skillsstring[][]
updatedstring–Free text such as "Updated 2 days ago".