Cards are used to group and display content in a way that is easily readable.
Basic Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Card with Badge
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
<span class="card__badge">new!!</span>
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Closeable Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
<span class="material-icons card__close" title="close">close</span>
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Card with only icons
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn card__only-iconbtn">Read</button>
<button class="card__txtbtn card__only-iconbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Card with only buttons
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn card__only-txtbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn card__only-txtbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn card__only-txtbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Card with header at the top
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside card__with-header">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header card__with-header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body card__with-header">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Card with text over image
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header card__txt-over-img">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Horizontal Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--row">
<div class="card__aside">
<div class="card__figure card__horizontal">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body card__horizontal">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>Text only Card
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus incidunt facilis eligendi numquam odio aspernatur commodi fugiat amet nemo ad!
<div class="card flex--column">
<div class="card--hover flex--column">
<div class="card__aside">
<div class="card__figure card__text-only">
<img src="https://picsum.photos/350/200" alt="picsum image" class="card__image" />
</div>
</div>
<div class="card__header">
<h1 class="card__title">Card Template</h1>
<h3 class="card__subtitle">by Aryak Lahane</h3>
</div>
<div class="card__body">
<p class="card__copy flex--column">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus
incidunt facilis eligendi numquam odio aspernatur commodi fugiat
amet nemo ad!
</p>
</div>
</div>
<div class="card__footer">
<div class="card__actions flex--row">
<button class="card__txtbtn">Read</button>
<button class="card__txtbtn">Bookmark</button>
<button class="card__iconbtn" title="like">
<span class="material-icons">favorite_outline</span>
</button>
<button class="card__iconbtn" title="share">
<span class="material-icons"> share </span>
</button>
<button class="card__iconbtn" title="more options">
<span class="material-icons"> more_vert </span>
</button>
</div>
</div>
</div>