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

Types

• Static Card

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

• 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	{}