Agriculture Design System
Beta
Design System for the Export Service

Table

Tables help make complex information easier to scan and compare. Use tables for exact values or information that would be hard to read in body text.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/table';

Write short, clear column and row headers that are easy to read and clearly explain the following information.

For general guidance on content, go to the content patterns.

Language 

Use plain language.

Avoid punctuation such as full stops, commas, or semicolons.

Write in Sentence case.

Avoid articles such as the, an, or a in titles.

Refer to the glossary for more information.

Style 

For general content guidance on content go to:

For DAFF staff, please refer to the internal departmental style guide.

There are slight variations between these guides. If guidance differs, follow the DAFF style guide first or the next in order down this list.

Voice and tone

Go to the TFTM Voice and tone guide for guidance.