Card
The <Card> is a content component to group informations inside the UI, as well it provides a better readability and helps the user to find relevant informations in an easy way.
<Card> components usually contain images, text, links or action components like buttons.
If you want, you can style the <Card> and create custom variants and sizes.
Import
import { Card } from '@marigold/components';Appearance
| Property | Type | Description |
|---|---|---|
variant | hovering | The available variants of this component. |
size | small | The available sizes of this component. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
p | number | none | Padding of the component. |
px | number | none | Padding horizontal (left and right) of the component. |
py | number | none | Padding vertical (top and bottom) of the component. |
pt | number | none | Padding top of the component. |
pr | number | none | Padding right of the component. |
pl | number | none | Padding left of the component. |
pb | number | none | Padding bottom of the component. |
Examples
Card with form fields
The Example shows how to use the <Card> in a common use case with form fields.
Personal Settings
Card with some Text
On this example you can see an imformation card with used prop p.
Professor Severus Snape
Professor Severus Snape (9 January, 1960[1] - 2 May, 1998)[2] was an English half-blood[3] wizard serving as Potions Master (1981-1996), Head of Slytherin House (1981-1997), Defence Against the Dark Arts professor (1996-1997), and Headmaster (1997-1998) of the Hogwarts School of Witchcraft and Wizardry as well as a member of the Order of the Phoenix and a Death Eater. His double life played an extremely important role in both of the Wizarding Wars against Voldemort.
Source