Uilora Cards
Stacked overlapping cards timeline with hover expand.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| events | Array<{date, title, description, image, color}> | 5 Uilora milestones | Timeline events with colored borders. |
| title | string | Our Journey So Far | Section heading. |
| subtitle | string | Every milestone that shaped Uilora. | Section subtitle. |
| accentColor | string | #1a1a1a | Header text color. |
When to Use
Ideal for company histories that want a playful, layered card aesthetic. The stacking creates visual depth without a traditional timeline line.
Best Practices
Use distinct accent colors for each card to create visual rhythm. Keep to 4-6 events for clean stacking.
Why This Component Matters
Stacked cards create a sense of history building on itself — each milestone sits on top of the previous, visually representing growth.
FAQ
QHow does the overlap work?
Cards use negative top margin to create a deck-like overlap. On mobile, the overlap is removed for clarity.
QCan I click to expand?
Yes, clicking a card expands it with increased padding and a glowing border accent.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.