These are attention-getting elements designed to communicate important messages to the site visitor. They come in two varieties:

  • Notifications: for very brief one- or two-line messages providing important information to the user.
  • Callouts: for communicating medium-length messages to the user or setting aside important information or promotions, often including a call to action.

Make sure you’re familiar with the Voice and Tone guidelines — especially those detailing visual tone — before using these elements.

All messaging blocks come in four varieties based on the priority of the messaging.

  • Default: a neutral styling that should be used for standard messaging and information.
  • Positive: communicates new features or indicates that an action processed successfully. Styles the element with a green border.
  • Caution: communicates an important thing to be aware of or careful of or indicates that an action failed at this time that otherwise would be processed correctly. Styles the element with a yellow border.
  • Warning: communicates critical or emergency information or indicates that an action failed completely. Styles the element with an orange border.

Contents

Notifications

A messaging layout block for communicating brief, crucial information to users, with an optional action button.

A notification block with default style and an action button set to align none.

A notification block with positive style and an action button set to align none.

Action button

A notification block with caution style and no action button set to align none.

A notification block with warning style and no action button set to align none.

A default notification block set to align right.

Action

Notification blocks can be aligned similar to other blocks (none, left, right, center, wide, and full).

Setting them to align left or right will automatically restrict their max width.

The wide and full widths will expand to fill the available space across the page.

A positive notification block set to align wide.

Action

Callouts

A messaging layout block for communicating crucial information to users, displaying a call to action message with related information, or setting aside critical information.

Callout blocks use the same priority styling as other messaging elements, with default (gray), positive (green), caution (yellow), and warning (orange).

A default callout block

This is the callout message. It should be a brief bit of information clearly and concisely.

A positive callout block

This is the callout message. It should be a brief bit of information clearly and concisely. It can contain additional information, or you can replace the paragraph block with something else.

Call to action

A caution callout block

You can embed other layout elements inside of callout blocks.

This is a column block with two columns.

A warning callout block, aligned right

This is the callout message. It should be a brief bit of information clearly and concisely.

Callout blocks can be aligned similar to other blocks (none, left, right, center, wide, and full).

This is a warning style callout block, set to align right. Setting callout blocks to align left or right will automatically restrict their max width.

You can change the alignment of the inner blocks content separately from the callout block itself.

This is a positive style callout block, set to align wide with center-aligned inner content.

A positive, wide callout block

You can change the alignment of the inner blocks content separately from the callout block itself.

centered cta

Source

These are HRS-created blocks provided as part of the HRSWP Blocks plugin.