Card

Card is a container for text, photos and actions in the context of a single subject.

See the Divider component for more details.

You can set the data-footer-blurred attribute to the card to blur the footer.

You can use other LuxeyUI components inside the card to compose a more complex card.

If you pass the data-pressable attribute to the card and set it to true, it will be function as a button.

• card: The main container of the card, where the header, body, and footer are placed.
• card-header: The header of the card, usually used for the title.
• card-body: The body of the card, where the main content is placed.
• card-footer: The footer of the card, usually used for actions.

Card has the following attributes on the base element:

• data-disabled: Whether the card is disabled.
• data-pressable: Whether the card should allow to be pressed.
• data-hoverable: Whether the card should change the background on hover.
• data-full-width: Whether the card should take the full width of its parent.
• data-blurred: Whether the card background should be blurred.
• data-blurred-footer: Whether the card footer background should be blurred.
• data-disable-animation: Whether to disable the animation.
• data-disable-ripple: Whether to disable ripple effect. Only when data-pressable is true.