Card

Card components can be used either via dot-notation (Card.Title) or using the components directly (CardTitle).

Implementation#

import { Card, Button } from "slipstream-ui";

const Example = () => (
  <Card>
    <Card.Header>
      <Card.Title>Card Title</Card.Title>
    </Card.Header>
    <Card.Body>
      <p>Card body</p>
    </Card.Body>
    <Card.Footer className="justify-between">
      <Button color="red">Delete</Button>
      <Button color="blue">Submit</Button>
    </Card.Footer>
  </Card>
);

Example#

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae est tempor, sollicitudin purus non, placerat ipsum. Proin ipsum enim, suscipit eu pharetra nec, facilisis sit amet lectus. Donec enim orci, bibendum eu mattis vel, tempus vitae massa. Morbi urna nunc, accumsan molestie eleifend at, commodo in leo

Card Props#

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg		Changes padding, button, and title size

Card Header Props#

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg		Changes header padding

Card Title Props#

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg		Changes title size and padding

Card Body Props#

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg		Changes body padding

Card Footer Props#

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg		Changes button size and footer padding