import { Card } from '@houzz/ui'; < HorizontalStack gap = " XL " height = " 200px " >
< Card width = " 200px " display = " flex " alignItems = " center " justifyContent = " center " >
Primary card
</ Card >
< Card variant = " stroke " width = " 200px " display = " flex " alignItems = " center " justifyContent = " center " >
Stroke card
</ Card >
< Card variant = " tint " width = " 200px " display = " flex " alignItems = " center " justifyContent = " center " >
Tint card
</ Card >
</ HorizontalStack >
CardSystem Props
COMMONTYPOGRAPHYBORDERLAYOUTPOSITIONFLEXGRIDLearn More Name Type Description gradientResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>- variant"stroke" | "primary" | "tint"- withHoverbooleanAdd hover effect if true cardType"stroke" | "primary" | "tint"@deprecated
While Card provides a hover effect via withHover, please ensure that the Card is focusable if there is an associated action. If the action is nested within the card, set withHover to false