Card

A container to display content and actions related to a single subject

<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<("none" | "block" | "flex" | "grid" | "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<("center" | "left" | "right")[], { 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<("none" | "block" | "flex" | "grid" | "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<("center" | "left" | "right")[], { 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<("none" | "block" | "flex" | "grid" | "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<("center" | "left" | "right")[], { 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