Skip to content
JSON Resume Styleguide
GitHub

Data display

Description list

Labelled facts in pairs: location, salary, type.

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

Examples

Inline and columns
Location
Remote (Americas)
Salary
$180k–$220k
Type
Full-time
Posted
3 days ago
Location
Remote (Americas)
Salary
$180k–$220k
Type
Full-time
Posted
3 days ago
description-list/job.tsx
import { DescriptionList, Stack } from '@jsonresume/ui';

const facts = [
  { term: 'Location', description: 'Remote (Americas)' },
  { term: 'Salary', description: '$180k–$220k' },
  { term: 'Type', description: 'Full-time' },
  { term: 'Posted', description: '3 days ago' },
];

export default function DescriptionListJob() {
  return (
    <Stack gap={8}>
      <DescriptionList items={facts} />
      <DescriptionList items={facts} layout="columns" />
    </Stack>
  );
}

Accessibility

  • A real dl with dt and dd pairs.

Props

<DescriptionList>

Also accepts the attributes of the element DescriptionList renders.
PropTypeDefaultDescription
items requiredDescriptionItem[]–
layoutinlinecolumnsstacked–inline: label beside value; stacked: label above value; columns: a grid of facts.