Card

A versatile Card component that displays content with various styles and layouts.

Import

import { VKCard } from "@vivakits/react-components";

Example

A basic card design using VKCard components.

Header

Defines the top section of the card that appears above the main content. Allows insertion of custom elements like icons, additional actions, or supplementary information to provide context or visual hierarchy. You can set top section using VKCardHeader .

Title

Renders the primary heading or title of the card. Supports both string and complex React node types, enabling rich text formatting, inline components, or custom title designs beyond simple text. You can set title inside VKCardHeader using title prop.

Content

Specifies the primary content area of the card. Provides maximum flexibility by accepting any renderable React content, from simple text to complex nested components or interactive elements. You can set contents inside VKCardContent.

Footer

Defines the bottom section of the card that appears after the main content. Typically used for action buttons, additional information, metadata, or supplementary controls related to the card's content. You can set using VKCardFooter

Variant

Determines the visual style and presentation of the card. Enables designers to choose between different rendering modes that can adapt to various design system requirements and create visual hierarchy. You can set VKCard component different variant using variant prop set values solid or outline as per requirements.

Width

Specifies the horizontal dimension of the card. Allows precise control over the card's width, supporting both fixed pixel values and responsive percentage-based measurements to fit different layout contexts. You can set different size using width prop set value sm | md | lg | xl .

BackgroundColor

Allows custom color specification for the card's background area. Provides design flexibility to match brand guidelines, create visual hierarchies, or implement specific design system color requirements. You can set background color using bgColor prop set value primary | secondary | warning | success | danger .

ClassName

Enables attachment of custom CSS classes to the card component. Provides extensive styling flexibility, allowing developers to extend or override default styles and seamlessly integrate with existing design systems. You can set custom design using className prop.

User Profile

More Info

Provide a clear and concise explanation of the purpose of this card. Include key details about the topic or functionality it addresses. Mention any specific use case or scenario where this card is relevant.

View more

API Reference