Banner Alerts

Banner alerts inform users about important changes or persistent conditions in a prominent way. These alerts can be placed at the top of a page or on a particular section of a page.

Code

Variants

Along with a description that follows the title.

Primary

Secondary

Tertiary

Certara UI
HTML

<certara-alert headline="Notice title" dismissible>
    Along with a description that follows the title.

  <div slot="alert-ctas">
    <certara-button color="brand" size="sm">Primary</certara-button>
    <certara-button color="secondary" size="sm">Secondary</certara-button>
    <certara-button variant="link" size="sm" right-icon="arrow-up-right-from-square">Tertiary</certara-button>
  </div>
</certara-alert>

certara-alert

Properties

Property	Attribute	Description	Type	Default
`alignContent`	`align-content`	The content alignment inside the alert	`"center" \| "left" \| "right"`	`'left'`
`dismissible`	`dismissible`	If true, the alert can be dismissed by clicking the close button	`boolean`	`false`
`headline`	`headline`	The bolded first sentence of the alert	`string`	`undefined`
`shake`	`shake`	If true, the alert will shake when it appears	`boolean`	`false`
`toast`	`toast`	if true, the alert will be displayed as a toast. fades and animates in, then typically disappears after a few seconds or is present until the user dismisses it	`boolean`	`false`
`variant`	`variant`	sets the theme/color of the alert	`"danger" \| "info" \| "success" \| "warning"`	`'info'`

Events

Event	Description	Type
`certaraClose`	Event emitted when the alert is closed if dismissible is true	`CustomEvent<void>`

Slots

Slot	Description
	Default alert content
`"alert-ctas"`	Slot for additional call-to-action buttons or links

Dependencies

Used by

Depends on

certara-close-button

Graph

graph TD;
  certara-alert --> certara-close-button
  certara-form --> certara-alert
  certara-toast --> certara-alert
  style certara-alert fill:#f9f,stroke:#333,stroke-width:4px

<div class="alert" role="alert">
  <h3 class="alert__heading">Notice title</h3>
  <p class="alert__description">Along with a description that follows the title.</p>
  <div class="alert__cta">
    <button class="btn btn--brand btn-sm">Primary</button>
    <button class="btn btn--secondary btn-sm">Secondary</button>
    <button class="btn btn-link btn-sm">
      Tertiary
      <svg class="icon" aria-hidden="true">
        <use xlink:href="/assets/svg/regular.svg#arrow-up-right-from-square"></use>
      </svg>
    </button>
  </div>
</div>

NameDescriptionClassCopy

title
Heading content
.alert__heading
dismiss
Closes the alert
.alert—dismissible
description
Description content
.alert__description
brand button
Primary CTA
.btn—brand
light button
Secondary CTA
.btn—secondary
link button
Heading content
.btn-link
shake alert
Shake animation to draw attention
.alert—attention
hide icon
Removes the status icon
.alert—hide-icon

Alignment

Center

Certara UI
HTML

Animation

Shake

Along with a description that follows the title.

Certara UI
HTML

In Practice

The dismiss (X) option allows users to close a system alert which removes it from the page. Alerts should be dismissible unless they contain critical information or an important action step.
DO NOT include the dismiss option on Danger alerts.
If the dismiss option is included and there is no action available to take, do not include a button labeled “Close” or “Cancel”.

Variants

The four variants use different icons and colors to indicate the type and urgency of the message.

Info: informs the user of a change or gives them advice.
Success: lets the user know of a successful outcome. NOTE: Toast alerts are used by default for this type of messaging. Use a banner alert only if it is persistent, delayed, or if there is an additional action.
Warning: lets the user know about important system information that deserves caution.
Danger: alerts the user of a problem that requires immediate attention.

Placement

If the message relates to the page topic as a whole, place the alert at the top of the page.
If the message is specific to a section of the page, place the alert below the section header.
Banner alerts always span the full width of the container to which they apply.

Content guidelines

Title

Use plain English instead of obscure codes or abbreviations.
Follow the content guidelines for headings and subheadings. View guidelines

Body

Be concise: keep content to 1 to 2 sentences where possible
Clarify the benefit of the main task
Be written in sentence case and use appropriate punctuation
Avoid repeating the heading
Explain how to resolve the issue, particularly for warning and critical banners

Accessibility

Keyboard focus: When an urgent alert is dynamically added to the page, ensure its content receives immediate attention.

Follow the accessibility guidelines for each component found in the alert. View guidelines

Design resources

View component in Figma