A collection of utility classes to aid layout, responsiveness, and accessibility
We've put a lot of effort into making sure all of our various elements and components have sensible spacing but there will always be situations in which it's prudent to add or remove vertical spacing.
Align text differently at different breakpoints. The breakpoint in the class name describes the breakpoint above which the text alignment is applied. Used in combination with a default text alignment utility class.
Align elements differently at different breakpoints. The breakpoint in the class name describes the breakpoint above which the alignment is applied.
Use combinations of these to change visiblity of elements across different breakpoints.
Be sure to use the correct class based on the display attribute of the element you are making visible. for example, applying visible-sm-block to an inline element will cause it to be displayed as a block element and potentially break your layout.
Where appropriate you can place explanatory text with the
.sr-only class which is only visible to assitive devices such as screen readers. You should consider doing this if the meaning of your functionality may be ambiguous without further explanation.
<span class="sr-only">you're currently on page </span>1
When an element is visually disabled and unusable it's a good idea to also apply the
aria-hidden property to explicitly hide it in assistive devices to avoid confusion.
<a class="pagination__list__item pagination__list__item--disabled" href="#" tabindex="-1" rel="prev" aria-label="Previous"> <span aria-hidden="true"> <i class="fa fa-chevron-left"></i> </span> </a>