@placardi/card

A cards can be used to present content about a single subject and expose its actions.

Installation

npm i @placardi/card

Dependencies

• react
• styled-components
• @placardi/theme

Usage

Basic usage

In order to use the card component, wrap the application in global theme provider from @placardi/theme. Then, use the card as any regular component.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Card, {
  CardHeader,
  CardHeaderTitle
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
    <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
    </Card>
  </ThemeProvider>
)

export default App;

Card with header and content

Card accepts CardContent component, that accepts arbitrary children, making card very customisable.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Card, {
  CardHeader,
  CardHeaderTitle,
  CardContent
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
    <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
      <CardContent>Content</CardContent>
    </Card>
  </ThemeProvider>
)

export default App;

Card with header, body and link action

Card accepts CardLinkAction component, that accepts arbitrary children. It acts as a link and therefore needs a to prof that will render as link URL. CardLinkAction is polymorphic and can thus be render as any other component when provided with as prop.

import React, { FC } from 'react';
import ThemeProvider from '@placardi/theme';
import Card, {
  CardHeader,
  CardHeaderTitle,
  CardContent,
  CardLinkAction
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
     <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
      <CardContent>Content</CardContent>
      <CardLinkAction to='https://placardi.com'>
        Visit us
      </CardLinkAction>
    </Card>
  </ThemeProvider>
)

export default App;

Card with header, body and actions

Card accepts CardActions component, that accepts arbitrary children. Children inside CardActions can be aligned to the left, right or center when provided with align prop.

import React, { FC } from 'react';
import ThemeProvider, { Colour } from '@placardi/theme';
import Button, { Variant } from '@placardi/button';
import Card, {
  CardHeader,
  CardHeaderTitle,
  CardContent,
  CardActions,
  Alignment
} from '@placardi/card';

const App: FC = () => (
  <ThemeProvider>
    <Card>
      <CardHeader>
        <CardHeaderTitle>Title</CardHeaderTitle>
        <CardHeaderSubtitle>Subtitle</CardHeaderSubtitle>
      </CardHeader>
      <CardContent>Content</CardContent>
      <CardActions align={Alignment.LEFT}>
        <Button colour={Colour.RED}>
          Cancel
        </Button>
        <Button variant={Variant.CONTAINED} colour={Colour.BLUE}>
          Confirm
        </Button>
      </CardActions>
    </Card>
  </ThemeProvider>
)

export default App;