Card

A flexible and extensible content container with multiple variants and options.

Simple API

Compose card using primitives.

default	Card title Card subtitle
primary	Card title Card subtitle
secondary	Card title Card subtitle
danger	Card title Card subtitle

import {CardBody, Card, CardFooter} from "swash/Card";
import {Button} from "swash/Button";

() => (
  <Card>
    <CardBody>
      <div className="text-2xl font-bold">Card title</div>
      <div className="text-gray-600">Card subtitle</div>
    </CardBody>
    <CardFooter>
      <div className="flex justify-end gap-2">
        <Button>Submit</Button>
      </div>
    </CardFooter>
  </Card>
);

Variants

Role

Use role prop to change the card role. Only button has a style effect.

Card title

import {Card} from "swash/Card";
import {Button} from "swash/Button";

() => (
  <Card role="button">
    <CardBody>
      <div className="text-2xl font-bold">Card title</div>
    </CardBody>
  </Card>
);

Active

Use active prop to change the card style

Card title

import {Card} from "swash/Card";
import {Button} from "swash/Button";

() => (
  <Card active>
    <CardBody>
      <div className="text-2xl font-bold">Card title</div>
    </CardBody>
  </Card>
);