Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Bootstrap documentation

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis non dolore est fuga nobis ipsum illum eligendi nemo iure repellat, soluta, optio minus ut reiciendis voluptates enim impedit veritatis officiis.

Go somewhere

Accent borders

Add contextual border to one of the sides of card component.

Dynamic background

.card-bg element lets you use almost anything as a card background.

Link overlay

.card-link-overlay element makes whole card clickable.

Ghost style

Ghost modification makes it easy to place your card on dynamic background.

At aliquet amet vestibulum sociosqu quam sollicitudin potenti finibus, mauris convallis quis bibendum lectus dapibus maximus, imperdiet molestie netus libero sagittis tristique massa.

Card hover

With .card-bg-hover and .card-body-hover you can define content that will be shown on hover.

Card vertical group

Use card vertical groups to render cards as a single, attached element with equal width. Card groups use display: flex; to achieve their uniform sizing.

In vivamus ligula elit egestas blandit fermentum laoreet donec mattis arcu adipiscing lacus, tellus curabitur nullam maximus dolor eros fringilla gravida rhoncus aenean volutpat diam, ridiculus cursus nisl quisque cras integer condimentum a natoque venenatis montes.

Cras congue interdum facilisis luctus rutrum sodales penatibus augue, nullam habitasse suspendisse taciti tortor fames eleifend viverra at, tellus quisque mus libero justo mi ligula.

Card slider

A slideshow component for cycling through elements—images or slides of text—like a carousel. The API is really simple: just wrap your cards into .card-slider wrapper and each individual card should have .card-slider-item class. Then use .card-slider-gap-{n} and .card-slider-items-{n} classes to control items appearance.

Pellentesque porta phasellus viverra pretium torquent vehicula nascetur turpis habitant tortor rutrum, odio magna dictum aptent velit vel molestie taciti risus.

Additionally, you can pass extra arguments for Flickity plugin which powers card slider via data-options attribute. For the list of all available options please consult plugin docs.

<div class="card-slider" data-options='{"draggable": false}'>
    <article class="card-slider-item">...</article>
    <article class="card-slider-item">...</article>
    <article class="card-slider-item">...</article>
</div>

Documentation