Card

Title

Subtitle

Some description

Footer

Visit site

import React from 'react';
import { Card } from 'chic-ui';

<Card
  type="secondary"
  title="Title"
  subTitle="Subtitle"
  description="Some description"
  footer="Footer"
  href="https://github.com/karishmashuklaa/chic-ui"
  hrefText="Visit site"
/>;

Add Image to Card

Use the src prop to add an image to a card in the following manner

Title

Subtitle

Something about a cat

Footer

Visit site

import React from 'react';
import { Card } from 'chic-ui';

<Card
  type="light"
  src="kitten.jpg"
  title="Title"
  subTitle="Subtitle"
  description="Something about a cat"
  footer="Footer"
  href="https://github.com/karishmashuklaa/chic-ui"
  hrefText="Visit site"
/>;

CardGroups

Mutiple cards can be wrapped together in the <CardGroup /> component

Card 1

Lorem ipsum dolor sit amet

Written on 29/12/2021

Card 2

Lorem ipsum dolor sit amet

Written on 29/12/2021

Card 3

Lorem ipsum dolor sit amet

Written on 29/12/2021

import React from 'react';
import { CardGroup, Card } from 'chic-ui';

<CardGroup>
  <Card
    type="success"
    src="kitten.jpg"
    title="Card 1"
    description="Lorem ipsum dolor sit amet"
    footer="Written on 29/12/2021"
  />
  <Card
    type="info"
    src="kitten.jpg"
    title="Card 2"
    description="Lorem ipsum dolor sit amet"
    footer="Written on 29/12/2021"
  />
  <Card
    type="danger"
    src="kitten.jpg"
    title="Card 3"
    description="Lorem ipsum dolor sit amet"
    footer="Written on 29/12/2021"
  />
</CardGroup>;

API

import { Card } from 'chic-ui';

Name	Type	Default	Description
type	'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'info' | 'light'	'light'	Color of the card
src	string		Add image to the card
title	string		Add title to the card
subTitle	string		Add sub-title to the card
children	ReactNode		Pass children
description	string		Add description to the card
footer	ReactNode		Add footer to the card
href	string		Add links to the card
hrefText	string		Add texts to links
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component

import { CardGroup } from 'chic-ui';

Name	Type	Default	Description
children	ReactNode		Pass children
className	string		Provide external classnames to the component
style	React.CSSProperties		Override default styling of the component