Card
The Card component is a versatile container used to group together information or actions in a user interface. It can be used to display content, images, buttons or links, while offering advanced customization to suit various styles and contexts.
This example shows the simple use of the Card component with its default settings. Ideal for fast, intuitive integration.
The density property lets you adjust the spacing and height of the Card. The available options: compact, comfortable and default, adapt to different design needs.
The variant property lets you customize the Card’s style. The available options: outline, text and filled, offer visual variations adapted to different contexts.
Cards can be interactive, responding to events such as clicks or hovers. This example shows how to manage events for dynamic interactions.
The disabled property allows you to disable a Card, preventing any interaction. This can be useful for indicating that an action or option is not available.
For better structure, combine your Cards with Avatars and clear Buttons.