Card

Quick start

Here's a quick start guide to get started with the card component

Importing Component

import { Card } from "@hover-design/react";

Code Snippets and Examples

Card Plain

<div className="App">
  <Card variant="plain">
    <h3>I am a card heading</h3>
    <p>I am card Content</p>
  </Card>
</div>

I am a card heading

I am card Content

Card Outline

<div className="App">
  <Card variant="outline">
    <h3>I am a card heading</h3>
    <p>I am card Content</p>
  </Card>
</div>

I am a card heading

I am card Content

Card Solid

<Card variant="solid">
  <h3>I am a card heading</h3>
  <p>I am card Content</p>
</Card>

I am a card heading

I am card Content

Card Shadow

<Card variant="shadow">
  <h3>I am a card heading</h3>
  <p>I am card Content</p>
</Card>

I am a card heading

I am card Content

Props Referece

Attributes	Values	Optional ?
children	JSX.Element	Yes
padding	small | medium | large | default	Yes
fontSize	small | medium | large	Yes
margin	small | medium | large | default	Yes
variant	outline | plain | solid | shadow	Yes