Card React Component

Card Components
Card Props
Examples

Cards, along with List View, is a one more great way to contain and organize 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

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.bgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.footerTextIos	string	'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.footerTextMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
colors.outlineIos	string	'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	''
colors.textMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	string	'div'	Component's HTML Element
contentWrap	boolean	true	Wraps card content with extra element with padding
contentWrapPadding	string	'p-4'	Content wrap padding (if `contentWrap` enabled)
footer	ReactNode		Content of the Card footer
footerDivider	boolean	false	Enabled divider between footer and content
header	ReactNode		Content of the Card header
headerDivider	boolean	false	Enabled divider between header and content
margin	string	'm-4'	Tailwind CSS margin class
outline	boolean	undefined	Makes card outline. Overwrites `outlineIos` and `outlineMaterial`
outlineIos	boolean	false	Makes card outline in iOS theme
outlineMaterial	boolean	false	Makes card outline in Material theme
raised	boolean	undefined	Makes card raised. Overwrites `raisedIos` and `raisedMaterial`
raisedIos	boolean	false	Makes card raised in iOS theme
raisedMaterial	boolean	false	Makes card raised in Material theme

Examples

Cards.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Card,
  BlockTitle,
  List,
  ListItem,
  Link,
  Button,
} from 'konsta/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}>Outline With Dividers</BlockTitle>
      <Card
        outline
        header="Card header"
        footer="Card footer"
        headerDivider
        footerDivider
      >
        Card with header and footer. Card headers are used to display card
        titles and footers for additional information or just for custom
        actions.
      </Card>

      <BlockTitle withBlock={false}>Raised Cards</BlockTitle>
      <Card raised>
        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 raised 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 raised>
        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
          outline
          footer={
            <>
              <div className="flex justify-between material:hidden">
                <Link>Like</Link>
                <Link>Read more</Link>
              </div>
              <div className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse">
                <Button rounded inline>
                  Like
                </Button>
                <Button rounded inline outline>
                  Read more
                </Button>
              </div>
            </>
          }
        >
          <div
            className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
            style={{
              backgroundImage:
                'url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)',
            }}
          >
            Journey To Mountains
          </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
          footer={
            <>
              <div className="flex justify-between material:hidden">
                <Link>Like</Link>
                <Link>Read more</Link>
              </div>
              <div className="flex justify-start ios:hidden space-x-2 rtl:space-x-reverse">
                <Button rounded inline>
                  Like
                </Button>
                <Button rounded inline outline>
                  Read more
                </Button>
              </div>
            </>
          }
        >
          <div
            className="ios:-mx-4 ios:-mt-4 h-48 p-4 flex items-end text-white ios:font-bold bg-cover bg-center material:rounded-xl mb-4 material:text-[22px]"
            style={{
              backgroundImage:
                'url(https://cdn.framework7.io/placeholder/people-1000x600-3.jpg)',
            }}
          >
            Journey To Mountains
          </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>
  );
}