Skip to main content
Color mode
Color theme
Code repository
GitHub repository
Releases
Changelogs
@intility/bifrost-css@6.10.0
@intility/bifrost-react@6.18.0
@intility/bifrost-react-datepicker@6.2.9
@intility/bifrost-react-select@6.1.2
/
/
/
Card

Card

Panel with optional title, content and image

DesignReactCSS
Figma
import Card from "@intility/bifrost-react/Card";
Card
Go to top
Props

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.

TSX
<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.

Image banner

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

TSX
<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.

TSX
<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.

Open on CodeSandboxOpen Sandbox
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>
  );
}

Clickable card

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

TSX
<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.

TSX
<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'.

TSX
<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
TSX
<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