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:

<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

<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

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

Card 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>

Card footer

<div class="k-card">
    <div class="k-card__body">
        <div class="k-card__footer">
            Footer
        </div>
    </div>
</div>

Card caption

<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

<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

<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.

Join 23000+ others and subscribe to our newsletter!