Card

White wrapper with a default gray border.

Class Result
.cardbackground-color: white; border: 1px solid #e2e8f0; border-radius: 6px;
.card-bodypadding: 20px;

Usage

Use to wrap content in a solid gray bordered container with rounded corners. Works well sitting on top of an email body with a .bg-light class and inside of a .container.

By default .card has no padding, you can use a card with or without a .card-body. Just like in Bootstrap a .card-body is just used to give 20px padding to the card, you can also use a padding utility to customize padding.

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>
This is some text within a card body.

Compiled Example

Input

<div class="card">
  <div class="card-body">
    Some quick example text to build on the card title and make up the bulk of the card's content.
  </div>
</div>

Output

<table class="card" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-radius: 6px; border-collapse: separate !important; width: 100%; overflow: hidden; border: 1px solid #e2e8f0;" bgcolor="#ffffff">
  <tbody>
    <tr>
      <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0;" align="left" bgcolor="#ffffff">
        <table class="card-body" role="presentation" border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
          <tbody>
            <tr>
              <td style="line-height: 24px; font-size: 16px; width: 100%; margin: 0; padding: 20px;" align="left">
                Some quick example text to build on the card title and make up the bulk of the card's content.
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>
On this page