The Strum logo: two oscillating strings from an instrument next to the word Strum
Skip to content
GitHub

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>

Props
Link to this heading

<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" | "flex" | "grid" | "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<("none" | "flex" | "grid" | "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<("none" | "flex" | "grid" | "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>

Colors
Link to this heading

<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>
Edit on GitHub