diff --git a/scss/components/README.md b/scss/components/README.md index e1519b59..34609382 100644 --- a/scss/components/README.md +++ b/scss/components/README.md @@ -128,3 +128,44 @@ The masthead is an extended header with search included. ### Similar components elsewhere - [GOV.UK Design system documentation](https://github.com/alphagov/govuk-design-system/blob/b3223714d8f2e9564b7e9d2ca703a3f902bf1ce8/src/stylesheets/components/_masthead.scss) + +## Table component +This enhances the [GOV.UK table component](https://design-system.service.gov.uk/components/table/), making tables on result details pages responsive when loaded in small resolutions. + +### Expected behaviours + +- At high zooms table contents are wrapped and transposed or rotated so all information is still visible. With headings becoming part of the table rows. + +### Usage +```html +
Column name | +"Description | +Type | +
---|---|---|
Column name:{{column.display_name}} | +Description:
+ {% if column.description %}
+
+ {{column.description|default:''|markdown:3}}
+
+ {% else %}
+ A description for {{column.display_name}} does not exist + {% endif %} + |
+ Type:{{column.type|title}} | +