@asphalt-react/card

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 -

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

• 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 "xs", "s", "m" & "l" for extra-small, small, medium & large respectively.

type	required	default
enum	false	"m"

outlined

Adds outline around card.

type	required	default
union	false	null

elevated

Elevates the card from the container surface.

type	required	default
union	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

debossTop

Applies deboss top effect to the card.

type	required	default
bool	false	false

bevelTop

Adds a bevel top effect to the card.

type	required	default
bool	false	false

bevelBottom

Adds a bevel bottom effect to the card.

type	required	default
bool	false	false