v1.8.12

Cards

Card

Cards can be great for separating blocks of content. A card comes standard with a white background, light grey border, and some padding.

Demo

Card Header

Markup

<div class="card">
    <div class="card__header">
      <!-- Header goes here! -->
    </div>
    <div class="card__content">
        <!-- Content goes here! -->
    </div>
</div>

By default a card will take up 100% of the width of it’s parent. You can utilize Platform UI layout classes, such as block-container and block, to adjust the card’s size.

Image Card

Adding an image element above card__content with a card__image class transforms a simple card into an image card. You can add a just an image, or padding and a background color to use an SVG symbol or large icon.

Demo

Markup

<div class="card">
    <img class="card__image" src="..." alt="..." />
    <div class="card__content">
        <!-- Content goes here! -->
    </div>
</div>

rounded-{number} modifiers work great with cards to give that custom look (this callout uses the rounded modifier on individual corners).