Description list
Shows pairs of a term and its details, such as a working problem or an expected discharge, side by side where there is room and stacked where there is not.
Default
Each term beside its details, while the list is 18rem wide or more.
- Working problem
- Community-acquired pneumonia
- Expected discharge
- Wed 21 Oct
import {
DescriptionDetails,
DescriptionItem,
DescriptionList,
DescriptionTerm,
} from "@cadence-clinical/ui";
<DescriptionList>
<DescriptionItem>
<DescriptionTerm>Working problem</DescriptionTerm>
<DescriptionDetails>Community-acquired pneumonia</DescriptionDetails>
</DescriptionItem>
<DescriptionItem>
<DescriptionTerm>Expected discharge</DescriptionTerm>
<DescriptionDetails>Wed 21 Oct</DescriptionDetails>
</DescriptionItem>
</DescriptionList>;In a narrow space
Below 18rem the list stacks each term over its details. It measures its own width, so this happens in a narrow pane as well as on a phone.
- Working problem
- Community-acquired pneumonia
- Expected discharge
- Wed 21 Oct
<DescriptionList className="w-60">{/* The same items */}</DescriptionList>Always stacked
orientation="vertical" stacks every pair at any width, for a long detail such as a note's opening line. orientation="horizontal" keeps every pair side by side.
- Overnight
COPD exacerbation, day 3, on oxygen. Oxygen requirement rose this afternoon.
<DescriptionList orientation="vertical">
<DescriptionItem>
<DescriptionTerm>Overnight</DescriptionTerm>
<DescriptionDetails>
COPD exacerbation, day 3, on oxygen. Oxygen requirement rose this afternoon.
</DescriptionDetails>
</DescriptionItem>
</DescriptionList>Several details for a term
Give a term one DescriptionDetails for each value. Each starts on its own line beside the term.
- Open jobs
- Chase sputum culture
- Repeat chest X-ray tomorrow
<DescriptionItem>
<DescriptionTerm>Open jobs</DescriptionTerm>
<DescriptionDetails>Chase sputum culture</DescriptionDetails>
<DescriptionDetails>Repeat chest X-ray tomorrow</DescriptionDetails>
</DescriptionItem>With badges
The details can hold any content. Lay several badges out with flex flex-wrap gap-1 on the details, so they wrap rather than run past the edge.
- Discharge barriers
import { Badge } from "@cadence-clinical/ui";
<DescriptionItem>
<DescriptionTerm>Discharge barriers</DescriptionTerm>
<DescriptionDetails className="flex flex-wrap gap-1">
<Badge variant="secondary">Home assessment</Badge>
<Badge variant="secondary">Family meeting</Badge>
</DescriptionDetails>
</DescriptionItem>;