Card

Renders a plain card with content inside.

Import

// Tree shakable import
import { Card } from '@bojagi/pablo';
// Or direct import
import { Card } from '@bojagi/pablo/Card';

Examples

Square

Live Editor

<Card>
  <Title>This is a card</Title>
  <Paragraph>With som e text</Paragraph>
</Card>

Result

Loading...

Custom styles

Live Editor

<Card
  customStyles={{
    root: css`
      background-color: blue;
      color: white;
    `,
  }}
>
  <Title>This is a card</Title>
  <Paragraph>With some text</Paragraph>
</Card>

Result

Loading...

Props

Name	Type	Default Value	Required	Description

Box props

Name	Type	Default Value	Required	Description