Summary box (summary_box)
A summary box highlights key information from a longer page or displays next steps.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| summary_heading | Summary heading | Used as heading in summary box. | |
| content | Content | Page content. | |
| summary_box_id | Summary box ID | ID for the summary box. |
|
id: summary_box
label: 'Summary box'
description: 'A summary box highlights key information from a longer page or displays next steps.'
group: 'Summary box'
homepage: 'https://designsystem.digital.gov/components/summary-box/'
slots:
summary_heading:
id: summary_heading
label: 'Summary heading'
description: 'Used as heading in summary box.'
content:
id: content
label: Content
description: 'Page content.'
props:
summary_box_id:
id: summary_box_id
label: 'Summary box ID'
description: 'ID for the summary box.'
schema:
type: string
examples:
preview:
id: preview
label: Preview
renderable:
'@component': summary_box
summary_heading: 'Key information'
content:
- 'Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum, feugiat sollicitudin nunc facilisis hendrerit nascetur a odio, mauris litora imperdiet dictumst purus leo suscipit.'
Key information
Lorem ipsum dolor sit amet consectetur adipiscing elit vestibulum, feugiat sollicitudin nunc facilisis hendrerit nascetur a odio, mauris litora imperdiet dictumst purus leo suscipit.