Cards

Styling with cards is good for giving your visitors a brief overview of the different areas of your website, keeping each area of interest compartmentalized. The benefit is that you can introduce many pages you want your visitor to navigate to, from your homepage, without it looking cluttered and busy, enhancing a good user experience.

I have detailed below various card styling that you can use.

Header

Primary card title

Vestibulum mollis vel ante id efficitur. Nulla tincidunt leo quam, pellentesque dictum tortor tincidunt a. Aliquam et velit ullamcorper, malesuada elit a, porta eros. Vivamus blandit turpis at nulla pellentesque, a viverra mi elementum.

Header

Secondary card title

Header

Success card title

        
    <div class="col-lg-4">
        <div class="card border-primary mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Vestibulum mollis vel ante id efficitur. Nulla tincidunt leo quam, pellentesque dictum tortor tincidunt a. Aliquam et velit ullamcorper, malesuada elit a, porta eros. Vivamus blandit turpis at nulla pellentesque, a viverra mi elementum.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-secondary mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Secondary card title</h4>
                <p class="card-text">Vestibulum mollis vel ante id efficitur. Nulla tincidunt leo quam, pellentesque dictum tortor tincidunt a. Aliquam et velit ullamcorper, malesuada elit a, porta eros. Vivamus blandit turpis at nulla pellentesque, a viverra mi elementum.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-success mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Success card title</h4>
                <p class="card-text">Vestibulum mollis vel ante id efficitur. Nulla tincidunt leo quam, pellentesque dictum tortor tincidunt a. Aliquam et velit ullamcorper, malesuada elit a, porta eros. Vivamus blandit turpis at nulla pellentesque, a viverra mi elementum.</p>
            </div>
        </div>
    </div>

Header

Danger card title

Vivamus quis posuere neque, id ultricies est. In semper neque justo. Nam sed eleifend lacus, sed iaculis ligula. Donec gravida leo at enim mattis porttitor. Maecenas in rutrum dolor, id faucibus ex. Fusce tortor elit, accumsan eget ultrices id, elementum id erat.

Header

Warning card title

Header

Info card title

        
    <div class="col-lg-4">
        <div class="card border-danger mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Danger card title</h4>
                <p class="card-text">Vivamus quis posuere neque, id ultricies est. In semper neque justo. Nam sed eleifend lacus, sed iaculis ligula. Donec gravida leo at enim mattis porttitor. Maecenas in rutrum dolor, id faucibus ex. Fusce tortor elit, accumsan eget ultrices id, elementum id erat.
</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-warning mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Warning card title</h4>
                <p class="card-text">Vivamus quis posuere neque, id ultricies est. In semper neque justo. Nam sed eleifend lacus, sed iaculis ligula. Donec gravida leo at enim mattis porttitor. Maecenas in rutrum dolor, id faucibus ex. Fusce tortor elit, accumsan eget ultrices id, elementum id erat.
</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-info mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Info card title</h4>
                <p class="card-text">Vivamus quis posuere neque, id ultricies est. In semper neque justo. Nam sed eleifend lacus, sed iaculis ligula. Donec gravida leo at enim mattis porttitor. Maecenas in rutrum dolor, id faucibus ex. Fusce tortor elit, accumsan eget ultrices id, elementum id erat.
</p>
            </div>
        </div>
    </div>

Header

Light card title

Maecenas at felis vel dolor auctor placerat a vel erat. Nam hendrerit tortor nec mollis ultrices. Duis varius turpis eu venenatis condimentum. Morbi nunc erat, lacinia porttitor odio ut, tristique rutrum ante. In eget velit enim. In laoreet, eros ut suscipit semper, urna ligula gravida ante, vulputate aliquet orci justo sed felis.

Header

Dark card title

Header

Primary card title

        
    <div class="col-lg-4">
        <div class="card border-light mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Light card title</h4>
                <p class="card-text">Maecenas at felis vel dolor auctor placerat a vel erat. Nam hendrerit tortor nec mollis ultrices. Duis varius turpis eu venenatis condimentum. Morbi nunc erat, lacinia porttitor odio ut, tristique rutrum ante. In eget velit enim. In laoreet, eros ut suscipit semper, urna ligula gravida ante, vulputate aliquet orci justo sed felis.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-dark mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Dark card title</h4>
                <p class="card-text">Maecenas at felis vel dolor auctor placerat a vel erat. Nam hendrerit tortor nec mollis ultrices. Duis varius turpis eu venenatis condimentum. Morbi nunc erat, lacinia porttitor odio ut, tristique rutrum ante. In eget velit enim. In laoreet, eros ut suscipit semper, urna ligula gravida ante, vulputate aliquet orci justo sed felis.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Primary card title</h4>
                <p class="card-text">Maecenas at felis vel dolor auctor placerat a vel erat. Nam hendrerit tortor nec mollis ultrices. Duis varius turpis eu venenatis condimentum. Morbi nunc erat, lacinia porttitor odio ut, tristique rutrum ante. In eget velit enim. In laoreet, eros ut suscipit semper, urna ligula gravida ante, vulputate aliquet orci justo sed felis.</p>
            </div>
        </div>
    </div>

Header

Secondary card title

Integer sed nisl quis erat laoreet egestas. Phasellus quis efficitur libero. Phasellus posuere libero a odio mollis consequat quis nec eros. Etiam id lectus tortor. Etiam in velit at eros euismod dictum non pharetra nisi. Nam elementum, ligula euismod finibus gravida, nunc magna commodo urna, nec facilisis orci tellus quis justo. Duis ex libero, volutpat non nulla et, porta finibus ante. Integer tempus vestibulum est eget lacinia.

Header

Success card title

Header

Danger card title

        
    <div class="col-lg-4">
        <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Secondary card title</h4>
                <p class="card-text">Integer sed nisl quis erat laoreet egestas. Phasellus quis efficitur libero. Phasellus posuere libero a odio mollis consequat quis nec eros. Etiam id lectus tortor. Etiam in velit at eros euismod dictum non pharetra nisi. Nam elementum, ligula euismod finibus gravida, nunc magna commodo urna, nec facilisis orci tellus quis justo. Duis ex libero, volutpat non nulla et, porta finibus ante. Integer tempus vestibulum est eget lacinia.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card text-white bg-success mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Success card title</h4>
                <p class="card-text">Integer sed nisl quis erat laoreet egestas. Phasellus quis efficitur libero. Phasellus posuere libero a odio mollis consequat quis nec eros. Etiam id lectus tortor. Etiam in velit at eros euismod dictum non pharetra nisi. Nam elementum, ligula euismod finibus gravida, nunc magna commodo urna, nec facilisis orci tellus quis justo. Duis ex libero, volutpat non nulla et, porta finibus ante. Integer tempus vestibulum est eget lacinia.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Danger card title</h4>
                <p class="card-text">Integer sed nisl quis erat laoreet egestas. Phasellus quis efficitur libero. Phasellus posuere libero a odio mollis consequat quis nec eros. Etiam id lectus tortor. Etiam in velit at eros euismod dictum non pharetra nisi. Nam elementum, ligula euismod finibus gravida, nunc magna commodo urna, nec facilisis orci tellus quis justo. Duis ex libero, volutpat non nulla et, porta finibus ante. Integer tempus vestibulum est eget lacinia.</p>
            </div>
        </div>
    </div>

Header

Warning card title

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Proin lectus justo, vulputate sit amet ultricies et, viverra a sapien. Maecenas gravida pellentesque leo quis ullamcorper. Phasellus vel turpis fringilla, pharetra nibh finibus, sodales nulla. Maecenas ut est eu arcu fringilla scelerisque at ut ipsum.

Header

Info card title

Header

Light card title

        
    <div class="col-lg-4">
        <div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Warning card title</h4>
                <p class="card-text">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Proin lectus justo, vulputate sit amet ultricies et, viverra a sapien. Maecenas gravida pellentesque leo quis ullamcorper. Phasellus vel turpis fringilla, pharetra nibh finibus, sodales nulla. Maecenas ut est eu arcu fringilla scelerisque at ut ipsum.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card text-white bg-info mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Info card title</h4>
                <p class="card-text">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Proin lectus justo, vulputate sit amet ultricies et, viverra a sapien. Maecenas gravida pellentesque leo quis ullamcorper. Phasellus vel turpis fringilla, pharetra nibh finibus, sodales nulla. Maecenas ut est eu arcu fringilla scelerisque at ut ipsum.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card bg-light mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Light card title</h4>
                <p class="card-text">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Proin lectus justo, vulputate sit amet ultricies et, viverra a sapien. Maecenas gravida pellentesque leo quis ullamcorper. Phasellus vel turpis fringilla, pharetra nibh finibus, sodales nulla. Maecenas ut est eu arcu fringilla scelerisque at ut ipsum.</p>
            </div>
        </div>
    </div>

Header

Dark card title

Praesent pulvinar libero ut malesuada viverra. Vestibulum blandit pellentesque velit. Sed tincidunt posuere quam at sodales. Donec non ante sit amet nisi interdum vehicula vitae eget lacus.

Card header

Special title treatment

Support card subtitle

Praesent pulvinar libero ut malesuada viverra. Vestibulum blandit pellentesque velit. Sed tincidunt posuere quam at sodales. Donec non ante sit amet nisi interdum vehicula vitae eget lacus.

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Card link Another link

2 days ago

Card title

Card subtitle

Praesent pulvinar libero ut malesuada viverra. Vestibulum blandit pellentesque velit. Sed tincidunt posuere quam at sodales. Donec non ante sit amet nisi interdum vehicula vitae eget lacus.

Card link Another link

        
    <div class="col-lg-4">
        <div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h4 class="card-title">Dark card title</h4>
                <p class="card-text">Praesent pulvinar libero ut malesuada viverra. Vestibulum blandit pellentesque velit. Sed tincidunt posuere quam at sodales. Donec non ante sit amet nisi interdum vehicula vitae eget lacus.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card mb-3">
            <h3 class="card-header">Card header</h3>
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <h6 class="card-subtitle text-muted">Support card subtitle</h6>
            </div>
            <img style="width: 100%; display: block;" src="~/images/MarketingYardScreenshot.png" alt="Card image">

            <div class="card-body">
                <p class="card-text">Praesent pulvinar libero ut malesuada viverra. Vestibulum blandit pellentesque velit. Sed tincidunt posuere quam at sodales. Donec non ante sit amet nisi interdum vehicula vitae eget lacus.</p>
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Cras justo odio</li>
                <li class="list-group-item">Dapibus ac facilisis in</li>
                <li class="list-group-item">Vestibulum at eros</li>
            </ul>
            <div class="card-body">
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
            <div class="card-footer text-muted">
                2 days ago
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
                <p class="card-text">Praesent pulvinar libero ut malesuada viverra. Vestibulum blandit pellentesque velit. Sed tincidunt posuere quam at sodales. Donec non ante sit amet nisi interdum vehicula vitae eget lacus.</p>
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>
    </div>