Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
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

_10
import { 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:
copy

_10
@import "@faststore/ui/src/components/molecules/Card/styles.scss";

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

NameTypeDescriptionDefault
title*stringSpecifies the text to be loaded into the header.
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-card
maxWidthstringSpecifies the card max width.
iconNamestringSpecifies what icon to use following the FastStore Icon sheet.
iconAction() => voidFunction that should be executed when the icon is clicked

Design Tokens

Local tokenDefault value/Global token linked
--fs-card-border-radiusvar(--fs-border-radius)
--fs-card-border-widthvar(--fs-border-width)
--fs-card-border-color
var(--fs-border-color-light)
--fs-card-header-paddingvar(--fs-spacing-3)
--fs-card-header-bkg-color
var(--fs-color-neutral-bkg)
--fs-card-header-font-weightvar(--fs-text-weight-bold)
--fs-card-header-icon-color
var(--fs-color-main-2)
--fs-card-body-paddingvar(--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
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page