02.14Modal · App + Marketing · 4 variants

Modal .kmd

One shell, four placements. Confirmation dialogs and three-dots menus stay tight and Apple-feel — for the app. Preview dialogs open large for contact / product / order detail. Marketing modal carries an editorial hero for lead magnets and announcements. Backdrop blur + ESC + scroll-lock come from the native <dialog> element.

Confirm

.kmd-confirm · 400 px

Compact destructive / yes-no decisions. Tight Apple-feel padding. Title, body, two-button row. Use .kb-danger on the destructive option — never primary.

Delete this order?

Order #136131-112625-10 will be permanently removed. Vendor and audit log entries stay. You can't undo this.

Menu

.kmd-menu · 240 px · three-dots popover

Compact contextual menu. Icon · label · keyboard shortcut grid. Supports .is-danger items (crimson hover) and .kmd-menu-sep dividers. Auto-positions below trigger, flips up near viewport bottom.

Click ⋯ to open the live menu

Preview

.kmd-preview · 720 px · big detail dialog

Large dialog for contact / product / order detail. Title bar with close, scrollable body, sticky footer with secondary + primary action.

Customer · 12 years

Caldera Mills

Contact

Marta Lin
VP of Operations
marta@calderamills.com

Account

Active · NET 30
Greensboro, NC
Acct #C-4471

YTD revenue$284,500
Orders · 12 mo142
Avg order$2,003

Long-tail customer — orders run heavy in Q3/Q4 (holiday inventory) and lighter in Q1. Pays on time. Caldera owns three retail showrooms across the Carolinas plus a small online channel.

Marketing

.kmd-marketing · 520 px · editorial

Lead magnet, newsletter, announcement. Crimson hero panel with brand wave, eyebrow + headline + lede, primary CTA row.

New · v3.0

See your real ROI in 25 minutes.

Book a working session with onboarding — we plug your live data into the calculator and walk through the projection. No slides, no sales call.

Delete this order?

Order #136131-112625-10 will be permanently removed. Vendor and audit log entries stay. You can't undo this.

Archive this customer?

Caldera Mills will move to the Archive list. Their order history is preserved and the account can be restored anytime.
Customer · 12 years

Caldera Mills

Contact

Marta Lin
VP of Operations
marta@calderamills.com

Account

Active · NET 30
Greensboro, NC
Acct #C-4471

YTD revenue$284,500
Orders · 12 mo142
Avg order$2,003

Long-tail customer — orders run heavy in Q3/Q4 (holiday inventory) and lighter in Q1. Pays on time. Caldera owns three retail showrooms across the Carolinas plus a small online channel.
New · v3.0

See your real ROI in 25 minutes.

Book a working session with onboarding — we plug your live data into the calculator and walk through the projection. No slides, no sales call.