Getting Started
Components
Cards
Cards represent a surface that displays content of a single topic. You can use Nova's predefined classes to create responsive and diffrent varients cards.
Basic Card
This card contains basic info, like image, little description, and cta.
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--basic">
<div class="card__image-container">
<img
src="your-img-url.png"
alt=""
class="card__image"
/>
</div>
<div class="card__content">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
<p class="card__info">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons material-icon-size card__btn card__btn--icon">favorite</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">share</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">more_vert</span>
</div>
</div>
</section>
Card With Badges
This type of card attract user attention by showing them some important points like discount details, any offer, any deadline.
30% Off For subscription today
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--basic">
<div class="card__image-container">
<img
src="your-img-url"
alt=""
class="card__image"
/>
<div class="card__badge">
<p>30% Off For subscription today</p>
</div>
</div>
<div class="card__content">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
<p class="card__info">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons material-icon-size card__btn card__btn--icon">favorite</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">share</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">more_vert</span>
</div>
</div>
</section>
Card With Dismiss
Dismissable cards can be removed from the view. Require you to implement javascript.
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--basic">
<div class="card__image-container">
<img
src="Your-img-url.png"
alt=""
class="card__image"
/>
<div class="card__dismiss">
<span class="material-icons">clear</span>
</div>
</div>
<div class="card__content">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
<p class="card__info">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons material-icon-size card__btn card__btn--icon">favorite</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">share</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">more_vert</span>
</div>
</div>
</section>
Card With Text Overlay
Text information will be displayed over image.
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--text-over-media">
<div class="card__image-container">
<img
src="Your-img-url"
alt=""
class="card__image"
/>
<div class="card__content-above">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
</div>
</div>
<div class="card__content">
<p class="card__info">
Visit these 10 beautiful places.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons card__btn card__btn--icon">favorite_border</span>
<span class="material-icons card__btn card__btn--icon">share</span>
<span class="material-icons card__btn card__btn--icon">more_vert</span>
</div>
</div>
</section>
Text Only Card
This is basic card without images.
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--basic">
<div class="card__content">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
<p class="card__info">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons material-icon-size card__btn card__btn--icon">favorite</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">share</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">more_vert</span>
</div>
Horizontal/Vertical Card
This is a horizontal varients of previous cards.
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--horizontal">
<div class="card__image-container">
<img
src="Your-img-url.png"
alt=""
class="card__image"
/>
</div>
<div class="card__content">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
<p class="card__info">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons material-icon-size card__btn card__btn--icon">favorite</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">share</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">more_vert</span>
</div>
Cards With Shadow
Here we have added box shadow to give them more user friendly look.
Our Changing Planet
Visit ten places on our planet that are undergoing the biggest changes today.
<section class="card card--shadow">
<div class="card__image-container">
<img
src="your-img-url.png"
alt=""
class="card__image"
/>
</div>
<div class="card__content">
<h3 class="card__title">Our Changing Planet</h3>
<p class="card__author">by Manish Devrani</p>
<p class="card__info">
Visit ten places on our planet that are undergoing the biggest
changes today.
</p>
</div>
<div class="card__navigation">
<div class="row">
<button class="card__btn card__btn--text">Read</button>
<button class="card__btn card__btn--text">Bookmark</button>
</div>
<div class="row">
<span class="material-icons material-icon-size card__btn card__btn--icon">favorite</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">share</span>
<span class="material-icons material-icon-size card__btn card__btn--icon">more_vert</span>
</div>