Card
Card is a flexible container component.
When to use
- A card is a flexible and extensible content container that includes options for headers and footers, a wide variety of content, contextual background colours, and powerful display options such as buttons, links, etc.
- A card is often a subset or summary of a larger idea and acts as an entry point to more detailed information.
Guidelines
- Cards can have a variety of different content.
- Cards allow the user to easily scan relevant information and actions.
- Cards can be used on dashboards to display content in different sections.
- Card groups use display: flex; to achieve uniform sizing.
- Multiple cards displayed within a bootstrap row element will all match heights with the tallest card.
- Cards can also be used for interactive elements or links to different pages if the design calls for it, by using hover effects.
- Only use for navigation purpose if the design makes it clear that the card is a link to a separate page.
Basic
A simple Card is created with a header property along with the content as children.
Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
<div class="card">
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
</div>
</div>
Advanced
Card content can be customised further with "card-title", "card-text" and "card-footer" classes.
Advanced Card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!
<div class="card">
<div class="card-body">
<h5 class="card-title">Advanced Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<div class="card-footer bg-transparent border-0">
<button type="button" class="btn btn-ghost me-2"><i class="ds ds-close me-3"></i>Cancel</button>
<button type="button" class="btn btn-primary">"<i class="ds ds-checkmark me-3"></i>Save</button>
</div>
</div>
</div>
Advanced Card
It is very important for the customer to pay attention to the adipiscing process. Inventor, but the result of the error of repudiation, they never leave anyone repulsed by the harshest of them for us, because of the reason that they are tolerable, by desire or what!
<div class="card border-success mb-3">
<div class="card-header">Card Subheader</div>
<div class="card-body">
<h5 class="card-title">Advanced Card</h5>
<p class="card-text">It is very important for the customer to pay attention to the adipiscing process. Inventor, but the result of the error of repudiation, they never leave anyone repulsed by the harshest of them for us, because of the reason that they are tolerable, by desire or what!</p>
</div>
<div class="card-footer justify-content-start">Card Footer</div>
</div>
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card mb-3">
<div class="card-header"> Card Subheader</div>
<div class="card-body">
<h5 class="card-title"> Success card title</h5>
<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>
</div>
<div class="card-footer bg-transparent border-0 justify-content-start">
<a href="#" class="card-link"> Call to action</a>
</div>
</div>
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card">
<div class="card-header">Card Subheader</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<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>
</div>
<div class="card-footer justify-content-start">
<a href="#" class="card-link">Call to action</a>
</div>
</div>
Accessibility
- Ensure the tab order is defined correctly.
- Make sure card headings are in the correct, logical outline order.
- Buttons present inside the card can be reached by Tab and selected with Space or Enter.
- Links used within the card should be meaningful and clear with proper color contrast maintained.
- If images are part of the card, then proper alt name should be provided.
- Avoid too much functionality and minimal design should be implemented to reduce tab stops.