Halstack
Design system
v7.0.0
OverviewIntroduction
ComponentsAccordionAlertApplication layoutBleedBoxBulleted ListButtonCardCheckboxChipDate InputDialogDropdownFile InputFlexFooterHeaderHeadingInsetLinkNav TabsNumber InputPaginatorParagraphPassword InputProgress BarQuick NavRadio GroupResultset TableSelectSidenavSliderSpinnerSwitchTableTabsTagText InputTextareaToggle GroupTypographyWizard
Card
Ready
Cards are a container of information, actions and data with a hierarchy to make easy scanning the content. A card can be defined as a unit, so it has all the information within it, making the component useful to show images, text, and interactive elements. The structure of the card can be seen as blocks, each block is optional to be displayed but the overall element should make a cohesive design, even if it includes text, images or other elements.
warning
The
contentPadding prop has been deprecated. Consider using layout components like the Inset for the same purpose.| Name | Default | Description |
|---|---|---|
| imageSrc: string | URL of the image that will be placed in the card component. In case of omission, the image container will not appear and the content will occupy its space. | |
| imageBgColor: string | black | Color of the image background. |
| imagePadding: string | object | Size of the padding to be applied to the image section of the component (`xxsmall` | `xsmall` | `small` | `medium` | `large` | `xlarge` | `xxlarge`). You can pass an object with `top`, `bottom`, `left` and `right` properties in order to specify different padding sizes. | |
| imagePosition: `after` | `before` | `before` | Whether the image should appear in relation to the content. |
| linkHref: string | If defined, the card will be displayed as an anchor, using this prop as `href`. Component will show some visual feedback on hover. | |
| onClick: function | This function will be called when the user clicks the card. Component will show some visual feedback on hover. | |
| imageCover: boolean | false | Whether the image must cover the whole image area of the card. |
| margin: string | object | Size of the margin to be applied to the component (`xxsmall` | `xsmall` | `small` | `medium` | `large` | `xlarge` | `xxlarge`). You can pass an object with `top`, `bottom`, `left` and `right` properties in order to specify different margin sizes. | |
| contentPadding: string | object | Deprecated Size of the padding to be applied to the content area (`xxsmall` | `xsmall` | `small` | `medium` | `large` | `xlarge` | `xxlarge`). You can pass an object with `top`, `bottom`, `left` and `right` properties in order to specify different padding sizes. | |
| tabIndex: number | 0 | Value of the tabindex given when there is an href. |
| outlined: boolean | true | Whether the card must be outlined. |
| children: node | Custom content that will be placed in the card component. |