Installation

To install a component run

$ npm install @hawk-ui/card --save

Please import CSS styles via

@import '/path__to__node_modules/@hawk-ui/card/dist/index.min.css

Usage

Box Card

Demo

import Card from '@hawk-ui/card';

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <div>Without Hoverable</div>
    <br />
    <Card />
  </div>

  <div>
    <div>With Hoverable</div>
    <br />
    <Card
      isHoverable
    />
  </div>

  <div>
    <div>With Clickable</div>
    <br />
    <Card
      isClickable
      onClick={() => { alert('Card Clicked'); }}
    />
  </div>

  <div>
    <div>With Disabled</div>
    <br />
    <Card
      isDisabled
      onClick={() => { alert('Card Clicked'); }}
    />
  </div>
</div>

Circle Card

Demo

import Card from '@hawk-ui/card';

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <div>
    <div>Without Hoverable</div>
    <br />
    <Card
      layout="circle"
    />
  </div>

  <div>
    <div>With Hoverable</div>
    <br />
    <Card
      layout="circle"
      isHoverable
    />
  </div>
  
  <div>
    <div>With Clickable</div>
    <br />
    <Card
      layout="circle"
      isClickable
      onClick={() => { alert('Card Clicked'); }}
    />
  </div>
</div>