Ryan Perez · Banners & disclosure

Interrupt, or reveal.

A banner earns its prominence only when the message is timely, relevant and important enough to break the page hierarchy. A disclosure component earns its place only when controlling sequence, focus or density genuinely helps — never to make the page look cleaner.

The formula Purpose + Scope + Priority + Message + Action + Persistence + State
Selection

Three of these are not banners

{{ s.a }}{{ s.b }}
Severity

Seven severities, rendered

Colour, icon, label and message must agree. Strip the colour out and the severity still has to read.
{{ s.label }}{{ s.title }} {{ s.message }}
{{ s.action }} ✕
{{ s.note }}
Scope

All four scopes on one page

GlobalFriction Audits are booked to Q3 2027. Join the list → ✕
Ryan Perez WorkMethodWriting
Northline intake audit
Page This audit is a draft. Two steps still have no named owner.
Step scores
SectionRefreshed four minutes ago from the tracker.
One week. One broken step. One fix. Book the audit✕
{{ s.t }}{{ s.where }}
{{ s.use }}
{{ r.t }}
Layouts

Consent, status, stacked

Split action · consent
Analytics cookies Only used to see which pages actually get read. Declining changes nothing about what you can access.
Decline Preferences Accept
Decline is as findable as Accept, nothing optional is preselected, and preferences stay reachable afterwards.
Status
Degraded Score refreshes are delayed
{{ l.a }}{{ l.b }}
Status page →
Stacked mobile
Could not save Your work is still here. The tracker rejected the connection. Try again Copy the error
Anatomy & priority

Ten parts, eight priorities

{{ a.t }}
{{ p.n }} {{ p.t }}
{{ r.t }}
Persistence

How long each one lives

{{ p.a }}{{ p.b }}
{{ r.t }}
{{ g.n }}{{ g.t }}
{{ g.role }}
{{ r.a }} {{ r.b }}
{{ n.t }}
Copy

Poor, then good

{{ c.bad }} {{ c.good }}
Accessibility & LAKA

Eight non-negotiables

{{ a.t }}
Dismiss controls need a real label — “Dismiss announcement”, not just “Close”. Never overuse the alert role. Repeated interruptions make the whole page harder to use. If an error summary appears, move focus to it after the failed submission.
{{ l.a }}{{ l.b }}
Carousel

Browse a collection, in sequence

Working. Position stated in words, autoplay off, and the first item stands on its own.
Where work stalled {{ slidePos }} of {{ slideTotal }}
{{ slide.eyebrow }} {{ slide.title }} {{ slide.body }} {{ slide.source }}
← →
{{ r.t }}
Do not

When it is wrong

{{ n.t }}
Autoplay {{ r.t }}
Comparison slider

Before, and after

Drag it. Same crop, same scale, both sides labelled — and keyboard-operable because it is a real range input.
After · rebuilt Two steps, one owner
{{ r.t }}
2 days
Before · as found Nine steps, no owner
{{ r.t }}
9 days
↔
Intake at Northline, before and after the rebuild. Verified against their own tracker.
Tabs

Equal, parallel views

Only the indicator animates. Panels switch instantly and the heights are close enough not to jump.
{{ t.label }}
{{ tabPanel.title }} {{ tabPanel.body }}
—{{ p.t }}
{{ r.t }}
FAQ accordion

Independent answers

Multiple open Single open
{{ f.q }}
{{ f.a }}
{{ r.t }}
Modals

Three, live

Open each. The destructive one names the consequence instead of asking whether you are sure.
Confirmation Form modal Bottom sheet
Northline processes
{{ r.a }} {{ r.b }}
Delete “Intake triage”? Its nine step scores, three interview notes and the March comparison will be permanently removed. Nothing else in the audit changes.
Cancel Delete the process
Add a process owner They get edit access to this process only.
Two fields is a modal. Six is a page.
Cancel Add owner
Intake triage {{ a.t }}
{{ r.t }}
Drawer vs modal

Interrupt, or supplement

Condition Modal Drawer
{{ d.cond }} {{ d.modal }} {{ d.drawer }}
Modal size

Four sizes, drawn

{{ m.t }} {{ m.use }}
{{ r.t }}
Purpose

Six patterns, six problems

{{ p.a }}{{ p.b }}
IF content must be compared simultaneously, THEN do not hide it in a carousel, accordion or tabs. IF content must be linked or indexed separately, THEN give it its own page or section. IF the pattern hides essential information, THEN use visible content instead.
Reject when

Five disqualifying conditions

{{ r.cond }}
{{ i.t }}
Matrix

Four patterns, run through LAKA

LAKA state Carousel FAQ Tabs Modal
{{ m.c0 }} {{ m.c1 }} {{ m.c2 }} {{ m.c3 }} {{ m.c4 }}
Engine

Disclosure selection

{{ e.t }}
Never hide information merely to make the page look cleaner.
Engine

Banner selection

{{ e.t }}
A banner earns its prominence only when the message is timely, relevant and important enough to interrupt the normal page hierarchy.