EXTERNAL - Documentation

Accordion alert box

full screen new window example HTML markup

An Accordion alert box is a small box that appears on the display screen to give you information, this is sometimes referred to as a message box. When the information that needs to be displayed is too large, an accordion alert box can be used.

Usage

The Accordion alert box should be placed on the page where it is visible to the relevant information that is displayed, this can be placed at the top of the screen or contained within another component or the grid layout.

Each alert box supports any SVG icon from the icons component page.

Accessible attributes

Accessible attribute Description
role="alertdialog" The alert dialog should be placed on the outer div of the alert to identify this element serves as an alert dialog container
role="alert" The alert role should be placed on the outer div of the alert to identify this element serves as an alert notification
aria-labelledby="IDREF" This gives the alert dialog an accessible name by referring to the element that provides the alert dialog title
aria-describedby="IDREF" This gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert box
aria-hidden="true" Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction, when true the alert is displayed, otherwise false.
aria-expanded="true" Set to true when the accordion panel is expanded, otherwise set to false.
aria-controls="ID" Points to the ID of the panel which the header text controls.
aria-labelledby="IDREF" Points to the ID of the Accordion header text that references the panel.

Modifier selectors

Modifier selector Description
slb-alert--blue Use blue alerts for primary information.
slb-alert--grey Use grey alerts for secondary information.
slb-alert--green Use green alerts for success information.
slb-alert--red-solid Use red solid alerts for danger information.
slb-alert--red Use red alerts for danger information.
slb-alert--yellow Use yellow alerts for warning information.

JavaScript Support

JavaScript Support class name Description
slb-show This class will display the alert box on the page, remove and add the class name to display the alert dynamically
.slb-alert--blue - Blue alert box.
.slb-alert--grey - Grey alert box.
.slb-alert--green - Green alert box.
.slb-alert--red-solid - Red solid alert box.
.slb-alert--red - Red alert box.
.slb-alert--yellow - Yellow alert box.
Markup: alert-boxes\alert-box-accordion.hbs Copy 
<div class="slb-alert slb-show [modifier class]" role="alert" aria-labelledby="alertExample" aria-hidden="false">
    <div class="slb-alert__icon-container">
        <svg class="slb-alert__icon" viewBox="0 0 512 512" id="phone-[modifier class]"><title>phone</title><path d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"/></sv>
    </div>
    <div id="alert-accordion-one-[modifier class]" class="slb-alert__text">
        <div class="slb-alert-accordion">
            <a href="#" id="alert-accordion-[modifier class]" class="slb-alert-accordion__trigger" type="button" aria-expanded="false" aria-controls="alert-accordion-panel-[modifier class]">Button text<svg class="slb-icon slb-alert-accordion__icon slb-icon--sm" viewBox="0 0 512 512" id="chevron-circle-down-[modifier class]"><title>chevron-circle-down</title><path d="M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM273 369.9l135.5-135.5c9.4-9.4 9.4-24.6 0-33.9l-17-17c-9.4-9.4-24.6-9.4-33.9 0L256 285.1 154.4 183.5c-9.4-9.4-24.6-9.4-33.9 0l-17 17c-9.4 9.4-9.4 24.6 0 33.9L239 369.9c9.4 9.4 24.6 9.4 34 0z"/></svg></a>
            <div id="alert-accordion-panel-[modifier class]" class="slb-alert-accordion__content" aria-labelledby="alert-accordion">
                <p>A sit imperdiet a ridiculus augue elementum vivamus a senectus nec nec sagittis vestibulum netus. Vitae vestibulum curabitur pretium at taciti praesent euismod phasellus a nostra ultricies cubilia interdum adipiscing ullamcorper cursus pulvinar mattis ullamcorper metus senectus morbi sociosqu commodo dui velit. Tincidunt scelerisque a viverra malesuada ridiculus curae sem conubia dapibus a convallis fusce in ullamcorper mi dolor platea lacinia vestibulum a sagittis. Leo ac ac diam condimentum enim hendrerit venenatis diam sociosqu posuere elit mi per a magna netus penatibus placerat feugiat consequat quisque sed a. A mi nibh mattis adipiscing nisl metus elit urna ante condimentum cum vestibulum scelerisque eget odio mus a mollis consectetur odio vel luctus hac a vitae.</p>
                <p>Adipiscing nisl euismod suspendisse parturient sodales parturient erat a condimentum sociis dis consectetur curabitur potenti adipiscing lorem sed himenaeos felis scelerisque suspendisse platea scelerisque litora id placerat. Porta a elit elementum fringilla leo adipiscing et iaculis aptent varius ac scelerisque primis vulputate in. Malesuada vivamus ligula vestibulum parturient ullamcorper consequat vestibulum et lacinia phasellus a laoreet curabitur nascetur suspendisse malesuada litora cubilia himenaeos parturient. Neque per iaculis dis nunc ac scelerisque bibendum at congue malesuada feugiat interdum a ac ullamcorper vel vestibulum adipiscing vestibulum a est mauris a. Ut id auctor vestibulum a mollis morbi mi fermentum sem facilisis facilisi bibendum velit a eleifend a quam ut fringilla dolor vestibulum parturient euismod iaculis mi elit vivamus. Risus parturient a nibh cras fermentum iaculis condimentum eros neque laoreet sed nibh quam parturient accumsan quisque.</p>
            </div>
        </div>
    </div>
</div>
Source: components/_alert-box.scss