Utility classes

These utility classes are a toolkit for making simple design/layout adjustments to individual elements. For generic layout helpers (concerning multiple elements), see Cluster, Stack, Grid, and Sidebar.

Class name	What it does	Demo
`ds-padded`	Adds padding of `$s1` (1rem) on all sides	Basic padding
`ds-padded-large`	Adds padding of `$s3` (1.5625rem) on all sides	Large padding
`ds-text-left`	Applies left justified text (usually to override centre or right justified text that has been applied to a parent)	Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae hic culpa, accusantium fuga, voluptate magnam excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem temporibus facilis, libero ratione cum quod id excepturi, tenetur dolorem, saepe similique dignissimos magni.
`ds-text-centered`	Applies center justified text	Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae hic culpa, accusantium fuga, voluptate magnam excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem temporibus facilis, libero ratione cum quod id excepturi, tenetur dolorem, saepe similique dignissimos magni.
`ds-text-right`	Applies right justified text	Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae hic culpa, accusantium fuga, voluptate magnam excepturi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem temporibus facilis, libero ratione cum quod id excepturi, tenetur dolorem, saepe similique dignissimos magni.
`ds-bordered`	Adds a `2px` solid border matching the element’s `color`	Bordered and padded
`ds-visually-hidden`	Hides an element visually but leaves it available to screen readers. May help to clarify things for screen reader users.	I am in screen reader output
`ds-block-centered`	Centers a block element, using `auto` margins, with a `max-width` of `$measure` (70ch).	(demo not possible in this context)
`ds-block-centered-narrow`	Same as `ds-block-centered` but uses `$measureReduced` (50ch)	(demo not possible in this context)
`ds-h1`, `ds-h2`, `ds-h3`, `ds-h4`, `ds-h5`, `ds-h6`	Match the size of arbitrary text to a heading level. Only use where a heading element is not appropriate.	A A A A A A

Widths

Widths are set relative to font-size, using the ch unit and max-width to allow wrapping.

ds-width-full

This resets an element to use the full width of the container (width: auto on a block-level element; display: block is enforced).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, est ac sodales maximus, eros purus ultricies libero, non tempor ex augue eu diam. Proin a lectus risus. In pulvinar, tortor quis vulputate scelerisque, ligula est faucibus nisi, varius tincidunt purus nibh eget dui. In ut sollicitudin elit.

<p class="ds-width-full">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, est ac sodales maximus, eros purus ultricies libero, non tempor ex augue eu diam. Proin a lectus risus. In pulvinar, tortor quis vulputate scelerisque, ligula est faucibus nisi, varius tincidunt purus nibh eget dui. In ut sollicitudin elit.</p>

ds-width-full-text

This uses the full measure of 70ch ($measure). Where the container is narrower than 70ch, it will take up the full width.

<p class="ds-width-full-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, est ac sodales maximus, eros purus ultricies libero, non tempor ex augue eu diam. Proin a lectus risus. In pulvinar, tortor quis vulputate scelerisque, ligula est faucibus nisi, varius tincidunt purus nibh eget dui. In ut sollicitudin elit.</p>

ds-width-reduced-text

A reduced value of 50ch ($measureReduced).

<p class="ds-width-reduced-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, est ac sodales maximus, eros purus ultricies libero, non tempor ex augue eu diam. Proin a lectus risus. In pulvinar, tortor quis vulputate scelerisque, ligula est faucibus nisi, varius tincidunt purus nibh eget dui. In ut sollicitudin elit.</p>

ds-width-half-text

Half the $measure value.

<p class="ds-width-half-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, est ac sodales maximus, eros purus ultricies libero, non tempor ex augue eu diam. Proin a lectus risus. In pulvinar, tortor quis vulputate scelerisque, ligula est faucibus nisi, varius tincidunt purus nibh eget dui. In ut sollicitudin elit.</p>

ds-width-half-text

A third of the $measure value.

<p class="ds-width-third-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, est ac sodales maximus, eros purus ultricies libero, non tempor ex augue eu diam. Proin a lectus risus. In pulvinar, tortor quis vulputate scelerisque, ligula est faucibus nisi, varius tincidunt purus nibh eget dui. In ut sollicitudin elit.</p>