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.
Overview
Example
Code
Card with Icon
Message
Import
Import the component from @faststore/ui
_10import { Card } from "@faststore/ui";
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Card with Icon
First Product
Second Product
Card without Icon
Message
_10<Card_10 iconName="PlusCircle"_10 title="Card with Icon"_10 style={{width: '300px'}}>_10 <h1> First Product </h1>_10 <hr/>_10 <h1> Second Product </h1>_10</Card>
_10<Card_10 title="Card without Icon"_10 style={{width: '300px'}}>_10 <h1> Message </h1>_10</Card>
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 |
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) |
Customization
For further customization, you can use the following data attributes:
-
data-fs-card -
data-fs-card-header -
data-fs-card-title -
data-fs-card-body