Component to support the structuring of information.

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.



To import the component you just have to use this code below.

import { Card } from '@marigold/components';


variant-The available variants of this component.
sizestretchThe available sizes of this component.


pnumbernonePadding of the component.
pxnumbernonePadding horizontal (left and right) of the component.
pynumbernonePadding vertical (top and bottom) of the component.
ptnumbernonePadding top of the component.
prnumbernonePadding right of the component.
plnumbernonePadding left of the component.
pbnumbernonePadding bottom of the component.


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.