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.
There are following components included:
Card
Name | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.bg | string | 'bg-block-strong-light dark:bg-block-strong-dark' | Card bg color |
colors.footerText | string | 'text-black dark:text-white' | Card footer text color |
component | string | 'div' | Component's HTML Element |
footer | ReactNode | Content of the Card footer | |
header | ReactNode | Content of the Card header | |
margin | string | 'm-4' | Tailwind CSS margin class |
outline | boolean | Makes card outline |
import React from 'react';import {Page,Navbar,NavbarBackLink,Card,BlockTitle,List,ListItem,Link,} from 'konsta/react';export default function CardsPage() {return (<Page><Navbartitle="Cards"/><BlockTitle withBlock={false}>Simple Cards</BlockTitle><Card>This is a simple card with plain text, but cards can also contain theirown 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 cardtitles and footers for additional information or just for customactions.</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 theirown 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 cardtitles and footers for additional information or just for customactions.</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"><Cardheader={<divclassName="-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 ultriciesefficitur vitae non felis. Phasellus quis nibh hendrerit...</p></Card><Cardheader={<divclassName="-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 ultriciesefficitur vitae non felis. Phasellus quis nibh hendrerit...</p></Card></div></Page>);}