@illa-design/card v1.3.0

Card

The Card component classifies information into titles and details.

Installation

yarn add @illa-design/card

Import component

import { Card } from "@illa-design/card"

API

Card Basic Properties

cardMeta Basic Properties

cardGrid Basic Properties

Examples

Basic usages

<Card size="small" title="small" extra={<Link>More</Link>}>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</Card>

Set cardMeta

<Card actions={[<LikeIcon />, <ShareIcon />, <MoreIcon />]}>
  <Meta title="CardMeta" description="MetaContent" avatar={<Avatar />} />
</Card>

Set CardGrid

<Card bordered={true} style={{ width: "100%" }}>
  {new Array(7).fill(null).map((_, index) => {
    const hoverable = index % 2 === 0
    return (
      <CardGrid key={index} hoverable={hoverable} style={{ width: "25%" }}>
        <Card
          style={{ width: "100%" }}
          title={`Card${index}`}
          extra={<Link>More</Link>}
        >
          {new Array(2).fill(null).map((_, index) => (
            <p style={{ margin: 0 }} key={index}>
              {hoverable ? "Card allow to hover" : "Card content"}
            </p>
          ))}
        </Card>
      </CardGrid>
    )
  })}
</Card>