Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Gradient Card & Gradient Card With Analytics

Here is the gradient card with flat image for all gradient classes please check css-color.html.

50% Off

On apple watch

20% Off

On Canon Printer

40% Off

On apple macbook

60% Off

On any game

add_shopping_cart

Orders

690

New

6,00,00

perm_identity

Clients

1885

New

1,12,900

timeline

Sales

80%

Growth

3,42,230

attach_money

Profit

$890

Today

$25,000

Gradient Chart Card

Here is the card with gradient line chart of ChartJS

+ 42.6%

Members online

360 avg

3,450
+ 12%

Current server load

23.1% avg

+2500
+ $900

Today's revenue

$40,512 avg

$ 22,300

Card With Redio & Chips

Video

Default Quality

720p close
1080p close

Save Video Quality

Music

Default Quality

192kb close
320kb close

Save Video Quality

iPad

Storage

64gb close
128gb close

Color

E-commerce Card

Here is the standard card with an image thumbnail.

Apple Watch

The Apple Watch,
all time witch will suit any time

The Asics Shoes

Buy White Shoes for Men
online Huge selection of White Men

iPhone

The Apple iPhone,
all time witch will suit any time

Macbook Pro

Buy Macbook
online Huge selection of Apple

iPhone 8

Buy iPhone
online Huge selection of Apple

Apple Watch

Buy Watch
online Huge selection of Apple

Horizontal Advanced Card

Here is the standard card with a horizontal image.

Card Title

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,

Packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover.
Web page editors now use Lorem Ipsum as their default.

Social Card

Here you can add a card that reveals more information once clicked. Just add the card-reveal div with a span.card-title inside to make this work. Add the class activator to an element inside the card to allow it to open the card reveal.

EMMA STONE

Designer @ D&G

person_add

followers

124k

person

following

432

PITER PAN

Designer @ D&G

person_add

followers

70k

person

following

192

CHARLOTTE DOE

CEO

person_add

followers

120k

person

following

89

Shoes Card

For a simpler card with less markup, try using a card panel which just has padding and a shadow effect

Order Online

Best Sport Shoes in the world

Order Now