For Designer

Components/Feedback

Banner

Banners run across the top of the page for news that touches the whole product or account

Variants
30
Statuses
5
Types
3

Playground

Pick a type, status and alignment. Close it to see it go, then bring it back

Scheduled maintenanceSunday 02:00–04:00 WIB

Banner · Type=Light · Status=Info · Align=Center

Statuses

The same five statuses as the Alert, so a color means the same thing everywhere

Error
Warning
Trial ends in 3 daysPick a plan to keep your projects
Success
You’re back onlineEverything is synced
Info
Scheduled maintenanceSunday 02:00–04:00 WIB
Feature
New: dark modeSwitch it on in Settings

Types

Filled for outages and anything urgent, Light for most news, Stroke when the page around it is busy

Filled
Trial ends in 3 daysPick a plan to keep your projects
Light
Trial ends in 3 daysPick a plan to keep your projects
Stroke
Trial ends in 3 daysPick a plan to keep your projects

Alignment

Center the message on marketing and landing pages. Align it left in apps, so it lines up with the content below

Center
New: dark modeSwitch it on in Settings
Left
New: dark modeSwitch it on in Settings

When to use

Use when

  1. The news affects the whole product or account, like planned maintenance
  2. It should stay visible on every page until it’s resolved or dismissed
  3. One short line and an optional link say everything

Avoid when

  1. The message is about one form or card, use an Alert
  2. The message needs a long explanation, link to a page or use a Modal
  3. Several banners would stack up, show the most important one

Do and don’t

Scheduled maintenanceSunday 02:00–04:00 WIB
Do

Keep it to one line: what’s happening, when, and a link for details

You’re back onlineEverything is synced
Don’t

Don’t use Filled for good news or promotions, save the loudest style for problems

Tokens and specs

PropertyTokenValue
Width—Fill, full page width
Height—44 px
Padding—12 / 48 px
Icon to text12 px
Title to description8 px, with a 2 px dot between
Title—Inter Medium 14/20
Description—Inter Regular 14/20
Link—Inter Medium 12/16
Icon—16 px
Close—20 px, 48% opacity
Filledtext/white-0 on the state color
Lightstate/*/base text and icons
Stroke, outline#EBEBEB
Stroke, text#171717 / #5C5C5C
Stroke, dot and close#A3A3A3 / #5C5C5C
Esc