1. Home Icon
  2. Web Style Guide
  3. Visual Breaks, The Grid & Misc. Classes

Web Style Guide

Visual Breaks, The Grid & Misc. Classes

Visual Breaks & <hr>

Minor elements with a huge impact. Use these classes and elements to break up content. The <hr> element is a block-level element, meaning it will fill 100% of the container space.

These breaks are all horizontal. Make sure to clear your floated elements, otherwise the hr may not display correctly.

Default

<hr>

Dark

<hr class="dark-line">

Large

This line is dark and heavy, good for breaks between large chunks of content.

<hr class="large-line">

Transparent

Add some extra space below content. Nothing to see here as it is transparent. This adds 32px margin.

<hr class="transparent-line">

HR Bars

The purpose of these is primarily for under sub-headings. There is a red and gray option, each below. These bars only align left and are a fixed width.

Example with gray bar.

<hr class="gray-bar">

Example with red bar.

<hr class="red-bar">

You can also center the bar by adding the class center-block.

Example with gray bar centered.

<hr class="gray-bar center-block">

Example with red bar centered.

<hr class="red-bar center-block">

The Grid

The grid framework comes directly from Bootstrap. For more information check out The Grid. The main thing to know is that you always have columns wrapped in rows.

View the Grid

Remove Gutter

Reomves gutter for columns on container-fluid. Add the class no-gutter to a div with the class row which contains divs with the column classes..

<div class="row no-gutter">

Adding Top Padding

These are three helper classes to add padding to the top of a div. Primarily the use case is for rows where you need extra space at top, but it these can be used on any element to create extra padding.

<div class="padding-top-sm">
<div class="padding-top-md">
<div class="padding-top-lg">
This div has the class padding-top-sm added to it.
This div has the class padding-top-md added to it.
This div has the class padding-top-lg added to it.

Adding Bottom Padding

These are three helper classes to add padding to the top of a div. Primarily the use case is for rows where you need extra space at top, but it these can be used on any element to create extra padding.

<div class="padding-bottom-sm">
<div class="padding-bottom-md">
<div class="padding-bottom-lg">
This div has the class padding-bottom-sm added to it.
This div has the class padding-bottom-md added to it.
This div has the class padding-bottom-lg added to it.

Removing Padding from an Element

If you need to remove padding from any element add the appropriate class, see below.

<div class="no-padding-top">
<div class="no-padding-bottom">
<div class="no-padding-right">
<div class="no-padding-left">

Removing Margin from an Element

If you need to remove margin from any element add the appropriate class, see below.

<div class="no-margin-top">
<div class="no-margin-bottom">
<div class="no-margin-right">
<div class="no-margin-left">

Adding Top Margin

Add these classes to an element to add or modify the margin top.

<div class="margin-top-sm">
<div class="margin-top-md">
<div class="margin-top-lg">

Adding Bottom Margin

Add these classes to an element to add or modify the margin bottom.

<div class="margin-bottom-sm">
<div class="margin-bottom-md">
<div class="margin-bottom-lg">

Misc. Classes

Just a collection of cool classes to make life a little easier.

Contextual Colors

This text uses the text-muted class.

This text uses the text-primary class.

This text uses the text-success class.

This text uses the text-info class.

This text uses the text-warning class.

This text uses the text-danger class.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Dark Links

Make a link dark instead of red (primary) by adding the class dark-link to an anchor tag. You can also use dark-link on the parent element.

<a class="dark-link">DARK LINK</a>

Quick Floats

Float elements left or right.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

Center Content Blocks

Adds display block and margin: auto to an element.

<div class="center-block">...</div>

Clearfix

Clear floats add .clearfix to any element.

<div class="clearfix"></div>

Screen Reader and Keyboard Navigation Content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

The following is only visible to screen readers... trust us.

Skip to Main Content <a class="sr-only sr-only-focusable" href="#content">Skip to Main Content</a>
Back to Style Guide Home