Arterial Card

Another React Material Card

Installation

npm install @arterial/card

Usage

Styles

Sass

@use '@material/card/index.scss' as card;
@include card.core-styles;

CSS

import '@material/card/dist/mdc.card.css';

JSX

import { Card, CardPrimaryAction, CardActions, ... } from '@arterial/card';

Elevated Card

A shadow helps indicate a card.

<Card>
  <div className="primary-title">
    <div className="title">Card title</div>
    <div className="subtitle">Secondary text</div>
  </div>
</Card>

Outlined Card

An outline helps indicate a card.

<Card outlined>
  <div className="primary-title">
    <div className="title">Card title</div>
    <div className="subtitle">Secondary text</div>
  </div>
</Card>

Other Variants

Primary Action

The primary action area of a card is typically the card itself. Often cards are one large touch target to a detail screen on a subject.

<Card>
  <CardPrimaryAction>
    <div className="primary-title">
      <div className="title">Card title</div>
      <div className="subtitle">Secondary text</div>
    </div>
  </CardPrimaryAction>
</Card>

Supplemental Actions

Supplemental actions are represented by icons, text, and UI controls on cards. They are typically placed at the bottom of the card.

<Card>
  <CardPrimaryAction>
    <div className="primary-title">
      <div className="title">Card title</div>
      <div className="subtitle">Secondary text</div>
    </div>
  </CardPrimaryAction>
  <CardActions>
    <CardActionButtons>
      <CardActionButton label="Action 1" />
      <CardActionButton label="Action 2" />
    </CardActionButtons>
    <CardActionIcons>
      <CardActionIcon icon="favorite" />
      <CardActionIcon icon="share" />
    </CardActionIcons>
  </CardActions>
</Card>

Rich Media

This area is used for showing rich media in cards, and optionally as a container.

<Card>
  <CardPrimaryAction>
    <CardMedia className="rich-media" sixteenByNine />
    <div className="primary-title">
      <div className="title">Card title</div>
      <div className="subtitle">Secondary text</div>
    </div>
  </CardPrimaryAction>
  <CardActions>
    <CardActionButtons>
      <CardActionButton label="Action 1" />
      <CardActionButton label="Action 2" />
    </CardActionButtons>
    <CardActionIcons>
      <CardActionIcon icon="favorite" />
      <CardActionIcon icon="share" />
    </CardActionIcons>
  </CardActions>
</Card>

Rich Media Content

<Card>
  <CardPrimaryAction>
    <CardMedia className="rich-media" sixteenByNine>
      <CardMediaContent className="rich-media__content">
        <div className="primary-title">
          <div className="title">Card title</div>
          <div className="subtitle">Secondary text</div>
        </div>
      </CardMediaContent>
    </CardMedia>
  </CardPrimaryAction>
  <CardActions>
    <CardActionButtons>
      <CardActionButton label="Action 1" />
      <CardActionButton label="Action 2" />
    </CardActionButtons>
    <CardActionIcons>
      <CardActionIcon icon="favorite" />
      <CardActionIcon icon="share" />
    </CardActionIcons>
  </CardActions>
</Card>

Header

<Card>
  <CardPrimaryAction>
    <CardMedia className="rich-media" sixteenByNine />
    <div className="header">
      <div className="thumbnail" />
      <div className="primary-title">
        <div className="title">Card title</div>
        <div className="subtitle">Secondary text</div>
      </div>
    </div>
  </CardPrimaryAction>
  <CardActions>
    <CardActionButtons>
      <CardActionButton label="Action 1" />
      <CardActionButton label="Action 2" />
    </CardActionButtons>
    <CardActionIcons>
      <CardActionIcon icon="favorite" />
      <CardActionIcon icon="share" />
    </CardActionIcons>
  </CardActions>
</Card>

Supporting Text

<Card>
  <CardPrimaryAction>
    <CardMedia className="rich-media" sixteenByNine />
    <div className="primary-title">
      <div className="title">Card title</div>
      <div className="subtitle">Secondary text</div>
    </div>
    <div className="supporting-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </CardPrimaryAction>
  <CardActions>
    <CardActionButtons>
      <CardActionButton label="Action 1" />
      <CardActionButton label="Action 2" />
    </CardActionButtons>
    <CardActionIcons>
      <CardActionIcon icon="favorite" />
      <CardActionIcon icon="share" />
    </CardActionIcons>
  </CardActions>
</Card>

Props

Card

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | outlined | boolean | Enables an outlined variant. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardPrimaryAction

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardMedia

| Name | Type | Description | | --------------- | ---------------- | --------------------------------------------------------------------- | | backgroundImage | string | Path to the image of the root element. | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | sixteenByNine | boolean | Scales the height of the image maintaining a 16:9 aspect ratio. | | square | boolean | Scales the height of the image to be equal to the width of the image. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardMediaContent

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardActions

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | fullBleed | boolean | Enables full bleed card actions row by removing all padding. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardActionButtons

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardActionButton

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardActionIcons

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |

CardActionIcon

| Name | Type | Description | | --------- | ---------------- | ------------------------------------------------------------ | | children | node | Elements to be displayed within root element. | | className | string | Classes to be applied to the root element. | | tag | string | object | HTML tag to be applied to the root element. Defaults to div. |