# ui-cards

- Author: AzkaKhizer
- Repository: AzkaKhizer/todoapp-phase5
- Version: 20260208000416
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/AzkaKhizer/todoapp-phase5
- Web: https://mule.run/skillshub/@@AzkaKhizer/todoapp-phase5~ui-cards:20260208000416

---

# Skill: Modern UI Cards

## Purpose
Create clean, modern cards for layouts, dashboards, portfolios, and content sections.

## Design Style
- Soft elevation
- Optional glassmorphism
- Clean spacing
- Rounded edges

## Core Styles
- Border radius: 16–24px
- Background:
  - Solid: #ffffff
  - Glass: rgba(255,255,255,0.12)
- Backdrop blur (glass): 12–24px
- Padding: 20–32px

## Card Types
- Content card
- Feature card
- Profile card
- Stat card
- Interactive card

## Interaction
- Hover elevation
- Slight scale or lift
- Optional border glow

## Layout Rules
- Use grid or flex
- Maintain consistent spacing
- Avoid clutter inside cards

## Accessibility
- Semantic HTML
- Clickable cards must be keyboard accessible

## Output Expectations
- Reusable component
- Responsive by default
- Minimal visual noise