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
Thomas Davis
Full Stack Developer & AI Engineer
- Cairns, Australia
- Updated 2 days ago
TypeScriptReactNode.jsRustPostgresLLMs+2
AL
Ada Lovelace
Analyst
- London
MathematicsAlgorithms
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>
| Prop | Type | Default | Description |
|---|---|---|---|
| name required | string | – | |
| actions | ReactNode | – | |
| avatarUrl | string | null | – | |
| headingLevel | 234 | 3 | |
| href | string | – | |
| label | string | – | Headline from basics.label: "Full Stack Developer". |
| location | string | – | |
| skills | string[] | [] | |
| updated | string | – | Free text such as "Updated 2 days ago". |