Put simply, cards are arrangements of related content. They vary in complexity. They may have visible boundaries, or they may not. This depends on whatever rules an organization sets to maintain consistent implementation.
Cards serve the purpose of visually grouping and differentiating content. They should always be used intentionally and align with the following guidelines:
| Do ✅ | Don’t 🚫 | Caution ⚠️ |
|---|---|---|
| Use to group related content | Use to house a page's main content | Only nest cards if the parent and child differ greatly in scale |
| Use for individual list items (search results, products) | Overuse cards on a single page | |
| Use for promotional content or widgets separate from main content | Mix different card styles without visual separation |
Sequoia has two distinct “categories” of card.
The first is our Simple Card component. This component is a basic container with several stylistic props: background color, corner radius, padding, stroke, and elevation. What makes Simple Card unique is that it is 100% content agnostic, meaning it will accept any content you place inside of it.
The Simple Card accommodates a variety of possibilities due to its flexibility.
<aside> 👉
Learn more about the Simple Card in the Component Documentation.
</aside>
Feature Cards are cards that have been heavily styled or have unique functionality. They are often more complex in their configuration and have limited flexibility. Despite all of this, they can be very useful for particular types of content or designing with more impact.
