React Reference

Card

import Card from "@intility/bifrost-react/Card";

Basic Card

Cards can be used to display tiled information. Use sub-components <Card.Title> and <Card.Content> for formatting. Cards stretch to full width of their container by default, the examples on this page use <AutoCol> for layout.

<Card>
  <Card.Title>Card.Title</Card.Title>
  <Card.Content>Wrap card text content in Card.Content.</Card.Content>
</Card>
<Card>
  <Card.Title>Card.Title</Card.Title>
  <Card.Content>Wrap card text content in Card.Content.</Card.Content>
</Card>

Card.Title

Wrap card text content in Card.Content.

The <Card.Image url='...' /> is designed to be used as a top image banner (first child of the card).

<Card>
  <Card.Image url="/card/meetingroom.png" />
  <Card.Title>Card.Title</Card.Title>
  <Card.Content>Wrap card text content in Card.Content.</Card.Content>
</Card>
<Card>
  <Card.Image url="/card/meetingroom.png" />
  <Card.Title>Card.Title</Card.Title>
  <Card.Content>Wrap card text content in Card.Content.</Card.Content>
</Card>

Card.Title

Wrap card text content in Card.Content.

Aspect ratio vs height

Default aspect ratio for a <Card.Image> is set to 16/9 but can be customized through aspectRatio prop.

If you want a fixed height, use the height prop instead. Resize window to see the difference.

<Card>
  <Card.Image url='/card/profilebg_transparent.png' aspectRatio='3/1' />
  <Card.Title>3/1 aspect ratio</Card.Title>
  <Card.Content>Image height responds to card width.</Card.Content>
</Card>
<Card>
  <Card.Image url='/card/profilebg_transparent.png' height='100px' />
  <Card.Title>100px image height</Card.Title>
  <Card.Content>Clipping may occur.</Card.Content>
</Card>
<Card>
  <Card.Image url='/card/profilebg_transparent.png' aspectRatio='3/1' />
  <Card.Title>3/1 aspect ratio</Card.Title>
  <Card.Content>Image height responds to card width.</Card.Content>
</Card>
<Card>
  <Card.Image url='/card/profilebg_transparent.png' height='100px' />
  <Card.Title>100px image height</Card.Title>
  <Card.Content>Clipping may occur.</Card.Content>
</Card>

3/1 aspect ratio

Image height responds to card width.

100px image height

Clipping may occur.

Card button

You can place a clickable <Card.Button> at the bottom of the card.

import { faShoppingCart } from "@fortawesome/pro-regular-svg-icons";
import Card from "@intility/bifrost-react/Card";
import AutoCol from "@intility/bifrost-react/AutoCol";

export default function () {
  return (
    <AutoCol>
      <Card>
        <Card.Title>Card Title</Card.Title>
        <Card.Content>Wrap card text content in Card.Content.</Card.Content>
        <Card.Button onClick={() => alert("navigate to shop")}>
          Go to shop
        </Card.Button>
      </Card>
    </AutoCol>
  );
}

Open Sandbox

Clickable card

Or you can make a card clickable by wrapping its content in a link.

<Card>
  <a href="#path">
    <Card.Image url="/card/meetingroom.png" />
    <Card.Title>Clickable card</Card.Title>
    <Card.Content>Place the link as a child of Card</Card.Content>
  </a>
</Card>
<Card>
  <a href="#path">
    <Card.Image url="/card/meetingroom.png" />
    <Card.Title>Clickable card</Card.Title>
    <Card.Content>Place the link as a child of Card</Card.Content>
  </a>
</Card>

Clickable card

Place the link as a child of Card

Clickable sub-components spacing issues

You can also make only certain parts of a card clickable by wrapping only those parts in the link, but since the components are no longer siblings the spacing will be wrong and needs to be fixed manually.

<Card>
  <Card.Image url='/card/meetingroom.png' />
  <a href='#path'>
    <Card.Title style={{ marginBottom: 0 }}>Clickable title only</Card.Title>
  </a>
  <Card.Content style={{ marginTop: 4 }}>
    Wrap card text content in Card.Content.
  </Card.Content>
</Card>
<Card>
  <a href='#path'>
    <Card.Image url='/card/meetingroom.png' />
    <Card.Title style={{ marginBottom: 0 }}>Title and Image</Card.Title>
  </a>
  <Card.Content style={{ marginTop: 4 }}>
    Wrap card text content in Card.Content.
  </Card.Content>
</Card>
<Card>
  <Card.Image url='/card/meetingroom.png' />
  <a href='#path'>
    <Card.Title style={{ marginBottom: 0 }}>Clickable title only</Card.Title>
  </a>
  <Card.Content style={{ marginTop: 4 }}>
    Wrap card text content in Card.Content.
  </Card.Content>
</Card>
<Card>
  <a href='#path'>
    <Card.Image url='/card/meetingroom.png' />
    <Card.Title style={{ marginBottom: 0 }}>Title and Image</Card.Title>
  </a>
  <Card.Content style={{ marginTop: 4 }}>
    Wrap card text content in Card.Content.
  </Card.Content>
</Card>

Clickable title only

Wrap card text content in Card.Content.

Title and Image

Wrap card text content in Card.Content.

Circular image or icon

Use <Card.Logo> for a circular image or icon. If preceded by a <Card.Image> it will overlap the image.

Works best on cards with align='center'.

<Card align='center'>
  <Card.Image url='/card/profilebg_transparent.png' aspectRatio='3/1' />
  <Card.Logo imageUrl='/card/profile.png' />
  <Card.Title>Ola Nordmann</Card.Title>
</Card>
<Card align='center'>
  <Card.Logo icon={faShoppingCart} />
  <Card.Content>Wrap card text content in Card.Content.</Card.Content>
  <Card.Button>Go to shop</Card.Button>
</Card>
<Card align='center'>
  <Card.Image url='/card/profilebg_transparent.png' aspectRatio='3/1' />
  <Card.Logo imageUrl='/card/profile.png' />
  <Card.Title>Ola Nordmann</Card.Title>
</Card>
<Card align='center'>
  <Card.Logo icon={faShoppingCart} />
  <Card.Content>Wrap card text content in Card.Content.</Card.Content>
  <Card.Button>Go to shop</Card.Button>
</Card>

Ola Nordmann

Wrap card text content in Card.Content.

Responsive padding

The padding prop can be one of:

'none': no padding for any screen width
'small' (default): 12px for any screen width
'medium': 12px for small screens, 16px for large (1280px+) screens
'large': 16px for small screens, 24px for large (1280px+) screens

<Card padding='large'>
  <Card.Image url='/card/meetingroom.png' />
  <Card.Title>Large padding</Card.Title>
  <Card.Content>
    Resize window to get 16px for small screens, 24px for (1280px+) screens
  </Card.Content>
</Card>
<Card padding='medium'>
  <Card.Image url='/card/meetingroom.png' />
  <Card.Title>Medium padding</Card.Title>
  <Card.Content>
    Resize window to get 12px for small screens, 16px for (1280px+) screens
  </Card.Content>
</Card>
<Card>
  <Card.Image url='/card/meetingroom.png' />
  <Card.Title>Default card</Card.Title>
  <Card.Content>Always 12px padding</Card.Content>
</Card>
<Card padding='large'>
  <Card.Image url='/card/meetingroom.png' />
  <Card.Title>Large padding</Card.Title>
  <Card.Content>
    Resize window to get 16px for small screens, 24px for (1280px+) screens
  </Card.Content>
</Card>
<Card padding='medium'>
  <Card.Image url='/card/meetingroom.png' />
  <Card.Title>Medium padding</Card.Title>
  <Card.Content>
    Resize window to get 12px for small screens, 16px for (1280px+) screens
  </Card.Content>
</Card>
<Card>
  <Card.Image url='/card/meetingroom.png' />
  <Card.Title>Default card</Card.Title>
  <Card.Content>Always 12px padding</Card.Content>
</Card>

Large padding

Resize window to get 16px for small screens, 24px for (1280px+) screens

Medium padding

Resize window to get 12px for small screens, 16px for (1280px+) screens

Default card

Always 12px padding

Basic Card

Image banner

Aspect ratio vs height

Card button

Clickable card

Clickable sub-components spacing issues

Circular image or icon

Responsive padding