Cards

Useful for grouping information into distinct content blocks. Can be placed in multiple configurations depending on the type of information you need to display. With minimal CSS you can create multiple card layouts.

Basic Card

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card {
    @include elr-card(lighten($link-color, 40%), $link-color, null, 20px, 0, 5px);
}

Basic Card with Centered Content

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card-border card-centered">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

Image Cards

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card-border">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <figure class="elr-card-image">
                <img src="/images/cat11.jpg" />
            </figure>
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

Full-Width Image Card

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card">
    <div class="elr-card-header">
        <figure class="elr-card-full-image">
            <img src="/images/cat11.jpg" />
        </figure>
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card {
    @include elr-card(lighten($link-color, 40%), $link-color, null, 20px, 0, 5px);
}

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card-border">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <figure class="elr-card-image">
            <img src="/images/cat11.jpg" />
        </figure>
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
        <figure class="elr-card-full-image">
            <img src="/images/cat11.jpg" />
        </figure>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card {
    @include elr-card(lighten($link-color, 40%), $link-color, null, 20px, 0, 5px);
}

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card-border">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
        <figure class="elr-card-image">
            <img src="/images/cat11.jpg" />
        </figure>
    </div>
</div>

Sass

.card {
    @include elr-card(lighten($link-color, 40%), $link-color, null, 20px, 0, 5px);
}

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?

HTML

<div class="card">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
        <figure class="elr-card-full-image">
            <img src="/images/cat11.jpg" />
        </figure>
    </div>
</div>

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

Thumbnail Cards

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam iste quasi quam explicabo eaque non minima molestias consectetur, cum tenetur, impedit mollitia cupiditate adipisci necessitatibus.

HTML

<div class="card-border">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <figure class="elr-card-thumbnail elr-card-thumbnail-round">
                <img src="/images/paris5.jpg" />
            </figure>
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

Title of Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam iste quasi quam explicabo eaque non minima molestias consectetur, cum tenetur, impedit mollitia cupiditate adipisci necessitatibus.

HTML

<div class="card-border card-centered">
    <div class="elr-card-header">
        <div class="elr-header-content">
            <figure class="elr-card-thumbnail elr-card-thumbnail-round">
                <img src="/images/paris5.jpg" />
            </figure>
            <h2 class="elr-card-title">Title of Card</h2>
        </div>
    </div>
    <div class="elr-card-body">
        <div class="elr-card-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem aspernatur cum culpa quasi deleniti. Accusamus nobis quo labore iure amet non, nihil corporis?</p>
        </div>
    </div>
    <div class="elr-card-footer">
        <div class="elr-card-actions">
            <a href="#" class="elr-button elr-button-primary">Button Link</a>
        </div>
    </div>
</div>

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

Contact Cards

Location

Apple1 Infinite LoopCupertino, CA 95014United States of America

HTML

Sass

.card-border {
    @include elr-card($white, $link-color, $light-grey, 20px, 0, 5px);
}

.card-address { @include elr-address; }

Labels

Labels can display small amounts to information to users. They are expecially useful when the user needs to complete an action such as liking a post.

They can also be used to display groups of data. Ex. Tags on a blog post.

Label
Likes20
20

HTML

<div class="label">
    <span class="label-title">Label</span>
</div>
<div class="label">
    <span class="label-icon fa.fa-heart"></span>
    <span class="label-title">Likes</span>
    <span class="label-value">20</span>
</div>
<div class="label">
    <span class="label-icon fa.fa-heart"></span>
    <span class="label-value">20</span>
</div>

Sass

.label {
    @include elr-label;
    margin-bottom: 5px;
    margin-right: 10px;
}

Dismissible Labels

These labels are useful when you need to communicate feedback to the user.

Requires JavaScript to make the label dismissible. Example JavaScript is included in the source code below.

Dogs
Cats

HTML

<div class="label">
    <span class="label-icon fa fa-paw"></span>
    <span class="label-title">Dogs</span>
    <span class="fa.fa-times label-close"></span>
</div>
<div class="label">
    <span class="label-icon fa fa-paw"></span>
    <span class="label-title">Cats</span>
    <span class="fa.fa-times label-close"></span>
</div>

Sass

.label {
    @include elr-label;
    margin-bottom: 5px;
    margin-right: 10px;
}

JavaScript

$('.label-close').on('click', function() {
    $(this).parent('.label').fadeOut(300, function() {
        $(this).remove()
    });
});

Context Labels

These labels contain some type of context that lets the user know that they should take action.

These are ideal when you want to give the user a nudge to complete an action or warn them of a potentially destructive action like deleting content.

Information
Danger
Warning
Success
Muted

HTML

<div class="label label-info">
    <span class="label-title">Information</span>
</div>
<div class="label label-danger">
    <span class="label-title">Danger</span>
</div>
<div class="label label-warning">
    <span class="label-title">Warning</span>
</div>
<div class="label label-success">
    <span class="label-title">Success</span>
</div>
<div class="label label-muted">
    <span class="label-title">Muted</span>
</div>

Sass

.label {
    @include elr-label;
    margin-bottom: 5px;
    margin-right: 10px;
}

.label-info { @include elr-label-context('info'); }
.label-danger { @include elr-label-context('danger'); }
.label-warning { @include elr-label-context('warning'); }
.label-success { @include elr-label-context('success'); }
.label-muted { @include elr-label-context('muted'); }

Corner Labels

These labels should be used to add information or context to content blocks. Ex. New articles or "liked" posts.

Note: Corner labels must be placed in a container with position relative or absolute.

HTML

<div class="corner-label-box">
    <div class="label-corner">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-heart"></span>
    </div>
</div>
<div class="corner-label-box">
    <button class="label-corner-right">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-save"></span>
    </div>
</div>
    </button>
<div class="corner-label-box">
    <div class="label-corner-bottom">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-heart"></span>
    </div>
</div>
<div class="corner-label-box">
    <div class="label-corner-bottom-right">
        <div class="label-triangle"></div>
        <span class="label-icon fa fa-save"></span>
    </div>
</div>

Sass

.label-corner { @include elr-label-corner(top, left, $accent-color); }
.label-corner-right { @include elr-label-corner(top, right, $success-color); }
.label-corner-bottom { @include elr-label-corner(bottom, left, $link-color); }
.label-corner-bottom-right { @include elr-label-corner(bottom, right, $success-color); }

.corner-label-box {
    @include elr-square(250px);
    background-color: $light-grey;
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;

    &:nth-child(3) {
        clear: left;
    }
}

Ribbon Labels

These labels should be used to add information or context to content blocks. Ex. New articles or "liked" posts.

Note: Corner labels must be placed in a container with position relative or absolute.

New Article!

HTML

<div class="corner-label-box">
    <div class="label-ribbon">
        <span class="label-title">New Article!</span>
    </div>
</div>

Sass

.label-ribbon {
    @include elr-label-ribbon;
}

Thumbnails

Thumbnails are smaller images typically used in content boxes or cards. Sometimes they are links to the larger version of an image.

They can have rounded corners or be made into circles.

HTML

<figure class="elr-thumbnail">
    <img src="images/cat11.jpg" /gt;
</figure>
<figure class="rounded-thumbnail">
    <img src="images/paris3.jpg" /gt;
</figure>
<figure class="round-thumbnail">
    <img src="images/cat.jpg" /gt;
</figure>

Sass

.elr-thumbnail,
.rounded-thumbnail,
.round-thumbnail {
    float: left;
    margin-right: 20px;
}

.elr-thumbnail { @include elr-thumbnail; }
.rounded-thumbnail { @include elr-thumbnail($white, 150px, 125px, 5px); }
.round-thumbnail { @include elr-thumbnail($white, 150px, null, round); }