Card

Cards display content or actions related to a single subject. They should be easy to scan for relevant and actionable information.

UsageCodeAccessibility

Fun adventures in digital learning

newwritten by: Lynn

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

ItemNameDescriptionOptional
1Card ContainerThe placeholder of the cardno
2Card imageThe image of the cardyes
3Card headerThe title of the cardno
4More buttonTo display secondary actions related to the contentyes
5Card bodyThe content of the cardno
6Card footerDisplays actions related to subjectyes

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.

ItemOptionsDescription
Orientationhorizontal verticalIndicates the orientation of the card
Media margin1/2 1/2 noneIndicates if there is margin around the media or not
RatioDepends on the orientationIndicates the ratio between the card body and media
TruncationbooleanIndicates if the text of the card body is truncated
Media positiontop left right noneIndicates the position of the media
Card iconbooleanIndicates if there is an icon in front of the header
More buttonbooleanIndicates if there is more button
Body textvalueTo insert the text of the card
Interactive example