Card
A surface that stands out.
Showcase
card content
card content
Source
<Card>card content</Card>
<Card outline>card content</Card>Properties #
Style Properties
Name | Default | Type | Description |
|---|---|---|---|
outline | false | boolean | Instead of emphasizing the card with a shadow, uses an outline. |
tight | false | boolean | Removes the internal padding for full control over the content. |
Functional Properties
Name | Default | Type | Description |
|---|---|---|---|
... | any | Everything else will be passed to the underlying <div> element. |
Class Properties
All <Card> components use the .card class.
Falsy values passed to classes will be disregarded.
Name | Default | Type | Description |
|---|---|---|---|
class | null | string | A class string to add to the component. |
Slots #
Default slot
The content of the card.
SCSS Variables #
Name | Description | Default |
|---|---|---|
$main | The color of the border for outline cards. | #4300B0 |
$background | The background color of the card. | #FFFFFF |
$shadow-0 | The shadow of regular cards. | hover me 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); |
$card-radius | The curvature radius of a card. | 1.25em |