Site settings
Change the appearance of the site to suit your preferences
Table
Tables are a great way to present facts and structured data.
A simple table (to avoid screen readers double read the table header the "th" tag should have an optional role="cell" as in the example)
<Table size="md"> <TableHeader> <TableRow> <TableColumnHeader role="cell"> Country </TableColumnHeader> <TableColumnHeader role="cell"> Capital </TableColumnHeader> <TableColumnHeader role="cell"> Currency </TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell> Norway </TableCell> <TableCell> Oslo </TableCell> <TableCell> Norwegian krone </TableCell> </TableRow> <TableRow> <TableCell> Canada </TableCell> <TableCell> Ottawa </TableCell> <TableCell> Canadian Dollar </TableCell> </TableRow> <TableRow> <TableCell> Japan </TableCell> <TableCell> Tokyo </TableCell> <TableCell> Yen </TableCell> </TableRow> </TableBody> </Table>
Different variants
<Stack> <Table variant="ghost"> <TableHeader> <TableRow> <TableColumnHeader> From </TableColumnHeader> <TableColumnHeader> To </TableColumnHeader> <TableColumnHeader textAlign="end"> Departure </TableColumnHeader> <TableColumnHeader textAlign="end"> Arrival </TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Oslo bussterminal</TableCell> <TableCell>Kristiansand rutebilstasjon</TableCell> <TableCell textAlign="end">10:30</TableCell> <TableCell textAlign="end">14:48</TableCell> </TableRow> <TableRow> <TableCell>Oslo bussterminal</TableCell> <TableCell>Kristiansand rutebilstasjon</TableCell> <TableCell textAlign="end">10:30</TableCell> <TableCell textAlign="end">14:48</TableCell> </TableRow> </TableBody> </Table> <Table variant="core"> <TableHeader> <TableRow> <TableColumnHeader>From</TableColumnHeader> <TableColumnHeader>To</TableColumnHeader> <TableColumnHeader textAlign="end">Departure</TableColumnHeader> <TableColumnHeader textAlign="end">Arrival</TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Oslo bussterminal</TableCell> <TableCell>Kristiansand rutebilstasjon</TableCell> <TableCell textAlign="end">10:30</TableCell> <TableCell textAlign="end">14:48</TableCell> </TableRow> <TableRow> <TableCell>Oslo bussterminal</TableCell> <TableCell>Kristiansand rutebilstasjon</TableCell> <TableCell textAlign="end">10:30</TableCell> <TableCell textAlign="end">14:48</TableCell> </TableRow> </TableBody> </Table> </Stack>
Different colors
<Stack> <Table variant="core" colorPalette="green" size="md"> <TableHeader> <TableRow> <TableColumnHeader>First</TableColumnHeader> <TableColumnHeader>Last</TableColumnHeader> <TableColumnHeader>Handle</TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Max</TableCell> <TableCell>Verstappen</TableCell> <TableCell>@twitter</TableCell> </TableRow> <TableRow> <TableCell>Charles </TableCell> <TableCell>Leclerc</TableCell> <TableCell>@facebook</TableCell> </TableRow> <TableRow> <TableCell>Lewis</TableCell> <TableCell>Hamilton</TableCell> <TableCell>@instagram</TableCell> </TableRow> </TableBody> </Table> <Table variant="core" colorPalette="grey" size="md"> <TableHeader> <TableRow> <TableColumnHeader>First</TableColumnHeader> <TableColumnHeader>Last</TableColumnHeader> <TableColumnHeader>Handle</TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Max</TableCell> <TableCell>Verstappen</TableCell> <TableCell>@twitter</TableCell> </TableRow> <TableRow> <TableCell>Charles </TableCell> <TableCell>Leclerc</TableCell> <TableCell>@facebook</TableCell> </TableRow> <TableRow> <TableCell>Lewis</TableCell> <TableCell>Hamilton</TableCell> <TableCell>@instagram</TableCell> </TableRow> </TableBody> </Table> </Stack>
Different sizes
<Stack> <Table size="sm"> <TableHeader> <TableRow> <TableColumnHeader>Country</TableColumnHeader> <TableColumnHeader>Capitals</TableColumnHeader> <TableColumnHeader>Currency</TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Norway</TableCell> <TableCell>Oslo</TableCell> <TableCell>Norwegian Krone</TableCell> </TableRow> </TableBody> </Table> <Table size="md"> <TableHeader> <TableRow> <TableColumnHeader>Country</TableColumnHeader> <TableColumnHeader>Capitals</TableColumnHeader> <TableColumnHeader>Currency</TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Norway</TableCell> <TableCell>Oslo</TableCell> <TableCell>Norwegian Krone</TableCell> </TableRow> </TableBody> </Table> <Table size="lg"> <TableHeader> <TableRow> <TableColumnHeader>Country</TableColumnHeader> <TableColumnHeader>Capitals</TableColumnHeader> <TableColumnHeader>Currency</TableColumnHeader> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Norway</TableCell> <TableCell>Oslo</TableCell> <TableCell>Norwegian Krone</TableCell> </TableRow> </TableBody> </Table> </Stack>