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.


imageSrcstringURL 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.-
imageBgColorstringColor of the background image.'black'
imagePadding'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | PaddingSize of the padding to be applied to the image section of the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.-
imagePosition'after' | 'before'Where the image should appear in relation to the content.'before'
linkHrefstringIf defined, the card will be displayed as an anchor, using this prop as href. The component will display visual information on mouse-over.-
onClick() => voidThis function will be called when the user clicks the card. Component will show some visual feedback on hover.-
imageCoverbooleanWhether the image must cover the its whole area of the card.false
outlinedbooleanDetermines whether or not the component should have an outline.true
childrenReact.ReactNodeCustom content that will be placed inside the component.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
tabIndexnumberValue of the tabindex attribute applied when the component is clickable.0


Basic usage