@gemeente-denhaag/descriptionlist NPM

Data list

Data lists organize and display information into rows.

When to use

Use a data list for displaying data that is intended to be easily scanned and compared.

Alternatives and related components

Use lists to create an actionable list of related items that link to detail pages, such as a list of customers.
Use tables to display information from a data set into rows and columns.

Anatomy

The data list consists of:

Caption (optional): describes the table.
List header: title for the row header.
List row: the data.

(Interactive) states

None.

Design properties

Typography

Caption: TheMix/xl/700
List header: TheSans/md/700
List row: TheSans/md/400

Color

Caption: text color black
List header: text color Grey/4, border color Grey/2
List row: text color Grey/4, border color Grey/2

Structure

Desktop

List header: padding 16px, margin-top 24px
List row: padding 16px

Mobile

List header: padding-top 12px, padding-bottom 4px, padding-left and padding-right 8px, margin-top 24px, border bottom 1px
List row: padding-top 4px, padding-bottom 12px, padding-left and padding-right 8px, border bottom 1px

Accessibility

Use data lists for layout.
A caption element is strongly encouraged. The summary attribute is deprecated in HTML5.

Content guidelines

Keep headers informative, descriptive and concise so that they can be read at a glance.
Ensure headers start in a capital letter and don’t end with commas, semicolons or full stops.
Ensure content starts in a capital letter and doesn’t include units of measurements.
Wrap instead of truncate content. This is because if row titles start with the same word, they’ll all appear the same when truncated.
Use decimals consistently.

Custom header widths

Use custom widths based on the expected length of the data under each corresponding column. By default the data list is full width, however the data list can be used with the grid to take up a desired amount of horizontal space on the page.

Best practices

Do’s

Data lists should:

Display a collection of structured data.
Have a logical row header.
Use a caption to describe a list in the same way you would use a heading. A caption helps users find, navigate and understand lists.
Align all headers and data to the left.

Don’ts

Data lists should:

Not be used when a more complex display of the data or interactions are required.
Not necessarily need captions when there is already a heading above the table that describes the data.
Not center the headers and data.

References

Figma design

@infinitebrahmanuniverse/nolb-_gem @everything-registry/sub-chunk-355 @nl-portal/nl-portal-user-interface @gemeente-denhaag/components-react @gemeente-denhaag/storybook

10 days ago

17 days ago

17 days ago

23 days ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

10 months ago

10 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

10 months ago

10 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago