Card
A highly configurable panel design to display media and information.
Import
import '@kemet-ui/card';<script type="module" src="https://unpkg.com/kemet-ui@latest/dist/elements/card.js"></script>import { KemetCard } from 'kemet-ui/react';Examples
Section titled “Examples”Centered
Section titled “Centered”Use the center attribute to center the elements in the card.
Rounded
Section titled “Rounded”Use the rounded attribute to add rounded corners to the card. Pill and Circle are ignored.
Filled
Section titled “Filled”You can add background color by using the filled attribute.
Elevation
Section titled “Elevation”Add a shadow with the elevation attribute. Goes from leves 1-6 and inner.
CSS Customization
Section titled “CSS Customization”There are many css custom properties that can be used to change the appearance of the card. Use --kemet-card-filled-color for example to change the background color of the card when the filled attribute is used.
Working with slots
Section titled “Working with slots”The hard has multiple slots that allow you to add content to specific parts of the card.
Header slot
Section titled “Header slot”Use the header slot to add content to the header of the card.
Footer slot
Section titled “Footer slot”Use the footer slot to add content to the footer of the card.
Media slot
Section titled “Media slot”You can add images, videos, or even iframe embeds to the media slot.
Caption slot
Section titled “Caption slot”You can add captions to the media slot.
Going all out
Section titled “Going all out”Use a combination of attributes and slots to create a custom card.