Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Data list

Guidance Code Accessibility

Component demo

Interactive example

Edit Edit Edit Edit VISA ending 5896 Edit
Web component React
StackBlitz
Show full code 
<ic-data-listheading="Order details">
<ic-data-rowlabel="Order name"value="Michael">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Drink"value="Americano">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Milk option"value="Soya milk">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Price"value="£3.25">
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Payment method">
<ic-typographyvariant="body"slot="value">
      VISA ending 5896
</ic-typography>
<ic-linkhref="#"slot="end-component">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf">
<ic-buttonvariant="icon"aria-label="Download"slot="end-component">
<svgviewBox="0 0 24 24"height="24"width="24">
<path
d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"
fill="currentColor"
/>
</svg>
</ic-button>
</ic-data-row>
</ic-data-list>

Data row details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property label
Attribute label

The label in the leftmost cell of the row.

type: string - string | undefined
Property size
Attribute size

The size of the data row component.

type: IcSizesNoLarge - "medium" | "small" | undefined
"medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property value
Attribute value

The value of the middle (right if no end-component supplied) cell of the row.

type: string - string | undefined
Property label
Attribute label

The label in the leftmost cell of the row.

type: string - string | undefined
Property size
Attribute size

The size of the data row component.

type: IcSizesNoLarge - "medium" | "small" | undefined
Default: "medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"
Property value
Attribute value

The value of the middle (right if no end-component supplied) cell of the row.

type: string - string | undefined

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot end-component
Content will be displayed in the rightmost cell.
Slot label
Content will be rendered in the leftmost cell.
Slot value
Content will be rendered to the right of the label.
Slot end-component
Content will be displayed in the rightmost cell.
Slot label
Content will be rendered in the leftmost cell.
Slot value
Content will be rendered to the right of the label.

Data list details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property heading
Attribute heading

The title for the data list.

type: string - string | undefined
Property size
Attribute size

The size of the data list component.

type: IcSizesNoLarge - "medium" | "small" | undefined
"medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property heading
Attribute heading

The title for the data list.

type: string - string | undefined
Property size
Attribute size

The size of the data list component.

type: IcSizesNoLarge - "medium" | "small" | undefined
Default: "medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot heading
Content will be placed at the top of the data list.
Slot heading
Content will be placed at the top of the data list.

Variants

With status tags

Interactive example

VISA ending 5896
Web component React
StackBlitz
Show full code 
<ic-data-listheading="Order details">
<ic-data-rowlabel="Order name"value="Michael">
</ic-data-row>
<ic-data-rowlabel="Drink"value="Americano">
<ic-status-tag
status="warning"
label="In Progress"
variant="filled"
slot="end-component"
/>
</ic-data-row>
<ic-data-rowlabel="Milk option"value="Soya milk">
</ic-data-row>
<ic-data-rowlabel="Price"value="£3.25">
</ic-data-row>
<ic-data-rowlabel="Payment method">
<ic-typographyvariant="body"slot="value">
      VISA ending 5896
</ic-typography>
<ic-status-tag
label="Not Confirmed"
variant="filled"
slot="end-component"
/>
</ic-data-row>
</ic-data-list>

Size small

Interactive example

383 Coffee Drive
London
SW7 988
United Kingdom
Web component React
StackBlitz
Show full code 
<ic-data-listheading="Personal details"size="small">
<ic-data-rowlabel="Name"value="Michael Johnson">
<ic-status-tag
status="success"
label="confirmed"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Date of birth"value="16 October 1995">
<ic-status-tag
status="warning"
label="in review"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Telephone"value="07449 7654873">
<ic-status-tag
status="warning"
label="in review"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Email"value="mjohnson@coffee.gov">
<ic-status-tag
status="success"
label="confirmed"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
<ic-data-rowlabel="Address">
<ic-typographyvariant="body"slot="value">
      383 Coffee Drive
<br/>
      London
<br/>
      SW7 988
<br/>
      United Kingdom
</ic-typography>
<ic-status-tag
label="not confirmed"
variant="filled"
slot="end-component"
size="small"
></ic-status-tag>
</ic-data-row>
</ic-data-list>

Editable example

Interactive example

Confirm Edit
Web component React
StackBlitz
Show full code 
<ic-data-listheading="Order details">
<ic-data-rowlabel="Order name">
<ic-text-field
slot="value"
label="Order name"
value="Michael"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Drink">
<ic-text-field
slot="value"
label="Drink"
value="Americano"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Milk option">
<ic-text-field
slot="value"
label="Milk option"
value="Soya milk"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Price">
<ic-text-field
slot="value"
label="Price"
value="£3.25"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
<ic-data-rowlabel="Payment method">
<ic-text-field
slot="value"
label="Payment method"
value="VISA ending 5896"
readonly="true"
hide-label="true"
full-width="true"
/>
</ic-data-row>
</ic-data-list>
<divclass="btn-container">
<ic-buttonid="confirm-button">
    Confirm
</ic-button>
<ic-buttonid="edit-button"variant="secondary">
    Edit
</ic-button>
</div>

Theme

Interactive example

Edit Edit
Web component React
StackBlitz
Show full code 
<ic-data-listheading="Order details"theme="dark">
<ic-data-rowlabel="Drink"value="Americano">
<ic-linkhref="#"slot="end-component"theme="dark">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Price"value="£3.25">
<ic-linkhref="#"slot="end-component"theme="dark">
      Edit
</ic-link>
</ic-data-row>
<ic-data-rowlabel="Download receipt"value="CoffeeOrder_X46w32.pdf">
<ic-buttonvariant="icon"aria-label="Download"slot="end-component"theme="dark">
<svgviewBox="0 0 24 24"height="24"width="24">
<path
d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"
fill="currentColor"
/>
</svg>
</ic-button>
</ic-data-row>
</ic-data-list>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Data list - Intelligence Community Design System