Utilities

Box Shadow

Simply add the class shadow onto any element to apply the default drop shadow.

CSS

.shadow {
	box-shadow: 0 2px 30px 0 rgba(0, 0, 60, 0.16), 0px 1px 3px 0 rgba(0, 0, 80, 0.12);
}

Borders

There are two border radius classes. Rounded that gives a slight curve on the corners and rounded-circle that will make a full circle.

CSS

.rounded {
    border-radius: .5rem;
}
.rounded-x2 {
    border-radius: 1.2rem;
}
.rounded-circle {
    border-radius: 50%;
}

Alignment

Text Alignment

Align text or images using these classes

Text left align

Text center align

Text right align

CSS

.right-align {
	text-align: right;
}
.left-align {
	text-align: left;
}
.center-align {
	text-align: center;
}

Center Image

Simply add these classes to an image. To have the image wrap content use the float classes below this section.

CSS

.img-center {
    display: block;
    margin: 0 auto;
}

Float

Float an element to the left, right or disable float using the classes below.

CSS

.float-right {
	float: right;
}
.float-left {
	float: left;
}
.float-none {
    float: none;
}

Display

Hide any element using the class display-none.

CSS

.display-none {
    display: none;
}

Colors

Text Color

Navy Blue Text

Red Text

Light Grey Text

Dark Grey Text

Background Colors

CSS

.navy {
    color: #0E2438!important;
}
.navy-bg {
    background: #0E2438!important;
}
.red {
    color: #D9282F!important;
}
.red-bg {
    background: #D9282F!important;
}
.light-grey {
    color: #EEEEEE!important;
}
.light-grey-bg {
    background: #EEEEEE!important;
}
.dark-grey {
    color: #222222!important;
}
.dark-grey-bg {
    background: #222222!important;
}

Screenreaders

To hide an element on all devices expect for screen readers use the class sr-only.

HTML

<a class="sr-only" href="#">This link is only visible on screenreaders</a>