Alert

Overview

Alerts can be used to highlight information to the user.

Example Usage

Through the use of the skin system, we can achieve any number of styles of alert. Below are examples using the success, attention and error skins.

Success Alert

This is a demonstration of a information type alert message. This additional text is to demonstrate how it wraps over multiple-lines

HTML

<div class="alert skin-success">

  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="currentColor"
    viewBox="0 0 256 256"
    aria-hidden="true"
    class="alert-icon"
  >

    <path
      d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
    >
    </path>

  </svg>

  <p>
    This is a demonstration of a information type alert message. This additional
    text is to demonstrate how it wraps over multiple-lines
  
  </p>

</div>

Attention Alert

This is a demonstration of a information type alert message. This additional text is to demonstrate how it wraps over multiple-lines. Interactive elements like hyperlinks maintain consistent styling.

HTML

<div class="alert skin-attention">

  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 256 256"
    fill="currentColor"
    aria-hidden="true"
    class="alert-icon"
  >

    <g>

      <path
        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"
      >
      </path>

    </g>

  </svg>

  <p>
    This is a demonstration of a information type alert message. This additional
    text is to demonstrate how it wraps over multiple-lines. Interactive
    elements like
    
    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">hyperlinks
    </a>
    maintain consistent styling.
  
  </p>

</div>

Error Alert

Select your complimentary Pureology Hydrate Shampoo & Conditioner 50ml when you spend £45 on Professional Haircare brand.

HTML

<div class="alert skin-error">

  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 256 256"
    fill="currentColor"
    aria-hidden="true"
    class="alert-icon"
  >

    <path
      d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"
    >
    </path>

  </svg>

  <p>
    Select your complimentary Pureology Hydrate Shampoo & Conditioner 50ml when
    you spend £45 on Professional Haircare brand.
  
  </p>

</div>

CSS Variables

General Alert Variables

Variable	Default Value	Description
`--alert-padding`	`0.5em`	Padding around the content
`--alert-border-default`	`none`	Allow a border, deafult none
`--alert-border-radius`	`var(--radius-site)`	Border radius

Alert Icon Variables

Variable	Default Value	Description
`--alert-icon-padding-x`	`0rem`	Vertical padding around the content
`--alert-icon-padding-y`	`0.25rem`	Horizonal padding around the content
`--alert-icon-height`	`24px`	Default icon height
`--alert-icon-min-height`	`24px`	Prevent shrinking of icon
`--alert-icon-width`	`24px`	Default icon width
`--alert-icon-min-width`	`24px`	Prevent shrinking of icon

Accessibility

In these examples, the svg icon has the aria-hidden attribute so that the icon is not visible to the Accessibility tree. This is appropriate as these icons are not interactive and are considered decorative, as the paragraph content contains the information needing to be relayed to the screenreader.