@@ -7,56 +7,96 @@ A **card** is a flexible and extensible content container. It includes options f
...
@@ -7,56 +7,96 @@ A **card** is a flexible and extensible content container. It includes options f
If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
If you're familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
## Basic example
## Example
Cards require very little markup, but do require some additional classes to give you as much control as possible. Create a `.card`, add any heading with `.card-title`, and use `.card-text` on paragraphs. These classes ensure proper spacing and alignment.
Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease.
{% example html %}
{% example html %}
<divclass="card">
<divclass="card">
<h3class="card-title">Special title treatment</h3>
<pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ahref="#"class="btn btn-primary">Button</a>
</div>
</div>
</div>
{% endexample %}
{% endexample %}
## Sizing
## Content types
Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via custom styles, our predefined grid classes, or our grid mixins.
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
<pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<ahref="#"class="card-link">Card link</a>
<ahref="#"class="card-link">Another link</a>
</div>
</div>
</div>
{% endexample %}
{% endexample %}
## Sizing
Cards are block-level by default, so they'll fill the available horizontal space. Constrain their widths via inline styles, our predefined grid classes, or with custom styles using our grid mixins.
Using the grid:
Using the grid:
{% example html %}
{% example html %}
<divclass="row">
<divclass="row">
<divclass="col-sm-6">
<divclass="col-sm-6">
<divclass="card">
<divclass="card card-block">
<h3class="card-title">Special title treatment</h3>
<h3class="card-title">Special title treatment</h3>
<pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
<pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
<pclass="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>
<h4class="card-title">Card title</h4>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="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>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<divclass="card">
<divclass="card">
<h4class="card-title">Card title</h4>
<divclass="card-block">
<pclass="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>
<h4class="card-title">Card title</h4>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="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>
<pclass="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>
<h4class="card-title">Card title</h4>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="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>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<h4class="card-title">Card title</h4>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
{% endexample %}
{% endexample %}
## Sets
## Decks
Get equal-width and equal-height cards by using two wrappers: `.card-set-wrapper` and a `.card-set`. We use table styles for the sizing and the gutters on `.card-set`. The `.card-set-wrapper` is used to negative margin out the `border-spacing` on the `.card-set`.
Get equal-width and equal-height cards by using two wrappers: `.card-deck-wrapper` and a `.card-deck`. We use table styles for the sizing and the gutters on `.card-deck`. The `.card-deck-wrapper` is used to negative margin out the `border-spacing` on the `.card-deck`.
<pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<h4class="card-title">Card title</h4>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<h4class="card-title">Card title</h4>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
<pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
