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
Web Developer
<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
Web Developer
<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
<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>