Card

The Card component is a simple, reusable container designed to display content in a visually distinct way. It is styled with a subtle shadow and hover effect to emphasize the content it contains, making it ideal for displaying items like products, articles, or other collections of information.

Installation

bash
npm i @anakin-gbit/card

Usage

JSX
<Card>
  <h2>Title</h2>
  <p>Some description.</p>
</Card>

Title

Some description.

Styling

The Card accepts a theme property and will apply background and text colors.

JSX
<Card>
  <Card theme="theme0">theme0</Card>
  <Card theme="theme1">theme1</Card>
  <Card theme="theme2">
    theme2
    <Card theme="theme3">theme3</Card>
    <Card theme="theme4">theme4</Card>
  </Card>
</Card>
If a theme is passed then the background and test are set to--pallet-background-alt and --pallet-text.
If no theme is passed, the card gets a white background.
theme0
theme1
theme2
theme3
theme4

The Card also accepts a className prop which can be used to override the defaults.

JSX
<Card className={styles.overrideStyles}>passing className takses precedence</Card>
passing className takses precedence