Banner

We use banners to contextually convey complicated or supplemental information to 
a user. Depending on the type of banner, we can provide more information about a feature or page the user is on, an action the user needs to perform, or an error the user has encountered.

Procore banners are informative and actionable. Always explain what the user needs to know (and in some cases, why they’re seeing the banner), and provide an actionable next step.
Demo and Developer GuidelinesFigma Component

Anatomy

Below is an attention banner, but all banners have 6 major parts. When you use this component, elements like the left bar and icon are predetermined, and you have control over what the banner says and the action the user can take.

Header

In the header, include a short summary of the most important information. If the banner expresses that the user needs to perform an action, the first word in the header should be a verb. Headers are title case and have no punctuation.

Header character count limit: 50

Body

The body of the banner provides any supplemental information, optionally including a next step the user should take, or something they should expect to happen, given the new information. The body is sentence case and has punctuation.

Body character count limit: 230

Tip: If your banner includes a button, don’t tell the user to click the button in the body text (e.g. Click the button to configure these settings). The call to action should speak for itself, and this will make your body text more concise.
Correct
Incorrect
Never place blame on a user, and avoid information dead ends.

Button

If needed, include a button that links to either a support article, a page where the user can find more information, or a page where a user can take a next step. The button is title case and has no punctuation.

Button character count: 25
Use Learn More when linking to a support article or reference site.
Use the same verb from the banner header to express a call to action.
Use Go to... when linking to a page in Procore (only if there is no verb in the header).

Types

Error

Error banners are used to explain why a process or action isn’t working as expected and what the user can do to resolve the issue.
Use this template for most error banners.
Use this template when a header is not needed or preferred.

Attention

Attention banners are used to inform users that their attention is required on a page or feature. There are two templates we use for this depending on the use case.
Use the template to inform users of a required action they need to take to move forward in a process or workflow.
Use the template to preemptively warn users of a potential issue on a page. This should not be used in place of an error banner.

Info

Info banners are used to give users supplemental information about an item or task before, during, or after a process.

Variations

Expandable

We use expandable banners when there is information that cannot be displayed in a banner. This is most often information that can be displayed in a bulleted list. An expandable banner is most often used on error banners when there are multiple errors that occurred after a user takes an action.

The detail menu is collapsed by default, and when there are no additional actions that need to be taken from the banner, a Show Details / Hide Details button expands and collapses the menu, respectively.
If there is an action the user needs to take in the banner, replace the Show Details button with an overflow menu to house all the actions. Additionally, add a clarifying sentence to the end of the content telling users to, “Click the button to see details.”

Placement

Banners can live in three different locations on a page depending on the context.


Tool level banners display information that is relevant to the entire tool, and they sit in the tool header. This often persists across pages. Page level banners display information that is relevant to the page the user is on, and it is placed above the card. Section level banners display information that is only relevant to one section on the page, and they sit within the card above each section.

There are scenarios where all levels can be used at once.
Correct
Incorrect
Avoid stacking multiple banners. If multiple related messages need to be displayed, use an expandable banner.

Behavior

Specifications

Padding

Typography & Shadow

Color