Keen | Cards
Description: Bootstrap card examples

# Customer Relationship Management

New Order

### Cards

Reports
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 :)
Another one for good measure :)
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

### Blockquotes

Add an optional blockquote within a card.
Quote

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

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

##### Card title

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

##### Card title

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

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

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

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

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

### Quick Actions

Orders
Uploades
Products
Customers
Blog Posts
Settings
02:30 PM
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall
Yestardey
FlyMore design mock-ups been uploadet by designers Bob, Naomi, Richard
PSD, Sketch, AJ
Aug 13,2018
Meeting with Ken Digital Corp ot Unit14, 3 Edigor Buildings, George Street, Loondon
England, BA12FJ
Meeting, Customer
May 09, 2018
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall

### Recent Bills

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Orders

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Invoices

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### New Comments

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Recent Posts

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View
Notifications
Enable notifications:
Enable audit log:
Notify on new orders:
Orders
Enable order tracking:
Enable orders reports:
Allow order status auto update:
Customers
Enable customer singup:
Enable customers reporting:
Notifiy on new customer registration:

- Demos

### Select A Demo

Demo 1
Default RTL Version
Demo 2
Default RTL Version
Demo 3
Default RTL Version
Demo 4
Default RTL Version
Demo 5
Default RTL Version
Demo 6
Default RTL Version
Demo 7
Coming soon
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!