Card

Last updated: 2.0.0 (21/01/2024)

Usage

import { Card, Text, IconButton } from "@valence-ui/core";
import { Icon123 } from "@tabler/icons-react";

function MyComponent() { 
    return ( 
        <Card>
            <Card.Image
                src="https://image.src"
                alt="A random image"
            />
            <Card.Section>
                <Text>
                    Card text content!
                </Text>
            </Card.Section>
            <Card.Buttons>
                <IconButton>
                    <Icon123 />
                </IconButton>
            </Card.Buttons>
        </Card>
    )
}

Props

Extends GenericLayoutProps and PolymorphicButtonProps.

Property	Type	Description
size	ComponentSize	Defines the size class for this card.
radius	ComponentSize	Defines the radius size class for this card.
gap	CSSProperties["gap"]	Defines the gap size between this card's contents.
buttonProps	PrimitiveButtonProps	Optional props to pass to the button component of this card.
flexProps	FlexProps	Optional props to pass to the Flex component of this card.

CardImageProps

Extends GenericProps and GenericImageProps.

Property	Type	Description
radius	ComponentSize	Defines the radius size class of this image. Defaults to the theme default radius size class.
width	CSSProperties["width"]	Sets width css property.
height	CSSProperties["height"]	Sets height css property.

CardSectionProps

Extends FlexProps.

No unique props.

CardButtonsProps

Extends FlexProps.

No unique props.