/*Vertical Card*/
<div class="card card-vertical">
    <div class="card-media">
        <img src="https://picsum.photos/seed/picsum/200/300.jpg" alt="" class="responsive-img" />
    </div>
    <div class="card-description-wrapper">
        <div class="card-primary">
            <h3>Title</h3>
            <p class="card-primary-subtitle">Subtitle</p>
        </div>
        <div class="card-secondary">
            <p class="card-secondary-description">
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry.
            </p>
        </div>
        <div class="card-actions">
            <a><i class="fa fa-heart-o" aria-hidden="true"></i> </a>
            <a><i class="fa fa-share-alt" aria-hidden="true"></i> </a>
            <a><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a>
        </div>
    </div>
</div>

/*Card with overlay*/
<div class="card card-vertical relative">
    <div class="card-media">
        <img src="https://picsum.photos/seed/picsum/200/300.jpg" alt="" class="responsive-img" />
    </div>
    <div class="card-description-wrapper">
        <div class="card-primary">
            <h3>Title</h3>
            <p class="card-primary-subtitle">Subtitle</p>
        </div>
        <div class="card-secondary">
            <p class="card-secondary-description">
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry.
            </p>
        </div>
        <div class="card-actions">
            <a><i class="fa fa-heart-o" aria-hidden="true"></i> </a>
            <a><i class="fa fa-share-alt" aria-hidden="true"></i> </a>
            <a><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a>
        </div>
    </div>
    <div class="card-overlay">
        <a href=""><span>Text Overlay</span> </a>
    </div>
</div>

/* Card with badge*/
<div class="card card-vertical relative">
    <div class="card-media">
        <img src="https://picsum.photos/seed/picsum/200/300.jpg" class="responsive-img" />
    </div>
    <div class="card-description-wrapper">
        <div class="card-primary">
            <h3>Title</h3>
            <p class="card-primary-subtitle">Subtitle</p>
        </div>
        <div class="card-secondary">
            <p class="card-secondary-description">
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry.
            </p>
        </div>
        <div class="card-actions">
            <a><i class="fa fa-heart-o" aria-hidden="true"></i> </a>
            <a><i class="fa fa-share-alt" aria-hidden="true"></i> </a>
            <a><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a>
        </div>
    </div>
    <span class="status-badge status-busy round-badge card-badge"></span>
</div>

/*Card with dismiss*/
<div class="card card-vertical relative card-wth-dismiss">
    <div class="card-primary px-16">
        <h3>Title</h3>
        <p class="card-primary-subtitle">Subtitle</p>
    </div>
    <div class="card-media mt-16">
        <img src="https://picsum.photos/seed/picsum/200/300.jpg" alt="" class="responsive-img" />
    </div>
    <div class="card-description-wrapper">
        <div class="card-secondary">
            <p class="card-secondary-description">
                Lorem Ipsum is simply dummy text of the printing and
                typesetting industry
            </p>
        </div>
        <div class="card-actions">
            <a><i class="fa fa-heart-o" aria-hidden="true"></i> </a>
            <a><i class="fa fa-share-alt" aria-hidden="true"></i> </a>
            <a><i class="fa fa-ellipsis-v" aria-hidden="true"></i> </a>
        </div>
    </div>
    <span class="card-dismiss-icon" id="dismiss"><i class="fa fa-times" aria-hidden="true"></i>
    </span>
</div>