Cards

Basic Cards
Transparent card

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.

Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

Basic Cards
Flat card
Flat card using .card-flat class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

White card
White card using .card-white class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Default card
Default card using .card-default class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Primary card
Primary card using .card-primary class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Success card
Success card using .card-success class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Warning card
Warning card using .card-warning class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Danger card
Danger card using .card-danger class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Info card
Info card using .card-info class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Bordered Cards
Custom card border
Custom card border color using .b-* class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Primary card
Primary border card using .card-border class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Danger card
Danger border card using .card-border class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Success card
Success border card using .card-border class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Warning card
Warning border card using .card-border class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Info card
Info border card using .card-border class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Top custom border
card with top success border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Bottom custom border
card with bottom success border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Top and bottom borders
card with top and bottom info borders

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Left custom border
card with left danger border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Right custom border
card with right danger border

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Left and right borders
card with left and right info borders

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Border Sizes
Basic size
Basic border size of the element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Large size
Large border size using .b-*-lg class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Extra large size
Extra large border size using .b-*-xlg class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Basic size
Basic border size of the element

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Large size
Large border size using .b-*-lg class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Extra large size
Extra large border size using .b-*-xlg class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Solid Cards
Primary solid
Primary solid card using .bg-primary class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Danger solid
Danger solid card using .bg-danger class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Success solid
Success solid card using .bg-success class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Warning solid
Warning solid card using .bg-warning class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Info solid
Info solid card using .bg-info class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Custom color
Solid card with custom color using .bg--* class

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Chats
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
user
Jane Elliott You just got LITT...
1:10 AM
4
user
Florence Douglas Wrong. You take the gun...
9:14 PM
23
user
Jacqueline Howell I was thinking that we...
Yesterday
user
Eugine Turner Mike, I know everything
Yesterday
chat

Sushi tonight?

10:14 am
chat

Pizza?

We had sushi last time!

For me one Vegetariana! Plus some chili oil on it!

10:15 am
chat

Done. Delivery takes 5 minutes!

10:16 am
chat

Awesome! See you later! : )

Just now