i2p-styleguide/_includes/components/cards.html

<div class="mb-4" id="cards">
    <h2>Cards</h2>
    <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
        <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="card mb-2">
                <div class="card-body">
                    <h4 class="card-title">I2P</h4>
                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
                    <a href="#" class="btn btn-medium btn-pill" onclick="return false;">Visit website</a>
                </div>
            </div>
            <div class="card mb-2">
                <div class="card-body">
                    <h4 class="card-title">I2P</h4>
                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
                    <a href="#" class="rb-link" onclick="return false;">Apply</a>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">I2P</h4>
                    <p class="card-text text-muted">I2P is an open source whistleblower submission system that media organizations can install to securely accept documents from anonymous sources.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-12 col-xs-12">
            <div class="card">
                <img class="card-img-top"
                     src="{{site.baseurl}}/assets/images/placeholder.jpg" alt="Card image cap">
                <div class="card-body">
                    <h4 class="card-title">A few things everyone can do now</h4>
                    <p class="card-text text-muted">Numerous people contribute to the project to varying extents.</p>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Consider <a href="#" class="rb-link" onclick="return false;">
                        <mark>contributing</mark>
                    </a> to help the I2P project grow.
                    </li>
                    <li class="list-group-item">Take a moment to
                        <mark>donate</mark>
                        to support further development.
                    </li>
                    <li class="list-group-item">Help
                        <mark>translate</mark>
                        the documentation into <a href="#" class="rb-link" onclick="return false;">other languages</a>.
                    </li>
                </ul>
                <div class="card-body">
                    <a href="#" class="rb-link" onclick="return false;">View All</a>
                </div>
            </div>
        </div>
    </div>
</div>