Keen | Cards

Hi, Sean

Cards

Components Card

Keen extends Bootstrap Card component with a variety of options to provide uniquely looking Card component that matches the Keen's design standards.
For more info please visit the plugin's Documentation.

Basic Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card Body Example

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

This is some text within a card body.

This is some text within a card body. You can also change colors to fit your needs

Any color will do. You can also customize the font weight

Another one for good measure :)

Titles, text, and links Example

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

List groups Example

Create lists of content in a card with a flush list group.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Kitchen sink Example

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

List groups with Header Example

Header 1

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Header 2

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Headers and Footers

Add an optional header and/or footer within a card.

Card headers can be styled by adding .card-header to <h*> and .card-footer elements.

This is my header

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

This is my footer

Blockquotes

Add an optional blockquote within a card.

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card Sizing

Use our handful of available sizing utilities to quickly set a card’s width by adding .w-* to the .card element.

Card title

With supporting text below as a natural lead-in to additional content.

Button

Card title

With supporting text below as a natural lead-in to additional content.

Button

Text Alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card Groups

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

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card Decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card Masonry Columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Heads up! Your mileage with card columns may vary. To prevent cards breaking across columns, we must set them to display: inline-block as column-break-inside: avoid isn’t a bulletproof solution yet.

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

Custom

Layout

Components

Finance Reports

Project Reports

HR Reports

Reporting Apps

User Notifications

Cards

Basic Example

Card title

Card Body Example

Titles, text, and links Example

Card title

Card subtitle

List groups Example

Kitchen sink Example

Card title

List groups with Header Example

Headers and Footers

Special title treatment

Blockquotes

Card Sizing

Card title

Card title

Text Alignment

Special title treatment

Special title treatment

Special title treatment

Card Groups

Card title

Card title

Card title

Card Decks

Card title

Card title

Card title

Card Masonry Columns

Card title that wraps to a new line

Card title

Card title

Card title

Quick Actions

Recent Bills

Latest Orders

Latest Invoices

New Comments

Recent Posts

Select A Demo