Components

Notice/Message

A notice is way of letting the users know there is important information relative to the context of the text surrounding it.

Example

Pricing of this service

The cost of this service is £10, which is nonrefundable.

                                
                                <div class="alert"><div class="alert__item alert__item--content"><p class="alert__item--content__heading">Pricing of this service</p><div class="alert__message alert--state-info"><p>The cost of this service is £10, which is nonrefundable.</p></div></div></div>

Portal Code example

  • The portal uses various different class names for effectively the same type of “notice” style, whether it be a warning, a success message, an inline alert. These are listed below.
  • These are usually pre-determined by out of the box functionality, but can be used as custom HTML on the page, web form step specific to display information
  • The styling for form validation, is triggered by setting up validation on each web form step for required fields
  • Spacer class has been added in this example (mt-2) which isn’t required
  • They can be reused – then store them as content snippets, and use liquid to call it in. Text should be stored dynamically in most scenarios to be reused.

Address selected

1 Ipsum road, Lorem, IP5M 1OR

Warning message to go here

You updated your information successfully.
                        
                        <div class="alert alert-info">
<h3>Address selected</h3>
<p>1 Ipsum road, Lorem, IP5M 1OR</p>
</div>
<div class="alert alert-warning mtop-20">
<p>Warning message to go here</p>
</div>
<div class="alert alert-success alert-block mtop-20" aria-label="You updated your information successfully." tabindex="0">
<div>
<div class="xrm-editable-html xrm-attribute">
<div class="xrm-attribute-value">You updated your information successfully.</div>
</div>
</div>	
</div>

When to use this

  • When you need to highlight important information that the user can easily scan to

When not to use this

  • When there are multiple near each other visually as this can be disruptive and confuse the user
Back to top