Elements
These modular elements can be readily used and customized across pages and in different blocks.
Cards <> show code
<!-- Team Card style -->
<div class="card team-card">
<div class="card_img">
<img class="card-img-top" src="img/normal-img/staff-img-1.jpg">
<div class="hover-overlay effect-transformY">
<div class="overlay-content social-icons">
<a href="" class="icon icon-circle">
<i class="fa fa-facebook"></i>
</a>
<a href="" class="icon icon-circle">
<i class="fa fa-twitter"></i>
</a>
<a href="" class="icon icon-circle">
<i class="fa fa-linkedin"></i>
</a>
<a href="" class="icon icon-circle">
<i class="fa fa-pinterest-p"></i>
</a>
</div>
</div>
</div>
<div class="card-body text-center">
<h3 class="card-title">
<a href="single-member.html">Roxan Gilbert</a>
</h3>
<span class="secondary-tittle">Developer</span>
</div>
</div>
<!-- Service Card Ghost white Background -->
<div class="info text-center bg-ghost-white">
<div class="icon icon-circle">
<i class="fa fa-pencil"></i>
</div>
<h5 class="info-title">UI/UX Design</h5>
<div class="description">
<p class="description">Fugit anim consectetuer leo temporibus lectus felis Excepteur consectetuer ac repellendus quidem unde odio nisl.</p>
</div>
</div>
<!-- Service Card Black Russiun Background -->
<div class="info slider-inner bg-br">
<div class="icon icon-ract ract45">
<i class="fa fa-pencil"></i>
</div>
<h5 class="info-title">UI/UX Design</h5>
<div class="description">
<p class="description">Fugit anim consectetuer leo temporibus lectus felis Excepteur consectetuer ac repellendus quidem unde odio nisl.</p>
</div>
</div>
Team Card
Service Card Example 1:
Financial Support
There are many variations of passa lorem Ipsum available but the ma
Financial Support
There are many variations of passa lorem Ipsum available but the ma
Financial Support
There are many variations of passa lorem Ipsum available but the ma
Service Card Example 2:
Card Deck <> show code
<div class="card-deck">
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="img/gallery/g1.jpg" alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0 Comts</a></span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="img/gallery/g1.jpg" alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0 Comts</a></span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
<div class="card">
<div class="card_img">
<a href=""><img class="img-full" src="img/gallery/g1.jpg" alt="Card image"></a>
</div>
<div class="card-block">
<a href="#"><h3 class="card-title">Card title</h3></a>
<span>by <span><a href="" class="text-primary" >Admin</a> </span></span> | <span><a href="">0 Comts</a></span>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor</p>
<a href="" class="btn btn-primary">Read more</a>
</div>
</div>
</div>
How to use
- Wrap all card contents in .card-deck wrapper. Each of the cards in card deck uses base card styles
Example:
Card title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard title
by Admin | 0 ComtsLorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusm tempor
Read moreCard Ribbons <> show code
<div class="card card-body text-center">
<div class="card-ribbon card-ribbon-top card-ribbon-left bg-primary text-white">Popular</div>
<h4 class="card-title">
Ribbon
</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-sm mt-3 btn-primary">Go somewhere</a>
</div>
<!-- top right -->
<div class="card-ribbon card-ribbon-top card-ribbon-right bg-faded ">Best Value</div>
<!-- bottom left -->
<div class="card-ribbon card-ribbon-bottom card-ribbon-left bg-info text-white">popular</div>
<!-- bottom right -->
<div class="card-ribbon card-ribbon-bottom card-ribbon-right bg-primary text-white">Best Value</div>
How to use
- use the .card-ribbon wrapper inside the .card and use the following classes for proper positioning
Example
Ribbon
With supporting text below as a natural lead-in to additional content.
Go somewhereRibbon
With supporting text below as a natural lead-in to additional content.
Go somewhereCard Styles <> show code
<div class="card text-white bg-primary mb-3">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Primary card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
How to use
- Use any background color to .card or color classes with it. Examples uses the contextual classes.
Background color
Primary
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary
Some quick example text to build on the card title and make up the bulk of the card's content.
Success
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning
Some quick example text to build on the card title and make up the bulk of the card's content.
Info
Some quick example text to build on the card title and make up the bulk of the card's content.
Light
Some quick example text to build on the card title and make up the bulk of the card's content.
Dark
Some quick example text to build on the card title and make up the bulk of the card's content.