Fork me on GitHub

Original card

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-block">
        <h4 class="card-title">Special title treatment</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <button class="btn btn-primary">Go somewhere</button>
    </div>
</div>

Gray card (twbs3 well)

1 Some title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit porttitor urna at molestie. Etiam nec porttitor nunc, ac molestie nisl. Ut velit eros, tempor eget fermentum porta, condimentum a urna. Praesent eget fermentum ex. Duis bibendum aliquam nibh sed consectetur. In a scelerisque orci. Sed eu gravida enim, eget feugiat turpis. Morbi ac pharetra lacus, non tincidunt justo. Nullam accumsan ac ex ac eleifend. Maecenas viverra eget velit et commodo. Sed a laoreet lorem, at tempor mi. Suspendisse potenti. Nulla facilisi.
<div class="sc-white-bg">
    <div class="card card-well">
        <div class="card-block">
            <h4><span class="digit-circle">1</span> Some title</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
            suscipit porttitor urna at molestie. Etiam nec porttitor nunc, ac molestie nisl. Ut
            velit eros, tempor eget fermentum porta, condimentum a urna. Praesent eget fermentum
            ex. Duis bibendum aliquam nibh sed consectetur. In a scelerisque orci. Sed eu gravida
            enim, eget feugiat turpis. Morbi ac pharetra lacus, non tincidunt justo. Nullam
            accumsan ac ex ac eleifend. Maecenas viverra eget velit et commodo. Sed a laoreet
            lorem, at tempor mi. Suspendisse potenti. Nulla facilisi.
        </div>
    </div>
</div>

Card with section header

Some title

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet...

<div class="card">
    <div class="card-block">
        <h2>Some title</h2>
        <p>Lorem ipsum dolor sit amet...</p>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>