Cards
Card is a small flexible container
with wide variety of content.
Cards can be used on team pages ,
product landing site and many more.
All Content of the cards can be altered completely. You can add/remove images ,
buttons , links etc.
Text can be easily aligned in cards with the text utilities. To know more about
text utiliy click here.
In the card given below is 100% editable..you can remove the social icon links and
add
text or any other components,you can alter the color theme as well.
Static card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto
adipisci
reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
<div class="stat-card">
<div class="img-container">
<img src="..." class="card-img">
</div>
<div class="top-text">
<div class="card-name text-dark">
Json Lea</div>
<p class ="card-sub-head">
Web Developer</p>
</div>
<div class="stat-bottom-text">
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto
adipisci
reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!</div>
<button type="button" class="button button-green
button-bread text-bright">Button</button>
</div>
</div>
Hover card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto
adipisci
reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!
<div class="card">
<div class="img-container">
<img src="..." class="card-img">
</div>
<div class="top-text">
<div class="card-name text-dark">
Json Lea</div>
<p class ="card-sub-head">
Web Developer</p>
</div>
<div class="bottom-text">
<div class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quaerat iusto
adipisci
reprehenderit quasi cum perspiciatis, minima reiciendis magni quam!</div>
<button type="button" class="button button-green
button-bread text-bright">Button</button>
</div>
</div>
Flip card
Scartch!
User interface designer and
front-end developer
<div class="flip-card-container">
<div class="flip-card front-face">
<img src="img/avatar.png">
</div>
<div class="flip-card back-face ">
<img src="img/avatar.png ">
<div class="flip-card-info ">
<div class="flip-card-title ">
Scartch!
</div>
<p>
User interface designer and <br>front-end developer</p>
</div>
<ul>
<a href="# "class="bg-dark text-bright"><i class="fab fa-facebook-f "></i></a>
<a href="# "class="bg-dark text-bright"><i class="fab fa-twitter "></i></a>
<a href="# "class="bg-dark text-bright"><i class="fab fa-instagram "></i></a>
<a href="# "class="bg-dark text-bright"><i class="fab fa-youtube "></i></a>
</ul>
</div>
</div>
