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; }