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 |