Components

Notice

Design
Code

Display important information specific to an interface.

Use the page notice to deliver a timely message regarding the entire interface, not just one section or task.

If the information does pertain to just one section, use a note. (And for immediate feedback as the result of a workflow, go with a toast.)

Type

All page notices are displayed in line, fixed to the top of the primary content area of the given page.

information

Hudl Assist has added 24 credits to your account

Submit any of this season's game or opponent video to have it broken down for you and sent back within 24 hours.

Information: The information notice presents a neutral update. Use this to provide additional info that doesn’t require any action.

State

All notices appear as soon as the page loads. They should remain dismissable either with an actual dismiss or by completing the action listed. All notices (except for critical) should permanently disappear once they’ve been dismissed.

Critical notices will disappear when dismissed, but only for that session. If the action has not been completed, the notice will reappear on the next page load.

notice-dismiss-dont

Don'tforce notices to persist without the ability to dismiss.

notice-dismiss-do

Doinclude a way for users to remove the notice.

Usage

Actions

Every critical notice should include an action to help the user solve their issue. The action itself is optional on all other notices. Just be sure to weigh the value it may (or may not) add.

Position

A notice is always positioned beneath the navbar within the primary content area of the given page. It should span the full width of the page until the natural max-width is achieved.

notice-position-dont

Don'tposition a page notice above a sidebar or side panel.

notice-position-do

Dokeep a notice in line with the primary content area.

Microcopy

Case & Punctuation

Notices follow our non-label text guidelines—use sentence case with appropriate punctuation.

notice-punctuation-dont

Don'tuse crazy punctuation to level up the message.

notice-punctuation-do

Douse complete sentences followed by periods.

Content Length

Make the content readable and don’t go overboard—just be sure it’s longer than the title. Keep it brief with the most important info at the front.

notice-contentlength-dont

Don'toverwhelm the user with unnecessary information.

notice-contentlength-do

Dokeep the message short and to the point.

Titles

Titles should be concise with keywords at the front. You don’t need closing punctuation, but the content should relate directly to the action they’d need to take.

notice-title-dont

Don'texplain the entire message in the title.

notice-title-do

Dofocus on the most important info.

Actions

Try limiting actions to a single verb. If you can’t, stick to a three-word phrase.

notice-actions-dont

Don'tmake button labels complete sentences.

notice-actions-do

Dokeep things simple with a single verb.

Platforms

platformnotes
Web
  • Stick to the guidelines above.
Apple
Android