Pieces

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

Top of the cohort
1
Priya Shah
Priya Shah98
2
Noor Ahmed
Noor Ahmed94
3
Jordan Reyes
Jordan Reyes91
4
Beste Sözen
Beste Sözen89

Student Roster

education22

Ranked student list with rank digits, avatar initials, and emerald score pills on the right.

CS 401 · Syllabus
W1Fundamentals of composition
W2State & reactivity
W3Hooks in depth
W4Performance patterns
W5Server components

Syllabus

education23

Weekly syllabus where completed weeks get an emerald W tile and their titles are struck through.

Live workshopLive workshop · TypeScript generics
Thu, May 218:00 UTC+390 minutes
412 enrolled · 88 seats left

Live Workshop

education24

Upcoming workshop card with a pulsing live pill, date/time/duration line, enrollment count, and a CTA.

Backend engineer path12-course track · beginner to senior
Path
1Node.js fundamentals8h
2Data modeling with Postgres10h
3APIs & authentication14h
4Production operations16h
Total 48 hours

Learning Path

education25

Multi-course path card listing numbered steps, per-step hours, and a primary Path tag in the header.

The office hours alone were worth the tuition. I came in wanting to learn Next.js and left with a new role.

Andrea Kim
Andrea KimCohort 12 · Graduated Mar 2026

Student Testimonial

education26

Graduate testimonial with five-star rating, a body paragraph, and an avatar-cohort footer.

Spanish vocab · Unit 412 due today
resolverReview
compartirLearning
el idiomaNew
bienvenidaMastered

Flashcard Deck

education27

Spaced-repetition deck summary with italic card fronts and new, learning, review, or mastered pills.

Midterm essayDue Thu 24 Apr · 23:59
79%
142Submitted
8Late
30Missing
180 students in cohort

Assignment Stats

education28

Teacher dashboard tile with a progress bar and three tinted tiles counting submitted, late, and missing.

Elara Martin
Student IDElara MartinGrade 7 · 7BRedwood Middle School
STD-24-00281

Student ID

education29

ID-card layout with an indigo photo panel on the left and a name, grade, school, and validity footer.

Ask me anything · Career pivotsCohort 12 · Mentor hours

Share your story and the thing you wish you knew earlier. I'll reply over the weekend.

38 answered7 waiting

AMA Thread

education30

Mentor AMA card with title, course subline, clipped description, and answered/waiting counts.

Midnight Tape · LiveSat, Jun 14 · 21:00Zorlu PSM · Istanbul
SectionGA Floor
SeatA · 042
MT-7Z91-X2Q

Event Ticket

event1

Notched gradient concert ticket with section, seat, and a vertical mono ticket code on the stub.

Team offsite · BodrumMay 12 – 15
28 going4 maybe

RSVP Row

event2

Invitation card with three emerald/amber/rose response buttons and a footer tallying current responses.

Opening-day speakers
Priya Shah
Priya ShahDesign · Linear
Kian Okafor
Kian OkaforEngineering · Beste

Speaker Lineup

event3

Two-by-two speaker grid with gradient avatars, name and company-role lines per tile.

Shipmas 2026Dec 1 · 09:00 UTC
42days
08hrs
21min
11sec

Event Countdown

event4

Dark foreground countdown with event title, start time, and a four-unit time tile grid below.

Zorlu PSM · Grand HallLevent · BeşiktaşIstanbul, Türkiye
2,400 capacityMetro M6 · Zincirlikuyu exit

Venue Card

event5

Venue panel with a gridded mini-map tile, name, address, city, capacity, and an italic directions line.

Day 1 · Fri, May 8
09:00
Opening keynoteMain stage
10:00
Designing with intentTrack A
11:00
Coffee & networking
11:30
Component systems workshopWorkshop room

Conference Agenda

event6

Conference day schedule with left-ruled session rows color-coded by keynote, talk, break, or workshop.

Conference passes
Student· 42 left
$89
Early bird· 18 left
$249
Standard· 124 left
$399
VIP· Sold out
$1,200

Ticket Tiers

event7

Pass-level list where a highlighted tier picks up a primary ring and sold-out rows dim with a note.

BSAKPSKOJR+123
128 attendingBeste Sözen, Andrea Kim and 126 others are going

Attendees Strip

event8

Stacked avatar row with a +N overflow chip, total attendee count, and a social-proof summary line.

Live14 min in
2,148 watching
Shipping in public · weeklyHosted by Beste Sözen

Live Now

event9

Live-streaming card with a rose live pill, viewer count, minutes-in marker, and a Join stream button.

Admit oneDMX-4K91-N8
Beste SözenDesign Matters · Day 1
SeatFloor A
GateGate 2 · 09:00

Entry QR

event10

Scannable entry card with a fake QR grid on the left and attendee, code, seat, and gate info on the right.

Back squat5 × 5 @ RPE 8
#15 reps80 kgDone
#25 reps85 kgDone
#35 reps90 kgDone
#45 reps95 kgNext
#55 reps95 kgNext

Lift Sets

fitness1

Strength-set tracker listing each set with reps, weight, and a done or next pill at the end of the row.

New PRDeadlift · 1RM
180 kg+10 kg
Prev 170 kgHit today · Apr 23

Personal Record

fitness2

Amber PR celebration card with trophy tile, lift label, bold new weight, and an emerald delta pill.

Hypertrophy 12 · Phase 2
W5
Volume peak5 sessions
W6
Deload3 sessions
W7
Strength push5 sessions
Current
W8
Strength test4 sessions

Training Program

fitness3

Multi-week training plan with emerald completed tiles, a primary current tile, and a current pill.

Gym streak14 days
5 of 5 this week18 visits this month

Gym Check-in

fitness4

Check-in streak card with a flame tile, day count, seven-day attendance row, and weekly/monthly counts.

Body composition
Weight74.2 kg
Body fat16.8%
Muscle mass38.6 kg
Water58.2%
Smart scale · this morning

Body Composition

fitness5

Smart-scale readout card with four muted tiles for weight, body fat, muscle mass, and water percent.