Card

Cards are used for grouping information related to a single topic. They usually present some summarized content, an image, and a call-to-action button.

The Card component is a compound of the following:

• CardImage - wraps the product image.
• CardContent - wraps the product details.
• CardActions - wraps the call-to-action button of the product card.

Import

import { Badge, Card, CardActions, CardImage, CardContent, Price } from '@faststore/ui'

Usage

Loading...

Props

All Card-related components support all attributes also supported by the <div> tag.

Card

CardActions

CardContent

CardImage

Customization

data-fs-card

data-fs-card-image

data-fs-card-content

data-fs-card-actions

Best practices

✅ Do's

• Use attractive images to grab shoppers' attention.
• Keep the card content short.
• Keep a consistent visual style. Otherwise, your design may look off-putting.
• Use transparent-backgrounded images.
• Use animation and visual hints to improve the user experience.
• Use the most appropriate card size for each device type.
• Make the entire card clickable to create larger touch zones.

❌ Don'ts

• Don't use the Card component for product cards. Instead, use the ProductCard component.
• Avoid cluttering cards with too many buttons and content.
• Avoid inline links.

Accessibility

• Text elements and buttons must have sufficient color contrast against the background.