@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 cards are to show movie titles on an OTT platform, product on an ecommerce website, feed of posts or articles on a website.

There are two variants:

• Outlined (default): Outline cards renders an outline border. When you have a big collection choose outline cards for less visual clutter.

• Elevated: Elevated cards renders a drop shadow to make the card visually raise from the parent surface. Use elevated cards when the content needs more emphasises.

Usage

import Card from "@asphalt-react/card"

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

Props

children

Card content

type	required	default
node	true	N/A

elevated

Renders elevated card

type	required	default
bool	false	N/A

outlined

DEPRECATED
The card is outlined by default. We'll remove this prop in the next major release.

Renders outline card.

type	required	default
bool	false	N/A

stretch

Stretches the card to it's container width

type	required	default
bool	false	N/A