Card

Cards are surfaces that display content and actions on a single topic.

They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Examples

This is the header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde doloribus molestiae fugit molestias.

This is the header

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde doloribus molestiae fugit molestias.

This is the titleThis is the subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde doloribus molestiae fugit molestias.

API

Learn more about the properties and the customization points.

Usage

import Card, {
  CardHeader,
  CardBody,
  CardMedia,
  CardActionBar,
  CardActionableArea
} from "@sonnat/ui/Card";

//or
import {
  Card,
  CardHeader,
  CardBody,
  CardMedia,
  CardActionBar,
  CardActionableArea
} from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Card Properties

Card Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
variant	"outlined" \| "elevated"	"elevated"	The variant of the card.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

CardHeader Properties

CardHeader Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
action	node	-	The main action to display in the header.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

CardBody Properties

CardBody Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

CardMedia Properties

CardMedia Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

CardActionBar Properties

CardActionBar Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

CardActionableArea Properties

CardActionableArea Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
onClick	function	-	Callback fired when the area is clicked. Signature: `function(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.