Card

Card is a component that presents information in a card-like format, typically used to wrap images, text, and action buttons, commonly seen in displaying products, user information, or news.

Tailsee has implemented different scenarios such as cards with images, newsletters, task information, along with expressive entry animations.

Cards are used in many other components and blocks.

Basic

Basic Style

Basic style card, simple and practical.

With Header

Card with header suitable for information display.

With Footer

Card with footer providing additional information or action buttons.

Animation

Hover Gradient Border Animation

Card with gradient border animation on hover for visual enhancement.

Code snippet not found, please check if the component name is correct

Hover Border Reveal Animation

Card with border reveal animation on hover for dynamic feedback.

Code snippet not found, please check if the component name is correct

Hover Underline Animation

Card with underline animation on hover suitable for content emphasis.

Code snippet not found, please check if the component name is correct

Hover Scale Image Animation

Card with image scaling on hover to attract user attention.

Code snippet not found, please check if the component name is correct

Hover Image Overlay Animation

Card showing image overlay on hover suitable for displaying more information.

Code snippet not found, please check if the component name is correct

Items Stagger Animation

Card with staggered animation for items within for added dynamics.

Code snippet not found, please check if the component name is correct

Card Group Animation

Group Slide And Spread Animation

Group cards with slide and spread animation suitable for multiple card displays.

Code snippet not found, please check if the component name is correct

Skew With Scroll Progress Animation

Card skewing based on scroll progress for added interactivity.

Code snippet not found, please check if the component name is correct

With Image

With Title And Description

Card with title and description suitable for detailed information display.

Code snippet not found, please check if the component name is correct

With Image And User Profile

Card containing user avatar for user information display.

Code snippet not found, please check if the component name is correct

With Full Overlay

Card with full image background for more expressiveness.

Code snippet not found, please check if the component name is correct

With Newsletter

With Input

Card containing input field suitable for forms or interactive scenarios.

Code snippet not found, please check if the component name is correct

With Image Overlay

Card with image overlay for enhanced visual effects.

Code snippet not found, please check if the component name is correct

Scene

With Charts

Card with charts suitable for data visualization.

Code snippet not found, please check if the component name is correct

With User Profile

Card containing user profile information suitable for user profile display.

Code snippet not found, please check if the component name is correct