Card

Basic

Header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum impedit, suscipit, laudantium est similique omnis perspiciatis maxime sunt eaque eligendi modi porro quas expedita deserunt facilis. Praesentium esse aut eum!

Footer


<div class="card">
    <div class="card-header">header</div>
    <div class="card-body">
        lorem...
    </div>
    <div class="card-footer">footer</div>
</div>

With Image

Top Image New

Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, optio expedita autem repellat sit harum voluptatem, quidem dolorum maiores consectetur architecto aperiam. Voluptate totam debitis ab cumque eos, et molestias!

Bottom Image


<div class="card">
    <figure>
        <img src="image.jpg">
    </figure>
    <div class="card-body flex flex-col space-y-4">
        <h5>
            top image
            <span class="badge badge-primary ml-1 text-xs font-bold">new</span>
        </h5>
        <p>
            lorem...
        </p>
        <button type="button" class="btn btn-primary ml-auto">read more</button>
    </div>
</div>
<div class="card">
    <div class="card-body flex flex-col space-y-4">
        <h5>bottom image</h5>
        <p>
            lorem...
        </p>
        <div class="flex flex-wrap gap-1">
            <button type="button" class="btn btn-primary">login</button>
            <button type="button" class="btn btn-outline-secondary">register</button>
        </div>
    </div>
    <figure>
        <img src="image.jpg">
    </figure>
</div>