Card
Displays products, messages, or store information.
A basic card that divides the content into a header and body, making it ideal for showcasing products, messages, or any other store information.
Example
Code
Card with Icon
Message
Usage
Import the component
_10import { Card } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/Card/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Example
Code
Card with Icon
First Product
Second Product
Example
Code
Card without Icon
Message
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-card-border-radius | var(--fs-border-radius) |
--fs-card-border-width | var(--fs-border-width) |
--fs-card-border-color | var(--fs-border-color-light) |
--fs-card-header-padding | var(--fs-spacing-3) |
--fs-card-header-bkg-color | var(--fs-color-neutral-bkg) |
--fs-card-header-font-weight | var(--fs-text-weight-bold) |
--fs-card-header-icon-color | var(--fs-color-main-2) |
--fs-card-body-padding | var(--fs-spacing-3) |
Data attributes
You can target and override
Card styles using the following data attributes:-
data-fs-card -
data-fs-card-header -
data-fs-card-title -
data-fs-card-body
Props
| Name | Type | Description | Default |
|---|---|---|---|
| title* | string | Specifies the text to be loaded into the header. | |
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-card |
| maxWidth | string | Specifies the card max width. | |
| iconName | string | Specifies what icon to use following the FastStore Icon sheet. | |
| iconAction | () => void | Function that should be executed when the icon is clicked |