@asphalt-react/card v1.22.0

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

elevated

Renders elevated card

outlined

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

Renders outline card.

stretch

Stretches the card to it's container width