Skip to content
Mesh
1.0.0

Card

A Card component is ideal for encapsulating a discrete piece of content which has a single action. Card provides several elements that allow for multiple variations to suit a variety of contexts.

Installation

bash
npm install @nib/card

Usage

jsx
import Card from '@nib-components/card';

Interactive demo

Placeholder

Card Heading

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


jsx

Note: GreyBox is not a card component, it is purely for demonstration purposes.

Props

Card

PropTypeDefaultDescription
children (required)nodeThe content of the card. Content must be placed within the <Card.Content /> and <Card.Footer /> components.
imagestringImage to be added to the Card header. The image used should have an aspect ratio of 3:2.
imageAltstringThe alt tag value for the corresponding image prop.
iconcomponentIcon to be added to the Card header. Must be an icon from the @nib/icons package.
tagcomponentTag to be added to the card. Must be a @nib/tag component.
alignstringleftThe horizontal alignment of the card content. Must be one of top, center, or bottom.
paddingnumber or object4A size from our spacing scale. Can be made responsive by passing an object of breakpoints. Value(s) must be one of 1...10.

Card.Content

PropTypeDefaultDescription
title (required)stringThe card title.
children (required)nodeThe card content.
titleComponentstringThe underlying hX component of the card title.

Card.Footer

PropTypeDefaultDescription
children (required)nodeThe card footer content.

Examples

A Card can be configured to suit a range of contexts and requirements.

Card Heading

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

A simple Card without an image or icon.

Tag
Placeholder

Card Heading

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


A Card with an image and all available elements displayed and left aligned.

Tag

Card Heading

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


A Card with an icon and all available elments displayed and center aligned.