Card

A Card is container to display related pieces of information in a single unit. Cards also provide summary of the information and a linked entry point to further details of that content. Few uses of Card is to show movie titles on an OTT platform, product on an e-commerce website, feed of posts or articles on a website.

Card expands to occupy all available horizontal within its container by default, you can change it to fit the content as well. Card comes in three sizes small (s), medium (m) & large (l).

Usage

import { Card } from "@asphalt-react/card"

function App() {
  return (
    <Card>
      <div>Content</div>
    </Card>
  )
}

Variants

Card have two variants -

1. Elevated - Card appears with shadow around it, which makes it visually distinct from the container surface and has more emphasis.

2. Outlined - Card appears with border around it, has less emphasis that the elevated variant.

Card can also appears without shadow and border to have more subdued look and minimal emphasis.

If values for none of them is set, then the Card will appear in the elevated variant.

Supported intents

• primary

• secondary

• tertiary

• success

• info

• warning

• danger

• brand

• inverse

Props

children

Node for card content.

| type | required | default | | ---- | -------- | ------- | | node | true | N/A |

size

Controls size of card. Possible values are "s", "m" & "l" for small, medium & large respectively.

| type | required | default | | ------ | -------- | ------- | | string | false | "m" |

outlined

Adds outline around card.

| type | required | default | | ---- | -------- | ------- | | bool | false | null |

elevated

Elevates the card from the container surface.

| type | required | default | | ---- | -------- | ------- | | bool | false | null |

bezel

Adds padding inside card.

| type | required | default | | ---- | -------- | ------- | | bool | false | true |

fitWidth

Adjusts the width of the card as per its content.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

primary

Applies primary intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

secondary

Applies secondary intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

tertiary

Applies tertiary intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

brand

Applies brand intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

inverse

Applies inverse intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

danger

Applies danger intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

warning

Applies warning intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

success

Applies success intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

info

Applies info intent.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |