Card
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.
| Name | Type | Description | Default |
|---|---|---|---|
| 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 | Color of the background image. | 'black' |
| imagePadding | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Padding | Size 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' |
| linkHref | string | If defined, the card will be displayed as an anchor, using this prop as href. The component will display visual information on mouse-over. | - |
| onClick | () => void | This function will be called when the user clicks the card. Component will show some visual feedback on hover. | - |
| imageCover | boolean | Whether the image must cover the its whole area of the card. | false |
| outlined | boolean | Determines whether or not the component should have an outline. | true |
| children | React.ReactNode | Custom content that will be placed inside the component. | - |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | Size 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. | - |
| tabIndex | number | Value of the tabindex attribute applied when the component is clickable. | 0 |