Everytime we go to any shopping site almost every container dispalying some information there is a card. Now, how Bermuda can miss such an important component. So, Bermuda also provides defferent types of card which can be customized.
Cards In Bermuda
Profile Card
Profile card is used to showcase an information related to any profile, it can be a person or object. Following card is displaying a profile info of a person with a avatar and a couple of links.
Mark Downy
Artist
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium maxime amet ducimus dolorem placeat aliquid error beatae quam, iusto veniam?
<!-- Profile Card -->
<div class="card card-simple card__header-with-avatar">
<div class="card__header">
<img src="./assets/avatar.png" class="avatar avatar-lg" alt="card-avatar">
<div>
<h3>Mark Downy</h3>
<h4>Artist</h4>
</div>
</div>
<div class="card__body">
<div class="card__content text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Praesentium maxime amet ducimus dolorem placeat aliquid error beatae
quam, iusto veniam?
</p>
</div>
</div>
<div class="card__footer">
<button class="btn btn-link">Contact</button>
<a href="" class="btn"><i class="far fa-heart"></i></a>
<a href="" class="btn"><i class="fas fa-share-alt"></i></a>
<a href="" class="btn"><i class="fas fa-ellipsis-v"></i></a>
</div>
</div>
Image Overlay Card
In this type of card some content is over the image of card.
Mark Downy
Artist
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<!-- Image Overlay Card -->
<div class="card card-over-image">
<div class="card__body">
<div class="card__img-container">
<img class="card__img" src="./assets/avatar.png" alt="Card Image" />
<div class="over-the-image card__header">
<h3>Mark Downy</h3>
<h4>Artist</h4>
</div>
</div>
<div class="card__content text-1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
<div class="card__footer">
<button class="btn btn-link">Contact</button>
<button class="btn"><i class="far fa-heart"></i></button>
<button class="btn"><i class="fas fa-share-alt"></i></button>
<button class="btn"><i class="fas fa-ellipsis-v"></i></button>
</div>
</div>
</div>
Card with Badge
This type of cards have a badge with some information on top right corner.
Mark Downy
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, nostrum aut. Dolorem odit ut, soluta officia vero vel quod quidem.
<!-- Card With Badge -->
<div class="card card-with-badge shadow-lg" badge-data="Artist">
<div class="card__container">
<div class="card__header">
<h3>Mark Downy</h3>
</div>
<div class="card__body">
<div class="card__img-container">
<img src="./assets/avatar.png" alt="" />
</div>
<p class="card__content text-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit,
nostrum aut. Dolorem odit ut, soluta officia vero vel quod quidem.
</p>
</div>
<div class="card__footer">
<button class="btn btn-link">Contact</button>
</div>
</div>
</div>
Simple Card with Dismiss Button
Cards which can be dismissed are very helpful for popup messages or for list element. Due to their dismiss functionality user can dismiss them easily.
Mark Downy
Artist
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, nostrum aut. Dolorem odit ut, soluta officia vero vel quod quidem.
<!-- Card with dismiss button -->
<div class="card card-with-dismiss">
<div class="card__dismiss-btn">
<i class="fas fa-times"></i>
</div>
<div class="card__header">
<h3>Mark Downy</h3>
<h4>Artist</h4>
</div>
<div class="card__body">
<p class="card__content text-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit,
nostrum aut. Dolorem odit ut, soluta officia vero vel quod quidem.
</p>
</div>
<div class="card__footer">
<button class="btn btn-link">Contact</button>
</div>
</div>
Card with Shadow
Cards with shadow and rounded corners can be coded by simply adding a shadow-lg class and utility classes for rounded corners like border-rounded-sm to the card container.
Mark Downy
Artist
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, nostrum aut. Dolorem odit ut, soluta officia vero vel quod quidem.
<!-- Simple Card with shadow and rounded corners -->
<div class="card card-with-dismiss shadow-lg border-rounded-sm">
<div class="card__dismiss-btn">
<i class="fas fa-times"></i>
</div>
<div class="card__header">
<h3>Mark Downy</h3>
<h4>Artist</h4>
</div>
<div class="card__body">
<p class="card__content text-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit,
nostrum aut. Dolorem odit ut, soluta officia vero vel quod quidem.
</p>
</div>
<div class="card__footer">
<button class="btn btn-link">Contact</button>
</div>
</div>
These are the card components which Bermuda provides. Feel free to customize them.