Layout Helpers
Generic classes to help with various layout requirements not specifically related to the grid system or other components.
Usage
| Class name | Effect | Remarks |
|---|---|---|
.page-wrapper and .main |
Used to distinguish between page content and the footer, so that the footer can be anchored to the bottom of the page. | Required. |
.hr |
Create a horizontal line separator. | Optional. |
.hr--light |
Lighter colour variation of the horizontal line separator. | Optional. |
.block-center |
Hard override to center block element. | Optional. |
.visually-hidden |
Hides HTML tags, but ensures it is still readable for accessiblity reasons. | Optional. |
.img-respond |
Prevent images from being wider than 100% of their context. | Optional. |
.img-respond--fill |
Make images 100% of their context all of the time. | Optional. |
.circle |
Apply circular radius and hide any overflow of content. | Optional. |
.block-visible-small |
Content is hidden on screens larger than mobile | Optional. |
.block-hidden-small |
Content is hidden on screens larger than mobile. | Optional. |