Detail Page Bar
Back, title and action — the title appears once the heading scrolls away
Mobile app
Mobile app: 51 designs across 7 families — App bars · App cards · Floating action buttons · App lists · App search · Sheets · Tab bars
Designs — Page 1 of 3
Greeting Bar with Account
The greeting follows the clock, and the balance can be hidden
Immersive Transparent Bar
Transparent over the cover, gaining a surface once it scrolls past
Reading Progress Bar
Progress computed from the scrollable height, not from scroll position alone
Bar with Inline Search
Search lives in the bar, with a cancel button that appears on focus
Bar with Segmented Filter
A segment that swaps content and recomputes the visible total
Savings Goal Card
Remaining amount and expected date derived from the monthly rate
Habit Card with Computed Streak
Streak and rate computed from the day log, never stored
Mini Player Card
A draggable scrubber, with time-left adjusted for playback speed
Story Cards with Progress Ring
A dashed ring built from the segment count; seen stories dim
Swipe-to-Reveal Card
A swipe reveals two actions and springs back below the threshold
Ticket Card with Code
Side notches, a generated barcode, and a countdown from the event date
Live Tracking Card
A vertical timeline with an ETA derived from the current stage
Flipping Bank Card
Two faces, with a masked number revealed briefly then re-hidden
Weather Card with Hourly Curve
The curve is generated from the values, scaled to their own min and max
Paired Floating Actions
A primary and a secondary action at different sizes and weights
Draggable FAB
Drags freely, snaps to the nearest edge, and never leaves the screen
Extended FAB that Collapses
Starts with a label and collapses to an icon on scroll
FAB that Morphs into a Panel
Expands from a circle into a form and returns on close
FAB with Progress Ring
An SVG ring computed from its own circumference, not a fixed width
Scroll-to-Top FAB
Appears after enough distance and returns smoothly — or instantly when motion is reduced
Speed Dial FAB
Opens named actions in sequence, closing on Escape and on the scrim
Checklist with Computed Progress
Completed items sink to the bottom; percentage and remaining are computed