Card
Cards display content or actions related to a single subject. They should be easy to scan for relevant and actionable information.
Fun adventures in digital learning
Digital learning is when we use computers, tablets, or even phones to learn new things. It's super cool because it lets us explore all sorts of topics without even leaving our homes!
First off, digital learning means we can learn anytime, anywhere. Say goodbye to boring textbooks! With digital learning, we can watch fun videos, play educational games, and even talk to teachers and other students online. It's like having a whole world of knowledge at our fingertips!
<sl-card style="
--sl-card-media-aspect-ratio:1/1;
--sl-card-horizontal-breakpoint:500px;">
<img slot="media" src="images/open-graph-card.jpg" />
<h2>Fun adventures...</h2>
<span slot="header">
<sl-badge>new</sl-badge>
written by: Lynn
</span>
<p slot="body">
Digital learning is when...
</p>
<sl-button slot="actions" icon-only fill="ghost">
<sl-icon name="eye"></sl-icon>
</sl-button>
</sl-card>When to use
Content Grouping
Cards are great for putting similar content together. Use them when you want to show information about one specific thing.
Visual Hierarchy
Cards help organize information clearly. They make it easy for users to scan and identify important information.
Modularity
When you need a modular design that can be reused across different parts of your application, cards are a great choice.
When not to use
Complexity
Use cards for simple content presentation, but avoid them for complex layouts or intricate interactions.
Anatomy
| Item | Name | Description | Optional |
|---|---|---|---|
| 1 | Card Container | The placeholder of the card | no |
| 2 | Card image | The image of the card | yes |
| 3 | Card header | The title of the card | no |
| 4 | More button | To display secondary actions related to the content | yes |
| 5 | Card body | The content of the card | no |
| 6 | Card footer | Displays actions related to subject | yes |
Figma Options
With these options, you can tweak the appearance of the card in Figma. They are available in the Design Panel so you can compose the card to exactly fit the user experience need for the use case you are working on.
| Item | Options | Description |
|---|---|---|
| Orientation | horizontal vertical | Indicates the orientation of the card |
| Media margin | 1/2 1/2 none | Indicates if there is margin around the media or not |
| Ratio | Depends on the orientation | Indicates the ratio between the card body and media |
| Truncation | boolean | Indicates if the text of the card body is truncated |
| Media position | top left right none | Indicates the position of the media |
| Card icon | boolean | Indicates if there is an icon in front of the header |
| More button | boolean | Indicates if there is more button |
| Body text | value | To insert the text of the card |
Fun adventures in digital learning
Digital learning is when we use computers, tablets, or even phones to learn new things. It's super cool because it lets us explore all sorts of topics without even leaving our homes!
First off, digital learning means we can learn anytime, anywhere. Say goodbye to boring textbooks! With digital learning, we can watch fun videos, play educational games, and even talk to teachers and other students online. It's like having a whole world of knowledge at our fingertips!
<sl-card style="--sl-card-media-aspect-ratio:1/1;">
<img slot="media" src="images/open-graph-card.jpg" />
<h2>Fun adventures...</h2>
<span slot="header">
<sl-badge>new</sl-badge>
written by: Lynn
</span>
<p slot="body">
Digital learning is when...
</p>
<sl-button slot="actions" icon-only fill="ghost">
<sl-icon name="eye"></sl-icon>
</sl-button>
</sl-card>CSS Variables
As many properties as possible are being set by CSS variables because that way you can easily make all the cards inside a container look the same by setting the properties on that container, or you can create custom css classes that consist of a combination of settings.
API
The card has a range of properties to define the experience in different use cases.
Properties
| Name | Attribute | Type | Default | Description |
|---|---|---|---|---|
explicitHeight | explicit-height | boolean | undefined | When the height of the card is set (or constrained) by its container (for example in a grid with fixed rows) this needs to be set to be added in order to assure the correct rendering | |
height | height | 'fixed' | 'flex' | 'fixed' | When the height is `fixed` the image will determine the height of the card, when it is `flex` the height of the text will determine the height of the card. |
mediaPosition | media-position | 'start' | 'end' | 'start' | Show the media at the start or at the end. |
orientation | orientation | 'horizontal' | 'vertical' | 'horizontal' | The position of the media in relation to the text |
padding | padding | boolean | false | Indicates whether there is a padding around the media. Recommended to set to true when the `--sl-card-stretch-image` isn't set to 100% |
Slots
| Name | Description |
|---|---|
default | Title of the card |
media | Media, this can be an image or video |
header | Subtitle or badges |
body | Body text of the card |
actions | Icon button for actions on the card. |
CSS Properties
| Name | Description |
|---|---|
--sl-card-media-aspect-ratio | The aspectratio of the media container (default is 4/3). By default this ratio is always maintained, and will cause the media to become smaller when there isn't sufficient space for the full width. |
--sl-card-media-width | The width of the media in relation to the text. Can be set in pixels or `fr`. |
--sl-card-media-x | X-Focuspoint of the media; this is taken as the center when the media is cropped. |
--sl-card-media-y | Y-Focuspoint of the media; this is taken as the center when the media is cropped. |
--sl-card-orientation-breakpoint | When card is smaller than this size it will switch from horizontal (when set) to vertical layout. |
--sl-card-stretch-image | Set this to 100% when the aspectratio of the media doesn't matter and you want it to fill the full height of the card. |
--sl-card-text-width | The width of the text in relation to the media. Can be set in pixels (not recommended) or `fr`. |
Accessibility considerations
- Wrap your cards in a list to group your cards. Each list item
<li>represents a card. - If the cards are part of a specific group, add an appropriate heading or use
aria-labelto describe the group. - Update the heading level based on the content of the page to make sure card headings are in the correct, logical order. The heading will always look the same, so the heading level chosen will affect only the semantic meaning, so make sure that is logical in the context of the page.
- Each Card has a Heading level of the same level because they belong to a flat list hierarchy.
- Avoid having 2 links to the same URL (in the same Card) like one for the Title and another for the action (in that way we reduce the tab stops).
- Avoid nesting interactive elements, such as placing a button inside a link or a link inside a button.
- Don't wrap the whole card in a Link, use the expand prop to make it interactive.
Keyboard interaction
| Command | Description |
|---|---|
Tab | Change focus on elements inside the card and subsequent actions. The card itself cannot be focused. |
WAI-ARIA
WAI-ARIA Roles, States, and Properties for an card provide essential information to assistive technologies and screen readers. They convey the card's role and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.
| Attribute | Value | Description | User supplied |
|---|---|---|---|
alt | string | Image alt text, if the image is not decorative. Alt text needs to be different from the card title | yes |