Skip to main content

Banner

Full-width page banner for announcements, warnings, and system notices.

Variants

New feature

Collaboration is now available on all plans.

All systems operational

No incidents reported in the last 30 days.

Scheduled maintenance

Uploads pause today from 2–3 PM UTC.
You are viewing a read-only snapshot from March 12.

With icons

Introducing workspaces

Invite teammates and share themes across projects.

Payment received

Your Pro subscription renews on July 1.

Action required

Verify your email to keep publishing enabled.

Floating promo (inset)

layout="floating" — inset card below nav, not a full-width strip.

Site navigation

Free plan

Write every day on the free tier — upgrade when you need shared notebooks.
Hero headline

Dismissible

Cookies

We use essential cookies to keep you signed in.

With CTA

Trial ending soon

Three days left on your free trial.

Animation variants

animationVariant — click each control to compare press feedback.

Default

Press the dismiss control.

None

Press the dismiss control.

Ripple

Press the dismiss control.

Scale

Press the dismiss control.

Sink

Press the dismiss control.

Lift

Press the dismiss control.

Pulse

Press the dismiss control.

Glow

Press the dismiss control.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
variantOptionalBannerVariantinfoinfo | warning | success | neutral
layoutOptional"band" | "floating"bandFull-width strip or inset floating promo card.
titleOptionalstringOptional heading.
iconOptionalReactNodeLeading icon beside title.
onDismissOptional() => voidShows dismiss control when set.
actionOptionalReactNodeOptional CTA row.
animationVariantOptionalPressAnimationVariantdefaultPress animation — default, none, ripple, scale, sink, lift, pulse, or glow.