Card

Card displays some information divided into a body and a header.

Overview

<Card
    iconName="PlusCircle"
    title="Card with Icon"
    style={{width: '300px'}}>
    <p> First Product </p>
    <hr/>
    <p> Second Product </p>
  </Card>

 <Card
  title="Card without Icon"
  style={{width: '300px'}}>
  <p> Message </p>
</Card>

Import

Import the component from @faststore/ui

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:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

Product List

First Product

Second Product

 <Card
    iconName="PlusCircle"
    title="Product List"
    style={{width: '300px'}}>
    <p> First Product </p>
    <hr/>
    <p> Second Product </p>
  </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

Buy Button Carousel