Card React Component

Cards, along with List View, is a one more great way to contain and orginize your information. Cards contains unique related data, for example, a photo, text, and link all about a single subject. Cards are typically an entry point to more complex and detailed information.

Card Components

There are following components included:

  • Card

Card Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.bgstring'bg-block-strong-light dark:bg-block-strong-dark'

Card bg color

colors.footerTextstring'text-black dark:text-white'

Card footer text color

componentstring'div'

Component's HTML Element

footerReactNode

Content of the Card footer

headerReactNode

Content of the Card header

marginstring'm-4'

Tailwind CSS margin class

outlineboolean

Makes card outline

Examples

Cards.jsx
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Card,
BlockTitle,
List,
ListItem,
Link,
} from 'tailwind-mobile/react';
export default function CardsPage() {
return (
<Page>
<Navbar
title="Cards"
/>
<BlockTitle withBlock={false}>Simple Cards</BlockTitle>
<Card>
This is a simple card with plain text, but cards can also contain their
own header, footer, list view, image, or any other element.
</Card>
<Card header="Card header" footer="Card footer">
Card with header and footer. Card headers are used to display card
titles and footers for additional information or just for custom
actions.
</Card>
<Card>
Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
Mauris aliquet magna justo.
</Card>
<BlockTitle withBlock={false}>Outline Cards</BlockTitle>
<Card outline>
This is a simple card with plain text, but cards can also contain their
own header, footer, list view, image, or any other element.
</Card>
<Card outline header="Card header" footer="Card footer">
Card with header and footer. Card headers are used to display card
titles and footers for additional information or just for custom
actions.
</Card>
<Card outline>
Another card. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse feugiat sem est, non tincidunt ligula volutpat sit amet.
Mauris aliquet magna justo.{' '}
</Card>
<BlockTitle withBlock={false}>Card With List View</BlockTitle>
<Card>
<List nested className="-m-4">
<ListItem href title="Link 1" />
<ListItem href title="Link 2" />
<ListItem href title="Link 3" />
<ListItem href title="Link 4" />
<ListItem href title="Link 5" />
</List>
</Card>
<BlockTitle withBlock={false}>Styled Cards</BlockTitle>
<div className="lg:grid lg:grid-cols-2">
<Card
header={
<div
className="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
style={{
backgroundImage:
'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
}}
>
Journey To Mountains
</div>
}
footer={
<div className="flex justify-between">
<Link>Like</Link>
<Link>Read more</Link>
</div>
}
>
<div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
<p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
efficitur vitae non felis. Phasellus quis nibh hendrerit...
</p>
</Card>
<Card
header={
<div
className="-mx-4 -my-2 h-48 p-4 flex items-end text-white font-bold bg-cover bg-center"
style={{
backgroundImage:
'url(https://cdn.framework7.io/placeholder/people-1000x600-6.jpg)',
}}
>
Lorem Ipsum
</div>
}
footer={
<div className="flex justify-between">
<Link>Like</Link>
<Link>Read more</Link>
</div>
}
>
<div className="text-gray-500 mb-3">Posted on January 21, 2021</div>
<p>
Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies
efficitur vitae non felis. Phasellus quis nibh hendrerit...
</p>
</Card>
</div>
</Page>
);
}
Code licensed under MIT.
2021 © Tailwind Mobile by nolimits4web.