Skip to content

Card Variations

New features have been added to the Card, along with additional variations. These changes were made in an effort to make the cards more flexible, and align the cards currently being using in the content platform with Mesh.

Installation

These changes have been added to v2.0.0 of the Card component.

What's new?

Prop changes

  • Added an optional background prop to change the colour behind the image/icon. There are currently two options: white (colorWhite from theme) or light (colorLightest from theme).
  • Added an optional withBoxShadow prop which will remove the card border and replace with a box shadow.
  • Added an optional horizontalLayout prop which will display the card contents horizontally. See below for an example of a horizontal card.
  • Added an optional reverse prop to be used alongside the horizontalLayout to flip the order of image/icon and card contents.
  • Added an optional collapseBelow prop to be used alongside the horizontalLayout to determine at what screen breakpoint to drop the horizontal card back to a vertical card.

Breaking changes

We have modified the way the icons in the Card header are rendered. Previously, we had logic to maintain an aspect ratio for the icon but this broke the horizontal cards. To fix this, we removed this logic and replaced it with a more simple flex-based alignment. This is a visual breaking change.

Partner Card

We have added a Card variation called PartnerCard as a new exported component. This is an simplified version of Card which contains no content, only a heading and an icon/image.

The purpose of this card is to make the process easier for users wanting cards without needing to configure the large amount of props.

Placeholder

5 easy vegan meals

jsx
import {PartnerCard} from '@nib/card';
<PartnerCard image="https://via.placeholder.com/900x600" imageAlt="Placeholder" title="5 easy vegan meals" />

Flash Card

We have added a Card variation called FlashCard as a new exported component. This is a horizontal variant of the card with significantly different styling than the default Card. This card variant can only accept icons.

5 easy vegan meals

Enabling teams to create high-quality products and experiences faster for our customers.

jsx
import {FlashCard} from '@nib/card';
<FlashCard icon={PearGraphicIcon}>
<FlashCard.Content title="5 easy vegan meals">
<Copy>Enabling teams to create high-quality products and experiences faster for our customers.</Copy>
<Link to="#">Read more</Link>
</FlashCard.Content>
</FlashCard>;

Horizontal Layouts

We have added a horizontal variation of the card, which can be added with the horizontalLayout prop. Along with this, we have added a collapseBelow prop which takes a breakpoint value and collapses the horizontal card to a vertical card at this breakpoint. There is also the option to flip the position of the icon/image and the card content using the reverse boolean prop.

Example

Card Heading

Enabling teams to create high-quality products and experiences faster for our customers.

Card Heading

Enabling teams to create high-quality products and experiences faster for our customers.

Example
A placeholder image
jsx
import Card from '@nib/card';
<Columns space={2} collapseBelow="lg">
<Column>
<Card
icon={DoctorGraphicIcon}
tag={() => <Tag type="info">Example</Tag>}
horizontalLayout
reverse
collapseBelow="md"
background="light"
>
<Card.Content title="Card Heading">
<Copy>
Enabling teams to create high-quality products and experiences faster
for our customers.
</Copy>
<Link href="/">Click me</Link>
</Card.Content>
</Card>
</Column>
<Column>
<Card
image="https://via.placeholder.com/900x600"
imageAlt="A placeholder image"
tag={() => <Tag type="info">Example</Tag>}
horizontalLayout
collapseBelow="md"
>
<Card.Content title="Card Heading">
<Copy>
Enabling teams to create high-quality products and experiences faster
for our customers.
</Copy>
<Link href="/">Click me</Link>
</Card.Content>
</Card>
</Column>
</Columns>

Feedback

Please reach out if you have any questions or feedback about these changes. We're available on Slack, Workplace or by email.

Thank yous

A big thank you to everyone who was involved in these changes:

  • Chris Quinton
  • Joe Johnson
  • Jordan Collins
  • Laurie Jones
  • Michael Troy

Posted 17/03/2021