Card
Panel with optional title, content and image
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.
Image banner
The <Card.Image url='...' /> is designed to be used as a top image banner
(first child of the card).
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 button
You can place a clickable <Card.Button> at the bottom of the card.
Clickable card
Or you can make a card clickable by wrapping its content in a link.
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.
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'.
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