Houzz UI

Basic usage

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>

<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>

Props

Card

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`gradient`	`ResponsiveValue<BackgroundProperty<TLengthStyledSystem>, Required<Theme<TLengthStyledSystem>>>`	-
`variant`	`"primary" \| "stroke" \| "tint"`	-
`withHover`	`boolean`	Add hover effect if true
`cardType`	`"primary" \| "stroke" \| "tint"`	@deprecated Use `variant` instead - will be removed in 2.0

Accessibility

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

CardHealthy

Basic usage

Props

System Props

Accessibility