##### Advanced Cards

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

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

Off On
Music

Default Quality

192kb close
320kb close

Save Video Quality

Off On
iPad

Storage

64gb close
128gb close

Color

Glod Black

#### E-commerce Card

Here is the standard card with an image thumbnail.

###### Apple Watch

The Apple Watch,
all time witch will suit any time

$ 299/-
The Asics Shoes

Buy White Shoes for Men
online Huge selection of White Men

$ 159/-

###### iPhone

The Apple iPhone,
all time witch will suit any time

$ 299/-
Macbook Pro

Buy Macbook
online Huge selection of Apple

$ 1,249/-
iPhone 8

Buy iPhone
online Huge selection of Apple

$ 769/-
Apple Watch

Buy Watch
online Huge selection of Apple

$ 269/-

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

Button

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

share

##### EMMA STONE

Designer @ D&G

person_add

followers

124k

person

following

432

share

##### PITER PAN

Designer @ D&G

person_add

followers

70k

person

following

192

share

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

- Nike
- Puma
- Reebok

add

- help_outline
- widgets
- today
- mail_outline