Data table
You can simply add the class .data-table to a table and the styling will be applied.
If you would like each row to have a hover you can add the class .data-table--hover to the table as well.
| Header | Text column | Number column |
|---|---|---|
| Row item 1 | Row data 1 | 1.1 |
| Row item 2 | Row data 2 | 2.2 |
| Row item 3 | Row data 3 | 3.3 |
| Row item 4 | Row data 4 | 4.4 |
<table class="data-table data-table--hover">
<thead>
<tr>
<th>Header</th>
<th>Text column</th>
<th class="xs__text--right">Number column</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row item 1</td>
<td>Row data 1</td>
<td class="xs__text--right">1.1</td>
</tr>
<tr>
<td>Row item 2</td>
<td>Row data 2</td>
<td class="xs__text--right">2.2</td>
</tr>
</tbody>
</table>