Card

A container to display content and actions related to a single subject
<Card>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</CardText>
<Button>An action</Button>
</CardBody>
</Card>

<Card>

import { Card } from '@strum/react';
name
type
default
as
"a" | "article" | "div" | "form" | "header" | "label" | "li" | "main" | "section" | "span"
p
color
"neutral2" | "neutral1" | "neutral3" | "accent" | "error" | "success" | "warning"
neutral2

<CardBody>

import { CardBody } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
display
ConditionalStyle<Values<("flex" | "grid" | "none" | "block" | "inline-block" | "inline-flex" | "contents")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
textAlign
ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-

<CardHeader>

import { CardHeader } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
display
ConditionalStyle<Values<("flex" | "grid" | "none" | "block" | "inline-block" | "inline-flex" | "contents")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
textAlign
ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-

<CardFooter>

import { CardFooter } from '@strum/react';
name
type
default
alignItems
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "baseline" | "stretch")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
display
ConditionalStyle<Values<("flex" | "grid" | "none" | "block" | "inline-block" | "inline-flex" | "contents")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
justifyContent
ConditionalStyle<Values<("center" | "flex-end" | "flex-start" | "stretch" | "space-around" | "space-between")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-
textAlign
ConditionalStyle<Values<("left" | "right" | "center")[], { defaultClass: string; conditions: { xs: string; sm: string; md: string; lg: string; xl: string; }; }>>
-

<CardTitle>

import { CardTitle } from '@strum/react';
name
type
default
as
"div" | "label" | "li" | "span" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
p

<CardSubtitle>

import { CardSubtitle } from '@strum/react';
name
type
default
as
"div" | "label" | "li" | "span" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
p

<CardText>

import { CardText } from '@strum/react';
name
type
default
as
"div" | "label" | "li" | "span" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p"
p

Header and footer
Link to this heading

<Card>
<CardHeader alignItems="center" display="flex" justifyContent="center">
Header
</CardHeader>
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubtitle>Card subtitle</CardSubtitle>
</CardBody>
<CardFooter>Footer</CardFooter>
</Card>
<Stack alignItems="flex-start" direction="horizontal">
<Card color="neutral1">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Neutral 1</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
<Card color="neutral2">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Neutral 2</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
<Card color="neutral3">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Neutral 3</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
<Card color="accent">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Accent</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
<Card color="error">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Error</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
<Card color="warning">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Warning</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
<Card color="success">
<CardHeader>Header</CardHeader>
<CardBody>
<CardTitle>Success</CardTitle>
<CardSubtitle>Subtitle</CardSubtitle>
<CardText>Example text</CardText>
</CardBody>
</Card>
</Stack>