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.

Types

1. Static Card

Used for non-interactive or decorative layouts that display information only.

2. Interactive Card (Tile)

An interactive variant of the Card for actionable content such as selectable items, navigation entries, or toggleable options. It shares the same visual foundation as the Card but supports user interactions like click, selection, focus, and disabled states.

Use the as prop to render the Tile as a button, link, or div. Avoid nesting other interactive elements (e.g., buttons, links, or form controls) inside the Tile to maintain accessibility.

If you need to include interactive elements like a radio button or checkbox inside, use a div as the element instead.

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 |

Tile

Props

children

Node for the content inside the Tile.

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

size

Controls the size of the Tile. Possible values: "xs" (extra-small), "s" (small), "m" (medium), "l" (large).

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

outlined

Adds an outline around the Tile.

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

elevated

Elevates the Tile from the container surface.

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

bezel

Adds spacing inside the Tile.

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

fitWidth

Adjusts the Tile width based on its content.

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

selected

Indicates whether the Tile is currently selected.

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

disabled

Disables interaction with the Tile.

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

primary

Applies primary intent styling.

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

secondary

Applies secondary intent styling.

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

brand

Applies brand intent styling.

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

inverse

Applies inverse intent styling (e.g., for dark backgrounds).

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

danger

Applies danger intent styling, usually used for destructive actions.

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

warning

Applies warning intent styling, used for cautionary actions or alerts.

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

success

Applies success intent styling, typically used for positive actions.

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

info

Applies info intent styling, used for informational context.

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

invalid

Applies invalid styles.

| 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 |

as

Html element/React component to render as container.

| type | required | default | | ----------- | -------- | -------- | | elementType | false | "button" |

asProps

Accepts props & attributes for the link element. You can pass attributes like onKeyPress, href.

| type | required | default | | ------ | -------- | ------- | | object | false | {} |