Skip to main content

Card

Simple rectangular container.

When To Use#

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

Examples#

import { Card } from 'tailor-ui';

With Block#

Title
Content
Footer

With Button#

Title
Content

With Image Top#

placeholder
Title
Content
Footer

With Image Bottom#

Title
Content
placeholder

hoverable#

Title
Content
Footer

clickable#

Title
Content
Footer

Title
Content
Footer

API#

Some props are using object spread syntax and are not showing in these tables.

Card#

Card.Block#

Card.Image#