Card

A sl-card component is a simple rounded box that contains various other components.

Card Title

<sl-card>
  <span>Card Title</span>
</sl-card>

Slots

The component includes multiple slots to cover various layouts.

Playground

<sl-card>
  <span slot="header">Header Slot</span>  
  <span>Default Slot</span>
  <span slot="footer">Footer Slot</span>  
</sl-card>

Modifiers

Adding those boolean attributes allows to modify the card styling.

Header SlotDefault SlotFooter Slot
Header SlotDefault SlotFooter Slot

Variants

Header SlotDefault SlotFooter Slot
Header SlotDefault SlotFooter Slot

Sizes

<!-- Variants -->
<sl-card>...</sl-card>
<sl-card danger>...</sl-card>
<!-- Size -->
<sl-card small>...</sl-card>
<sl-card medium>...</sl-card>