Mobile app

RTL VerifiedLTR Verified Mobile app

Detail Page Bar

Back, title and action — the title appears once the heading scrolls away

Intermediate App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Greeting Bar with Account

The greeting follows the clock, and the balance can be hidden

Intermediate App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Immersive Transparent Bar

Transparent over the cover, gaining a surface once it scrolls past

Advanced App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Large Title Bar

The large title collapses into a compact one on scroll

Advanced App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Reading Progress Bar

Progress computed from the scrollable height, not from scroll position alone

Intermediate App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Bar with Inline Search

Search lives in the bar, with a cancel button that appears on focus

Intermediate App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Bar with Segmented Filter

A segment that swaps content and recomputes the visible total

Advanced App bars

Code Prompt

RTL VerifiedLTR Verified Mobile app

Savings Goal Card

Remaining amount and expected date derived from the monthly rate

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Habit Card with Computed Streak

Streak and rate computed from the day log, never stored

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Mini Player Card

A draggable scrubber, with time-left adjusted for playback speed

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Story Cards with Progress Ring

A dashed ring built from the segment count; seen stories dim

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Swipe-to-Reveal Card

A swipe reveals two actions and springs back below the threshold

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Ticket Card with Code

Side notches, a generated barcode, and a countdown from the event date

Intermediate App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Live Tracking Card

A vertical timeline with an ETA derived from the current stage

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Flipping Bank Card

Two faces, with a masked number revealed briefly then re-hidden

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Weather Card with Hourly Curve

The curve is generated from the values, scaled to their own min and max

Advanced App cards

Code Prompt

RTL VerifiedLTR Verified Mobile app

Paired Floating Actions

A primary and a secondary action at different sizes and weights

Intermediate Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

Draggable FAB

Drags freely, snaps to the nearest edge, and never leaves the screen

Advanced Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

Extended FAB that Collapses

Starts with a label and collapses to an icon on scroll

Intermediate Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

FAB that Morphs into a Panel

Expands from a circle into a form and returns on close

Advanced Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

FAB with Progress Ring

An SVG ring computed from its own circumference, not a fixed width

Advanced Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

Scroll-to-Top FAB

Appears after enough distance and returns smoothly — or instantly when motion is reduced

Intermediate Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

Speed Dial FAB

Opens named actions in sequence, closing on Escape and on the scrim

Advanced Floating action buttons

Code Prompt

RTL VerifiedLTR Verified Mobile app

Checklist with Computed Progress

Completed items sink to the bottom; percentage and remaining are computed

Advanced App lists

Code Prompt