DXC Logo
Halstack Design System
v16.1.0

Card

A card is a flexible, modular UI components used to group related information and actions within a contained, clean and visually distinct layout.

Props

NameTypeDescriptionDefault
childrenReact.ReactNodeCustom content that will be placed inside the component.-
imageBgColorstringColor of the background image.'black'
imageCoverbooleanWhether the image must cover the its whole area of the card.false
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'
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.-
linkHrefstringIf defined, the card will be displayed as an anchor, using this prop as href. The component will display visual information on mouse-over.-
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.-
onClick() => voidThis function will be called when the user clicks the card. Component will show some visual feedback on hover.-
outlinedbooleanDetermines whether or not the component should have an outline.true
tabIndexnumberValue of the tabindex attribute applied when the component is clickable.0

Examples

Basic usage

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcCard imageSrc="https://picsum.photos/id/1022/200/300">
        <DxcInset space="var(--spacing-padding-m)">
          <DxcParagraph>Personal information</DxcParagraph>
        </DxcInset>
      </DxcCard>
    </DxcInset>
  );
}