Notice

NOTICE BLURB

Examples

Basic Notice

<button class="bocss-button"></button>
Copy

Success Notice

Basic Notice Component

A primary button is used for primary and important actions, such as saving a page or submitting a form.

Basic Notice Component 
<button class="bocss-button bocss-button--primary"></button>
Copy

Info Notice

A secondary button is the next level of hierarchy and are used for actions that are important but not the most important, such as a back button for a form or survey.

<button class="bocss-button bocss-button--secondary"></button>
Copy

Aside Notice

A tertiary button is the lowest level of hierarchy for actions and is reserved for those that carry the least importance, such as cancelling a form.

<button class="bocss-button bocss-button--tertiary"></button>
Copy

Warn Notice

A tertiary button is the lowest level of hierarchy for actions and is reserved for those that carry the least importance, such as cancelling a form.

<button class="bocss-button bocss-button--tertiary"></button>
Copy

Error Notice

A full button is a button that spans the complete width of it's parent container.

<button class="bocss-button bocss-button--full"></button>
Copy

Documentation

Main Elements

Selector Description
.bocss-notice Selector for basic a button without modification
.bocss-notice__icon Selector for basic a button without modification
.bocss-button__content Selector for basic a button without modification

Modifiers

Selector Modifies Description
.bocss-notice--success .bocss-notice Selector for basic a button without modification
.bocss-notice--info .bocss-notice Selector for basic a button without modification
.bocss-notice--aside .bocss-notice Selector for basic a button without modification
.bocss-notice--warn .bocss-notice Selector for basic a button without modification
.bocss-notice--error .bocss-notice Selector for basic a button without modification

Best Practices

Notices should:

  • Be clearly and accurately labeled.
  • Lead with strong, actionable verbs.
  • Use established button colors appropriately. For example, only use a red
    button for an action that’s difficult or impossible to undo.
  • Prioritize the most important actions. Too many calls to action can cause
    confusion and make merchants unsure of what to do next.
  • Be positioned in consistent locations in the interface.

Content Guidelines

Do:

  • Be clearly and accurately labeled.
  • Lead with strong, actionable verbs.
  • Use established button colors appropriately. For example, only use a red
    button for an action that’s difficult or impossible to undo.
  • Prioritize the most important actions. Too many calls to action can cause
    confusion and make merchants unsure of what to do next.
  • Be positioned in consistent locations in the interface.

Do Not:

  • Be clearly and accurately labeled.
  • Lead with strong, actionable verbs.
  • Use established button colors appropriately. For example, only use a red
    button for an action that’s difficult or impossible to undo.
  • Prioritize the most important actions. Too many calls to action can cause
    confusion and make merchants unsure of what to do next.
  • Be positioned in consistent locations in the interface.

Usage

Notices can be found on pages such as:

 

 

 

 

 

 

 

The notice component is used to draw attention to a block of text. It can be used to show that a process was completed, that a process failed, or just to draw attention to an important bit of text (ex: something on this page has recently, or will in the future change)

Examples

Default Notice

The default notice component with only the message filled out

Default Notice Component 
<div class="bocss-notice bocss-notice--info">
    <div class="bocss-notice__content">
        Default Notice Component
    </div>
</div>
Copy

Notice With Intensity

Notice component with the various available intensities

Success

Notice component with 'success' intensity 

<div class="bocss-notice bocss-notice--success">
    <div class="bocss-notice__content">
        Notice component with 'success' intensity
    </div>
</div>
Copy

Aside

Notice component with 'aside' intensity 

<div class="bocss-notice bocss-notice--aside">
    <div class="bocss-notice__content">
        Notice component with 'aside' intensity
    </div>
</div>
Copy

Info

Notice component with 'info' intensity 

<div class="bocss-notice bocss-notice--info">
    <div class="bocss-notice__content">
        Notice component with 'info' intensity
    </div>
</div>
Copy

Error

Notice component with 'error' intensity 

<div class="bocss-notice bocss-notice--error">
    <div class="bocss-notice__content">
        Notice component with 'error' intensity
    </div>
</div>
Copy

Notice With Icon

Notice component with an icon provided. Note that this can be used interchangeably with the intensities, and the 'success' intensity has been used as an example here.

Success notice component with a bulb icon 

<div class="bocss-notice bocss-notice--success">
    <div class="bocss-notice__icon">
       <i class="bocss-bulb"></i>
    </div>
    <div class="bocss-notice__content">
        Success Notice Component with a bulb icon
    </div>
</div>
Copy

Documentation

Main Elements

CSS Selector Description
.bocss-notice Parent element, the entire notice component
.bocss-notice__icon Icon element (if present) within the notice component
.bocss-button__content Message content within the notice component

Content Guidelines

Best Practices

Notices should:

  • Lead with strong, actionable verbs.

Usage

Notices can be found on pages such as:

Change theme
Change theme