Card Variations

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

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.

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.

Card Heading

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

Click me

Example

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