Cards

From Foundation
Jump to navigation Jump to search

Cards

cards provide a flexible and extensible content container with multiple variants and options.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

This is some text within a card body.

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

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to [[ ]].

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

<div class="card" style="width: 18rem;">
<div class="card-body">
<h3 class="card-title">Card title</h3>
<h4 class="card-subtitle mb-2 text-muted">Card subtitle</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<span class="card-link">[[Main Page|Card link]]</span>
<span class="card-link">[[Main Page|Another link]]</span>
</div>
</div>

Support

Please use the discussion page to ask questions.



TOP

Retrieved from ‘https://foundationextension.com/index.php?title=Cards&oldid=318