Alignment, Spacing & Visibility

You can adjust text alignment and spacing using a few simple CSS classes.

Text Alignment

Alignment	Class	Scss `@extend`
Left	`.text-left`	`@extend %text-left;`
Centered	`.text-center`	`@extend %text-center;`
Right	`.text-right`	`@extend %text-right;`

Floats

Float	Class	Scss `@extend`
Left	`.float-left`	`@extend %float-left;`
Centered	`.float-center`	`@extend %float-center;`
Right	`.float-right`	`@extend %float-right;`

Note: Clear floats by wrapping floated content in a <div> with the .group class.

Spacing

Top	Bottom	Class	Scss `@extend`
0	0	`.no-space`	`@extend %no-space;`
Default	0	`.no-space-bottom`	`@extend %no-space-bottom;`
0	Default	`.no-space-top`	`@extend %no-space-top;`
Default	2em	`.space-bottom`	`@extend %space-bottom;`
Default	~.471em	`.space-bottom-small`	`@extend %space-bottom-small;`
~.824em	Default	`.space-top`	`@extend %space-top;`

Screen Readers

If you have text that you don't want displayed on screen, but that should still be in the HTML for screen readers (for example, a search form label), simply apply the .screen-reader class. This will shift content off-screen, but screen readers can still read it.