Cards

Our cards provide a flexible and extensible content container with multiple variants and options.

Bootstrap Documentation

Examples

...
Business Apr 15, 2021

Let's work together all arrived

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.

...
By: Rona Lewis
Read more
copy

<div class="card border-0 rounded-3 shadow-light h-100">
    <img src="../html/assets/img/blog/blog-01.jpg" class="card-img-top" alt="..." />
    <div class="card-body p-4 p-sm-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <a href="#" class="badge bg-success-10 text-success fw-bold">Business</a>
            <span class="small">Apr 15, 2021</span>
        </div>
        <div class="border-bottom border-light mb-4 pb-4">
            <h3 class="h5 mb-2"><a href="blog-article.html">Let's work together all arrived</a></h3>
            <p class="mb-0">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum.</p>
        </div>
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <img src="../html/assets/img/avatar/avatar-01.jpg" class="rounded-circle xs-avatar" alt="..." />
                <div class="ms-2">
                    <span class="small"><span class="fw-bold">By: </span>Rona Lewis</span>
                </div>
            </div>
            <a href="blog-article.html" class="text-success">Read more</a>
        </div>
    </div>
</div>

Titles, text, and links

Demo account

Benefit from industry-leading entry prices

  • One of the industry leaders
  • Advanced risk management
  • Award-winning customer service*
  • Low minimum deposit
Open an Account
copy

<div class="card h-100 border-0 shadow-light">
    <div class="card-body p-5">
        <h3 class="mb-1 h4">Demo account</h3>
        <p class="mb-5 small">Benefit from industry-leading entry prices</p>
        <ul class="list-unstyled mx-auto ps-0 mb-5">
            <li class="py-2">
                <div class="d-flex">
                    <span class="text-primary small me-3">
                        <i class="fas fa-check"></i>
                    </span>
                    <div class="w-100">One of the industry leaders</div>
                </div>
            </li>
            <li class="py-2">
                <div class="d-flex">
                    <span class="text-primary small me-3">
                        <i class="fas fa-check"></i>
                    </span>
                    <div class="w-100">Advanced risk management</div>
                </div>
            </li>
            <li class="py-2">
                <div class="d-flex">
                    <span class="text-primary small me-3">
                        <i class="fas fa-check"></i>
                    </span>
                    <div class="w-100">Award-winning customer service*</div>
                </div>
            </li>
            <li class="pt-2">
                <div class="d-flex">
                    <span class="text-primary small me-3">
                        <i class="fas fa-check"></i>
                    </span>
                    <div class="w-100">Low minimum deposit</div>
                </div>
            </li>
        </ul>
        <a href="#" class="btn btn-sm btn-primary">Open an Account</a>
    </div>
</div>

Card groups

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
...
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
copy

<div class="card-group">
    <div class="card">
        <img src="../html/assets/img/blog/blog-02.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="../html/assets/img/blog/blog-03.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>