Cards

description here

Purpose: text here

Usage & Examples

<div class="j-card">
    <div class="j-card-header">
        <h4 class="j-card-title">
            <span class="j-card-icon fas fa-pen-alt"></span>
            Card Footer Large
        </h4>
        <div class="j-card-header-right">
            <button class="j-card-header-icon fas fa-ellipsis-h"></button>
        </div>
    </div>
    <div class="j-card-media">
        <img src="https://picsum.photos/400/300" alt="">
    </div>
    <div class="j-card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem earum ex expedita incidunt minus modi odit pariatur provident quasi, vero!
    </div>
    <div class="j-card-footer">
        <div class="j-card-footer-item">
            <a href="#"> <span class="j-card-icon j-icon-lg fas fa-cloud-download-alt"></span> Details Information</a>
        </div>
        <div class="j-card-footer-item j-card-footer-icon">
            <button class="fas fa-eye"></button>
        </div>
    </div>
</div>

Small header & Large footer

Use j-card-header-sm class with j-card-header-sm for small header and add use j-card-footer-lg for large footer. Default card doesn't have hover effect, You can use j-card-has-hover to add hover effect.

<div class="j-card j-card-has-hover">
    <div class="j-card-header j-card-header-sm">
        <h4 class="j-card-title">
            <span class="j-card-icon fas fa-pen-alt"></span>
            Card Footer Large
        </h4>
        <div class="j-card-header-right">
            <button class="j-card-header-icon fas fa-ellipsis-h"></button>
        </div>
    </div>
    <div class="j-card-media">
        <img src="https://picsum.photos/400/300" alt="">
    </div>
    <div class="j-card-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem earum ex expedita incidunt minus modi odit pariatur provident quasi, vero!
    </div>
    <div class="j-card-footer j-card-footer-lg">
        <div class="j-card-footer-item">
            <a href="#"> <span class="j-card-icon j-icon-lg fas fa-cloud-download-alt"></span> Details Information</a>
        </div>
        <div class="j-card-footer-item j-card-footer-icon">
            <button class="fas fa-eye"></button>
        </div>
    </div>
</div>