Flexible and extensible content containers for displaying data, images, and actions.
Basic Cards
Standard cards with header, body, and footer sections.
Simple Card
A simple card with just body content.
This is the main content area of the card. It allows for flexible content placement.
Card with Header
Optional description text.
This card features a distinct header and footer section, ideal for structured content.
Variants
Different styles for various contexts.
Flat Card
Use .ak-card-flat for a borderless, shadowless look, often used on colored backgrounds.
Elevated Card
Use .ak-card-elevated to give the card more depth with a stronger shadow.
Compact Card
Use .ak-card-compact for reduced padding, suitable for dense data displays.
Modern Variants
Contemporary styles including glassmorphism, gradients, and advanced hover effects.
Glass Effect
Use .ak-card-glass for a modern frosted glass aesthetic. Works best on complex backgrounds.
Gradient Primary
Vibrant background
Use .ak-card-gradient-primary for high-emphasis cards that need to stand out.
Horizontal Layout
Use .ak-card-horizontal for list-like displays. The image sits to the left of the content.
Hover Effects
Lift Effect
Use .ak-card-hover-lift to smoothly raise the card on hover.
Border Effect
Use .ak-card-hover-border to highlight the border color on hover.
Glow Effect
Use .ak-card-hover-glow to add a subtle glow around the card on hover.
Interactive
Cards that respond to user interaction.
Hover Me
Use .ak-card-interactive to add hover effects and indicate clickability.
Clickable Card
Perfect for using cards as navigation links or actionable items.
Images
Cards with integrated media.
Image at Top
Images placed as the first child of .ak-card automatically get rounded top corners.
Image in Body
You can also place images inside the body content.
