Defualt Button

HTML

<a class="elr-button elr-button-primary">Button</a>

Sass

@include elr-helper-classes;

Simple Context Buttons

HTML

<a class="elr-button elr-button-danger">Button</a>
<a class="elr-button elr-button-warning">Button</a>
<a class="elr-button elr-button-success">Button</a>
<a class="elr-button elr-button-info">Button</a>
<a class="elr-button elr-button-muted">Button</a>

Sass

@include elr-helper-classes;

Headings

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading

HTML

<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>

Sass

@include elr-base;

This is an h3 styled as an h1 heading

This is an h3 styled as an h2 heading

This is an h4 styled as an h3 heading

This is an h3 styled as an h4 heading

This is an h3 styled as an h5 heading

This is an h3 styled as an h6 heading

HTML

<h3 class="h1">This is an h3 styled as an h1 heading</h3>
<h3 class="h2">This is an h3 styled as an h2 heading</h3>
<h4 class="h3">This is an h4 styled as an h3 heading</h4>
<h3 class="h4">This is an h3 styled as an h4 heading</h3>
<h3 class="h5">This is an h3 styled as an h5 heading</h3>
<h3 class="h6">This is an h3 styled as an h6 heading</h3>

Sass

@include elr-base;

Layout helper classes can be used to style layouts using just CSS classes. They can be especially useful in CMS content where CSS is not easily accessed.

Float Boxes Left or Right

Uses traditional CSS floats to position content.

Left

Right

.elr-pull-left
.elr-pull-right

HTML

<div class="elr-pull-left">
    <p>Left</p>
</div>
<div class="elr-pull-right">
    <p>Right</p>
</div>

Sass

@include elr-helper-classes;

Center Block

Uses margin auto to position a block in the center of its container. Block must have a set width.

Center Block

.elr-center-block

HTML

<div class="box elr-center-block">
    <p>Center Block</p>
</div>

Sass

@include elr-helper-classes;

Clearfix

Clears a container.

Left

Right

.elr-clear

Screen Readers

Add content for screen readers only. This content will be hidden visually.

Hello Screen Reader

.elr-screen-reader

Layout Reset Classes

Remove layout styles from elements

Default Box. Has margin, padding, background color, and border applied.

HTML

Sass

@include elr-helper-classes;
.elr-no-margin

HTML

Sass

@include elr-helper-classes;
.elr-no-padding

HTML

Sass

@include elr-helper-classes;
.elr-no-float

HTML

Sass

@include elr-helper-classes;
.elr-no-background

HTML

Sass

@include elr-helper-classes;
.elr-no-border

HTML

Sass

@include elr-helper-classes;

Overflow Classes

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

Default Box

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-hidden

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-scroll

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-scroll-x

HTML

Sass

@include elr-helper-classes;

This box is too big for its container

.elr-o-scroll-y

HTML

Sass

@include elr-helper-classes;

Flex Layout Classes

.flex
.flex-column
.flex-wrap
.flex-center
.flex-baseline
.flex-stretch
.flex-start
.flex-end
.flex-justify
.flex-auto
.flex-grow
.flex-first
.flex-last

Lists

Unordered List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six

Ordered List

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
  5. Item Five
  6. Item Six

Definition List

Definition One
J. Chiles: So we got an attractive woman, wearing a bra, no top, walkin' around in broad daylight. She's flouting society's conventions!
Definition Two
George: She's got a little Marissa Tomei thing goin' on. Jerry: Ah, too bad you've got a little George Costanza thing goin' on.
Definition Three
Newman: I mean parcels are rarely damaged during shipping. Jerry: Define rarely. Newman: Frequently.

Unstyled List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
.elr-unstyled-list

Inline List

  • Item One
  • Item Two
  • Item Three
  • Item Four
  • Item Five
  • Item Six
.elr-inline-list

Positioning Utilities

.elr-static
.elr-absolute
.elr-relative
.elr-fixed

Positioning Utilities

.elr-block
.elr-inline
.elr-inline-block
.elr-none

CSS Reset

Responsive Classes

Hide content based on window size.

Resize your window to see how it works

This content is hidden on all screens

.elr-hide

This content is hidden on screens larger than 768px

.elr-hide-desktop

This content is hidden on screens smaller than 768px and larger than 568px

.elr-hide-tablet

This content is hidden on screens smaller than 768px

.elr-hide-tablet.elr-hide-mobile

This content is hidden on screens smaller than 568px

.elr-hide-mobile

Typography

Bold

.elr-bold

Italic

.elr-italic

Underline

.elr-underline

Uppercase

.elr-uppercase

Smaller Text

.elr-text-small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, deleniti amet sequi fugiat voluptates veniam maxime. Officia consequatur quasi numquam ad enim et quos rem accusantium dolore dolores. Itaque, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque cupiditate accusantium, doloribus excepturi, nobis vel consectetur quidem harum, eum esse laboriosam qui quo quisquam at officia ab possimus vero sapiente a necessitatibus ipsam porro nemo. Adipisci numquam velit maiores obcaecati dignissimos saepe, soluta architecto, facilis quidem, nostrum dolorum eius.

.elr-text-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, deleniti amet sequi fugiat voluptates veniam maxime. Officia consequatur quasi numquam ad enim et quos rem accusantium dolore dolores. Itaque, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque cupiditate accusantium, doloribus excepturi, nobis vel consectetur quidem harum, eum esse laboriosam qui quo quisquam at officia ab possimus vero sapiente a necessitatibus ipsam porro nemo. Adipisci numquam velit maiores obcaecati dignissimos saepe, soluta architecto, facilis quidem, nostrum dolorum eius.

.elr-text-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, deleniti amet sequi fugiat voluptates veniam maxime. Officia consequatur quasi numquam ad enim et quos rem accusantium dolore dolores. Itaque, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque cupiditate accusantium, doloribus excepturi, nobis vel consectetur quidem harum, eum esse laboriosam qui quo quisquam at officia ab possimus vero sapiente a necessitatibus ipsam porro nemo. Adipisci numquam velit maiores obcaecati dignissimos saepe, soluta architecto, facilis quidem, nostrum dolorum eius.

.elr-text-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, deleniti amet sequi fugiat voluptates veniam maxime. Officia consequatur quasi numquam ad enim et quos rem accusantium dolore dolores. Itaque, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque cupiditate accusantium, doloribus excepturi, nobis vel consectetur quidem harum, eum esse laboriosam qui quo quisquam at officia ab possimus vero sapiente a necessitatibus ipsam porro nemo. Adipisci numquam velit maiores obcaecati dignissimos saepe, soluta architecto, facilis quidem, nostrum dolorum eius.

.elr-text-justified

Muted

.elr-text-muted

Danger

.elr-text-danger

Error

.elr-text-error

Info

.elr-text-info

Warning

.elr-text-warning

Success

.elr-text-success
Marked Text
<mark>Marked Text</mark>

Highlighted Text

.elr-highlight

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, deleniti amet sequi fugiat voluptates veniam maxime. Officia consequatur quasi numquam ad enim et quos rem accusantium dolore dolores. Itaque, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque cupiditate accusantium, doloribus excepturi, nobis vel consectetur quidem harum, eum esse laboriosam qui quo quisquam at officia ab possimus vero sapiente a necessitatibus ipsam porro nemo. Adipisci numquam velit maiores obcaecati dignissimos saepe, soluta architecto, facilis quidem, nostrum dolorum eius.

<p>
Small Text
<small>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, deleniti amet sequi fugiat voluptates veniam maxime. Officia consequatur quasi numquam ad enim et quos rem accusantium dolore dolores. Itaque, ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque cupiditate accusantium, doloribus excepturi, nobis vel consectetur quidem harum, eum esse laboriosam qui quo quisquam at officia ab possimus vero sapiente a necessitatibus ipsam porro nemo. Adipisci numquam velit maiores obcaecati dignissimos saepe, soluta architecto, facilis quidem, nostrum dolorum eius.

Citation
<blockquote>