Cards Examples

This is Basic card example, we have 4 width variants for cards width .width-full, .width-half, .ui-card-width-300, .ui-card-width-800, .ui-card-width-900

we have 2 card classes for card container .ui-card-default, .ui-card-basic.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quisquam non laborum reiciendis architecto culpa explicabo, voluptatibus recusandae ad alias. Alias, eum. Quisquam sunt maiores, pariatur ab aut magni temporibus culpa itaque suscipit nostrum fugiat asperiores nisi eos doloremque rerum quibusdam praesentium exercitationem quo corrupti eveniet dignissimos illo debitis ullam cum? Tempora, vero dolorem? Voluptatibus impedit quo culpa sunt, harum beatae sint a vitae cumque?

Cards with half width and close button

The first card is having .width-half class and second one has .width-half class

Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quisquam non laborum reiciendis architecto culpa explicabo, voluptatibus recusandae ad alias. Alias, eum. Quisquam sunt maiores, pariatur ab aut magni temporibus culpa itaque suscipit nostrum fugiat asperiores nisi eos doloremque rerum quibusdam praesentium exercitationem quo corrupti eveniet dignissimos illo debitis ullam cum? Tempora, vero dolorem? Voluptatibus impedit quo culpa sunt, harum beatae sint a vitae cumque?

Card Header

close
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae quisquam non laborum reiciendis architecto culpa explicabo, voluptatibus recusandae ad alias. Alias, eum. Quisquam sunt maiores, pariatur ab aut magni temporibus culpa itaque suscipit nostrum fugiat asperiores nisi eos doloremque rerum quibusdam praesentium exercitationem quo corrupti eveniet dignissimos illo debitis ullam cum? Tempora, vero dolorem? Voluptatibus impedit quo culpa sunt, harum beatae sint a vitae cumque?

Cards with vertical size and shadows

cards are available with shadows .shadow-sm, .shadow-md, .shadow-lg.

seven kitcehn regels
Seven Kitchen Regels North-Indian, Mughlai, Tandoori
star 4.5
500 for Two
Check Hotel
bombay adda
Pro- Get 20% off
Bombay Adda North-Indian, Mughlai, Tandoori
star 3.9
500 for Two
Check Hotel
yeda republic
Yeda Republic North-Indian, Mughlai, Tandoori
star 5.0
500 for Two
Check Hotel
Out Of Service.

List Of cards (Horizontals + vertical sizes)

These lists cards are responsive they adjust and grows the card content when they hit mobile size, and shrinks the content when they hit the large device.

try this using developer tool

Pro- Get 20% off
Chinese Wok (Wok Express)
₹ 254
Light eater - choice of any 1 rice/noodles, 1 sauce, 4 vegetables and 2 seasoning.
Chicken Personal Wok Bowl
₹ 254
Light eater - choice of any 1 rice/noodles, 1 sauce, 4 vegetables and 2 seasoning.