Components

Card

A flexible and customizable Card component used to group related content and actions in a container.

Component

View code

Show playground

Add card structure here

Usage

 <template>
    <Card>
        <!-- Optional: Use card header if you need to insert title, buttons or other elements. -->
        <CardHeader>
            <!-- Your card footer content here -->

            <!-- Optional: Card title -->
            <CardTitle title="Card title example" />
        </CardHeader>

        <!-- Highly recommended: Useful to display the content in a proper way. -->
        <CardBody>
            <!-- Your card body content here -->
        </CardBody>

        <!-- Optional: Use card footer if you need to insert links, button or additional info. -->
        <CardFooter>
            <!-- Your card footer content here -->

            <CardActions>
                <!-- Your card actions here (ex. buttons) -->
            </CardActions>
        </CardFooter>
    </Card>
</template>

Components

Name	Description
`<Card>`	The main container that wraps all card content and structure.
`<CardHeader>`	Defines the top section of the card, typically used for the title and optional action elements.
`<CardBody>`	The primary content area of the card. Recommended for displaying text, media, or other main content.
`<CardFooter>`	The bottom section of the card, suitable for links, secondary actions, or additional information.
`<CardTitle>`	Used to render the card's title inside the header section.
`<CardActions>`	Container for action buttons, usually placed in the footer or header.

Props

Card

Props	Default	Type
`hasShadow`	`true`	`boolean`
`hasBorder`	`true`	`boolean`

hasShadow

Displays a shadow effect around the card.

 <template>
    <Card hasShadow>
        <!-- Your card content here -->
    </Card>
</template>

Type: boolean
Default: true

hasBorder

Shows a border around the card.

 <template>
    <Card hasBorder>
        <!-- Your card content here -->
    </Card>
</template>

Type: boolean
Default: true

Card footer

Props	Default	Type
`hasBorder`	`false`	`boolean`

hasBorder

Displays a border top of the footer, used as a divider.

 <template>
    <Card>
        <!-- ... -->
        <CardFooter hasBorder>
            <!-- Footer content -->
        </CardFooter>
    </Card>
</template>

Type: boolean
Default: false

Card title

Props	Default	Type
`title`	`Card title`	`string`

title

Sets a title for the card title.

 <template>
    <Card>
        
        <CardHeader>
            <CardTitle title="Card title example" />
        </CardHeader>
        <!-- ... -->
    </Card>
</template>

Type: string
Default: 'Card title'