Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, and powerful display options.

Card

The following are the default, rounded, and center styles:

card
Card title
Nullam id dolor id nibh ultricies vehicula ut id elit.
card rounded
Card title
Nullam id dolor id nibh ultricies vehicula ut id elit.
card center
Card title
Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__image">
            <img src="/images/developer/ui/placeholder-16-9.png" alt="card">
        </div>
        <div class="k-card__header">
            Card title
        </div>
        <div class="k-card__section">
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </div>
        <div class="k-card__footer">
            <a class="k-button k-button--primary" href="#">Link</a>
        </div>
    </div>
</div>

<div class="k-card k-card--rounded">
    <div class="k-card__body">
        <div class="k-card__image">
            <img src="/images/developer/ui/placeholder-16-9.png" alt="card rounded">
        </div>
        <div class="k-card__header">
            Card title
        </div>
        <div class="k-card__section">
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </div>
        <div class="k-card__footer">
            <a class="k-button k-button--primary" href="#">Link</a>
        </div>
    </div>
</div>

<div class="k-card k-card--center">
    <div class="k-card__body">
        <div class="k-card__image">
            <img src="/images/developer/ui/placeholder-16-9.png" alt="card center">
        </div>
        <div class="k-card__header">
            Card title
        </div>
        <div class="k-card__section">
            Nullam id dolor id nibh ultricies vehicula ut id elit.
        </div>
        <div class="k-card__footer">
            <a class="k-button k-button--primary" href="#">Link</a>
        </div>
    </div>
</div>

Card: image only

Card: image only
<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__image">
            <img src="/images/developer/ui/placeholder-16-9.png" alt="Card: image only">
        </div>
    </div>
</div>

Card: icon only

<div class="k-card k-card--center">
    <div class="k-card__body">
        <div class="k-card__section">
          <span class="k-icon-document-document k-icon--accent k-icon--size-huge" aria-hidden="true"></span>
        </div>
    </div>
</div>

Card header

Title
<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__header">
            Title
        </div>
    </div>
</div>

Card section

Section
Section
<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__section default">
            Section
        </div>
    </div>
</div>

<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__section k-card__section--small-spacing">
            Section
        </div>
    </div>
</div>
<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__footer">
            Footer
        </div>
    </div>
</div>

Card caption

Section
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Section
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__section">
            Section
        </div>
    </div>
    <div class="k-card__caption default">
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    </div>
</div>

<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__section">
            Section
        </div>
    </div>
    <div class="k-card__caption k-card__caption--overflow">
        Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    </div>
</div>

Selected card

Title
Section
<div class="k-card k-is-selected">
    <div class="k-card__body">
        <div class="k-card__header">
            Title
        </div>
        <div class="k-card__section">
            Section
        </div>
    </div>
    <label class="k-card__caption">
        <input type="checkbox" checked> Label
    </label>
</div>

Card background

Section 1

Section 2

Section 3

Section 4

<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__image k-card__image--background" style="background-image: url(/images/developer/ui/placeholder-16-9.png);"></div>
        <div class="k-card__section">
            <p>Section 1</p>
            <p>Section 2</p>
            <p>Section 3</p>
            <p>Section 4</p>
        </div>
    </div>
</div>

Need Help?

Let our developers personally assist you. You can ask development related questions in our Support Center. Only for Business or Agency subscribers.