Cards
Cards contain content and actions that relate information about a subject.
Small / Mini Cards
Not everything needs to be put out on a large banner, some prefer cute little mini tidbits of information which was exactly our thought process when designing the small and mini cards which can be triggered by using card along with the desired sizes using card---small and card---mini.
Smartphones
Starting from 10k
New Products
| Test
NEW
Implementation
Choose your Card Type and off you go!
<!-- Small Card -->
<div class="card card--small box-shadow">
<div class="card__img--small image--responsive">
<img src="https://picsum.photos/id/684/400/400">
</div>
<div class="card__content--column ">
<p class="subtitle-1 pad-12side ">Smartphones</p>
<p class="body-2 pad-12side">Starting from 10k</p>
</div>
<span class="card__icon material-icons">favorite</span>
</div>
<!-- Mini Card -->
<div class="card card--mini box-shadow">
<div class="card__img--mini image--responsive">
<img src="https://picsum.photos/id/684/400/400">
</div>
<div class="card__content--row mini--content">
<p class="subtitle-2">New Products</p>
<p class="body-2">| Test</p>
</div>
<p class="subtitle-2 card__tag">NEW</p>
</div>
Horizontal / Vertical Cards
The inputs also have a labelled variant as shown below which can be toggled by using card and then using card---vertical and card---horizontal for Vertical and Horizontal version.
The most expensive stuff you can imagine
Rs. 999
Rs. 2443
Free Shipping
The most expensive stuff you can imagine
Rs. 999
Rs. 2443
Free Shipping
To cart
Implementation
Not everyone likes to be independent. Some prefer cute little nudges!
<!-- Horizontal Card -->
<div class="card card--horizontal box-shadow">
<div class="card__contents">
<div class="card__content--column card__text">
<h5 class="header-5">Enter Card Title Here</h5>
<div class="container--row">
<!-- Enter Sub text here -->
</div>
</div>
<div class="card__content--row card__footer">
<div class="container--row">
<!-- Enter CTA Buttons Here -->
</div>
</div>
</div>
<div class="card__cover card__img--large image--responsive">
<img src="https://picsum.photos/id/684/600/400">
<div class="rating">
</div>
</div>
</div>
<!-- Vertcal Card -->
<div class="card card--vertical box-shadow">
<div class="card__cover cover--vertical image--responsive">
<img src="Enter Source Here">
<span class="material-icons card__icon">favorite</span>
</div>
<div class="card__contents--vertical">
<div class="card__content card__text--vertical">
<h5 class="header-5">The most expensive stuff you can imagine</h5>
<div class="container--row">
<p class="subtitle-1 item--sale text--primary">Rs. 999</p><p class="body-1 item--price">Rs. 2443</p>
<p class="subtitle-1 item--info text--grey">Free Shipping</p>
<p></p>
</div>
<div class="rating">
</div>
<div class="container--row">
<!-- Enter CTA Here -->
</div>
</div>
</div>
</div>Text Only / Text Overlay Cards
These Textonly cards provide concise tidbits of information in a cute little package which can be triggered by using card along with the respective states using card--text, card---text---overlay to trigger an overlay and --primary.
Hello
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi temporibus, nihil corporis omnis voluptate magnam eum laborum reiciendis cumque quis.
The most expensive stuff you can imagine
Implementation
Choices, Choices, so many beautiful choices!
<!-- Text Only Card -->
<div class="card card--text p-24 box-shadow">
<h5 class="header-5">Hello</h5>
<p class="body-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi temporibus, nihil corporis
omnis voluptate magnam eum laborum reiciendis cumque quis.</p>
<div class="container--row">
<div class="btn btn--link btn--link--expand">
<span class="material-icons btn--icon">check</span>
<a href="#" class="subtitle-1">Proceed</a>
</div>
<div class="btn btn--link btn--link--expand">
<span class="material-icons btn--icon">close</span>
<a href="#" class="subtitle-1">Dismiss</a>
</div>
</div>
</div>
Cards with Dismiss
The Cards also have a variant with a dismiss button shown below which can be toggled by using ---card along with card---icon and choose your icons for dismiss.
Smartphones
Starting from 10k
Implementation
Not everyone likes to be round and perfect. Some prefer cute corners!
<!-- Cards With Dismiss -->
<div class="card card--small box-shadow">
<div class="card__img--small image--responsive">
<img src="https://picsum.photos/id/684/400/400">
</div>
<div class="card__content--column ">
<p class="subtitle-1 pad-12side ">Smartphones</p>
<p class="body-2 pad-12side">Starting from 10k</p>
</div>
<span class="card__icon material-icons">close</span>
</div>Card With Badge /Shadow
Not everything needs to be put out on a large banner, some prefer cute little mini tidbits of information which was exactly our thought process when designing the badges for cards which can be triggered by using card along with the desired styles using box--shadow for adding box shadow and card---tag for adding Badges.
Smartphones
Starting from 10k
New Products
| Test
NEW
Implementation
Choose your Card Type and off you go!
<!-- Small Card With Shadow -->
<div class="card card--small box-shadow">
<div class="card__img--small image--responsive">
<img src="https://picsum.photos/id/684/400/400">
</div>
<div class="card__content--column ">
<p class="subtitle-1 pad-12side ">Smartphones</p>
<p class="body-2 pad-12side">Starting from 10k</p>
</div>
<span class="card__icon material-icons">favorite</span>
</div>
<!-- Mini Card With Badge -->
<div class="card card--mini box-shadow">
<div class="card__img--mini image--responsive">
<img src="https://picsum.photos/id/684/400/400">
</div>
<div class="card__content--row mini--content">
<p class="subtitle-2">New Products</p>
<p class="body-2">| Test</p>
</div>
<p class="subtitle-2 card__tag">NEW</p>
</div>