Cards - Design

Cards are a container for displaying organized content

Live Demo

Go to Code See in Page

$24.99-26.99

Content area

Jewelry

Usage

Cards have a very broad use case. They can be used to display pretty much anything, as it is just a container. Cards can be used to display a promotion, a product, an image, pretty much anything. They are useful for organizing content on a page, and work especially well in places where many things are displayed together, such as a list of products. Cards have four main areas, as you can see in the anatomy below. All four areas are optional, and you can create many different designs or layouts in a card based on which areas you use. The content can also be switched to a horizontal layout, instead of the default vertical layout.

Anatomy

1. Header
2. Media
3. Content
4. Actions
5. Container

Behavior

Cards scale horizontally to fit their container, and scale vertically to fit their content.

Cards - Implementation

Cards are a container for displaying organized content

Implementation

Below is what the skeleton implementation of a card looks like. There are some modifiers you can apply to change the look or layout, such as outlined, raised, or horizontal. The demo below looks kind of strange because the card is not in a container (besides the demo container), so it scales to fit the container. When implementing a card, it should be placed into a container that would restrict the size of the card to a level that achieves the look you are going for.

Content

<div class="card">
    <header class="card__header">
        <h1>Header</h1>
    </header>
    <div class="card__media">
        <picture>
            <source srcset="">
            <img class="image" src=""decoding="async" alt="">
        </picture>
    </div>
    <section class="card__content">
        <p>Content</p>
    </section>
    <footer class="card__actions">
        <button>Action</button>
    </footer>
</div>

.card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    display: grid;
    grid-template-areas:
        "header"
        "media"
        "content"
        "actions";
    grid-template-columns: auto;
    width: 100%;
    border-radius: .3rem;
    overflow: hidden;
    height: fit-content;
}

.card--raised {
    box-shadow: 0px 2px 1px .5px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
}

.card--outline {
    border: 1px solid #c2c2c2;
}

.card--horizontal {
    grid-template-areas:
        "media header"
        "media content"
        "actions actions";
    grid-template-columns: 1fr 2fr;
    padding: 5px;
}

.card--horizontal>.card__header {
    font-size: 18px;
}

.card__header {
    width: 100%;
    grid-area: header;
    padding-left: 10px;
    font-size: 32px;
    line-height: 1;
}

.card__media {
    grid-area: media;
    width: 100%;
}

.card__media>img {
    width: 100%;
    display: block;
    height: auto;
}

.card__content {
    width: 100%;
    grid-area: content;
    padding: 0px 10px;
    font-size: 1em;
}

.card__actions {
    grid-area: actions;
}

Outlined

Content

<div class="card card--outline">
    <header class="card__header">
        <h1>Header</h1>
    </header>
    <div class="card__media">
        <picture>
            <source srcset="">
            <img class="image" src=""decoding="async" alt="">
        </picture>
    </div>
    <section class="card__content">
        <p>Content</p>
    </section>
    <footer class="card__actions">
        <button>Action</button>
    </footer>
</div>

.card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    display: grid;
    grid-template-areas:
        "header"
        "media"
        "content"
        "actions";
    grid-template-columns: auto;
    width: 100%;
    border-radius: .3rem;
    overflow: hidden;
    height: fit-content;
}

.card--raised {
    box-shadow: 0px 2px 1px .5px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
}

.card--outline {
    border: 1px solid #c2c2c2;
}

.card--horizontal {
    grid-template-areas:
        "media header"
        "media content"
        "actions actions";
    grid-template-columns: 1fr 2fr;
    padding: 5px;
}

.card--horizontal>.card__header {
    font-size: 18px;
}

.card__header {
    width: 100%;
    grid-area: header;
    padding-left: 10px;
    font-size: 32px;
    line-height: 1;
}

.card__media {
    grid-area: media;
    width: 100%;
}

.card__media>img {
    width: 100%;
    display: block;
    height: auto;
}

.card__content {
    width: 100%;
    grid-area: content;
    padding: 0px 10px;
    font-size: 1em;
}

.card__actions {
    grid-area: actions;
}

Raised

Content

<div class="card card--raised">
    <header class="card__header">
        <h1>Header</h1>
    </header>
    <div class="card__media">
        <picture>
            <source srcset="">
            <img class="image" src=""decoding="async" alt="">
        </picture>
    </div>
    <section class="card__content">
        <p>Content</p>
    </section>
    <footer class="card__actions">
        <button>Action</button>
    </footer>
</div>

.card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    display: grid;
    grid-template-areas:
        "header"
        "media"
        "content"
        "actions";
    grid-template-columns: auto;
    width: 100%;
    border-radius: .3rem;
    overflow: hidden;
    height: fit-content;
}

.card--raised {
    box-shadow: 0px 2px 1px .5px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
}

.card--outline {
    border: 1px solid #c2c2c2;
}

.card--horizontal {
    grid-template-areas:
        "media header"
        "media content"
        "actions actions";
    grid-template-columns: 1fr 2fr;
    padding: 5px;
}

.card--horizontal>.card__header {
    font-size: 18px;
}

.card__header {
    width: 100%;
    grid-area: header;
    padding-left: 10px;
    font-size: 32px;
    line-height: 1;
}

.card__media {
    grid-area: media;
    width: 100%;
}

.card__media>img {
    width: 100%;
    display: block;
    height: auto;
}

.card__content {
    width: 100%;
    grid-area: content;
    padding: 0px 10px;
    font-size: 1em;
}

.card__actions {
    grid-area: actions;
}

Horizontal

Content

<div class="card card--horizontal">
    <header class="card__header">
        <h1>Header</h1>
    </header>
    <div class="card__media">
        <picture>
            <source srcset="">
            <img class="image" src=""decoding="async" alt="">
        </picture>
    </div>
    <section class="card__content">
        <p>Content</p>
    </section>
    <footer class="card__actions">
        <button>Action</button>
    </footer>
</div>

.card {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    display: grid;
    grid-template-areas:
        "header"
        "media"
        "content"
        "actions";
    grid-template-columns: auto;
    width: 100%;
    border-radius: .3rem;
    overflow: hidden;
    height: fit-content;
}

.card--raised {
    box-shadow: 0px 2px 1px .5px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%);
}

.card--outline {
    border: 1px solid #c2c2c2;
}

.card--horizontal {
    grid-template-areas:
        "media header"
        "media content"
        "actions actions";
    grid-template-columns: 1fr 2fr;
    padding: 5px;
}

.card--horizontal>.card__header {
    font-size: 18px;
}

.card__header {
    width: 100%;
    grid-area: header;
    padding-left: 10px;
    font-size: 32px;
    line-height: 1;
}

.card__media {
    grid-area: media;
    width: 100%;
}

.card__media>img {
    width: 100%;
    display: block;
    height: auto;
}

.card__content {
    width: 100%;
    grid-area: content;
    padding: 0px 10px;
    font-size: 1em;
}

.card__actions {
    grid-area: actions;
}

Contents

Live Demo Usage Anatomy Behavior

Basic Implementation Outline Raised Horizontal