UltraKit · Widget #24

8 card styles, 4 layouts (alternating, left, right, centered), 4 node shapes and 4 entry animations. Below are the kinds of pages you would actually drop this widget into.

USE CASE · OUR STORY ON AN ABOUT PAGE

The classic alternating layout — the default choice for a company history section, one milestone per side.

2018
Milestone

Company Founded

Started with a bold idea and a two-person team working out of a co-working space.
2019

First Product Launch

Shipped to 500 early adopters and got our first wave of real user feedback.
2021
Funding

Series A Funding

Raised $4.2M to grow the team and accelerate the roadmap.
2024
Latest

100K Users

Crossed 100,000 active users with the launch of Platform 2.0.
USE CASE · PRODUCT ROADMAP ON A CHANGELOG PAGE

All-left layout reads top-to-bottom like a changelog — soft tinted cards keep it quiet and easy to scan.

Q1

Dark Mode

System-wide dark mode with automatic OS detection.
Q2
Shipped

Team Workspaces

Shared workspaces with role-based permissions.
Q3

Public API

A documented REST API with rate-limited free tier.
Q4
Coming Soon

Mobile App

Native iOS and Android apps launching in beta.
USE CASE · RELEASE NOTES IN A DARK-MODE CHANGELOG

A dark timeline that matches a dark-mode docs or changelog page instead of clashing with it.

v3.2

Faster Search

Search index rebuilt — queries now return in under 80ms.
v3.1
Fix

Webhook Retries

Failed webhooks now retry automatically with backoff.
v3.0
Major

New Editor

A completely rebuilt block editor with live collaboration.
USE CASE · CONFERENCE SCHEDULE ON AN EVENT PAGE

Glass cards keep the hero photo visible behind the timeline — centered layout reads like a single clean agenda.

9:00

Doors Open

Registration, coffee, and networking in the main hall.
10:00
Keynote

Opening Keynote

Where the industry is heading in the next 5 years.
1:00

Breakout Sessions

Choose from six tracks across design, engineering and growth.
6:00

Closing Reception

Drinks, food, and a last chance to network before you go.
USE CASE · "HOW WE BUILT THIS" ON A BLOG POST

A left accent border feels editorial — right at home inside a long-form blog post walking through a project.

Week 1

The Problem

Support tickets kept asking for the same missing feature.
Week 2

The Prototype

A rough version built in a weekend to test the core idea.
Week 4

User Testing

Five customers tried it live — three big changes came out of it.
Week 6
Shipped

Shipped

Released to everyone, with a follow-up post planned in a month.
USE CASE · PROCESS TIMELINE ON A CASE STUDY PAGE

A gradient header band on each card gives the case study a bit of visual energy without overdoing it.

Step 1

Audit

Reviewed the existing checkout flow and found 4 major drop-off points.
Step 2

Redesign

Rebuilt the flow around a single-page checkout with saved details.
Step 3
+27%

Results

Checkout completion rose 27% within the first month post-launch.
USE CASE · SETUP STEPS ON AN ONBOARDING PAGE

A soft neumorphic style feels calm and guided — a good match for a step-by-step setup checklist.

1

Create Account

Sign up with your work email — no credit card required.
2

Connect Your Data

Link your existing tools in a couple of clicks.
3

Invite Your Team

Add teammates and assign roles.
4
Done

Go Live

Publish your first workspace and start collaborating.
USE CASE · OUR VALUES ON A CULTURE/CAREERS PAGE

A quiet outlined style — right-aligned so it sits naturally next to a portrait or team photo on a careers page.

01

Customers First

Every decision gets weighed against what's best for the people using the product.
02

Ship Often

Small releases, shipped weekly, beat big releases shipped quarterly.
03

Default to Transparent

Internal docs, roadmaps and even salary bands are open to the whole team.