Notifications
Deja Brady sent you a friend request
2 hours • Communication
Jayvon Hull mentioned you in Minimal UI
a day • Project UI
Lainey Davidson added file to File manager
2 days • File manager
design.fig
2.3 Mb
Angelique Morse added new tags to File manager
3 days • File manager
Giana Brandt request a payment of $200
4 days • File manager
Theme Customizer
Customize layout & themes
Sidenav View
Choose sidenav layout style
Display Mode
Select Light or DarkDirection
Select a directionSidenav Color
Select sidenav theme colorCards
Basic Example
Standard card layout featuring an image figure, body contents, and action buttons.
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card with bottom image
Render the image figure at the bottom of the card content body.
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Horizontal
Layout cards horizontally with the image figure aligned next to the body.
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Image Overlay
Display text and action overlays directly on top of background card images.
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Card Title
A card component has a figure, a body part, and inside body there are title and actions parts
Background and color
Cards styled with solid background colors for visual emphasis.
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Border
Cards with outline border colors matching distinct state themes.
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card title!
A card component has a figure, a body part, and inside body there are title and actions parts
Card groups
Equal-height card columns grouped together in a grid layout.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Aura Cards
Wrap cards with the aura component to apply rotating glow borders.
Default Aura
A simple card wrapped with the default aura effect.
Rainbow Aura
A simple card wrapped with the animated rainbow aura effect.
Holo Aura
A simple card wrapped with the holographic aura effect.
Glow Aura
A simple card wrapped with the static glow aura effect.
Stacked Elements
Stack visual elements directly on top of each other using the stack component.
Top Notification
You have 3 new messages waiting in inbox.
Second Notification
Database backup completed successfully.
Third Notification
New user registration pending approval.
3D Hover Cards
Wrap cards with the hover-3d component to apply an interactive 3D tilt effect on hover.
Interactive 3D Card
Hover over this card to see the 3D tilt rotation in action.
Theme Colored 3D Card
Hovering tilts and rotates the card according to mouse position.
Neutral 3D Card
Provides a premium interactive experience with simple CSS transitions.