Skip to main content

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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY