BX Swiss Component Library

Modal

The modal component is used to display information that is initially hidden to the user. It can be made to display through the use of JavaScript.

<div class="modal">
    <div class="modal__container">
        <div class="modal__content">
            For more information on our trade definitions see the <a href='#'>Regulatory information</a>
        </div>
        <button class="modal__close">
            <svg viewBox="0 0 24 24" class="icon icon--s ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#close"></use>
	</svg>
            <span class="visually-hidden">Close</span>
        </button>
    </div>
</div>
 
<div class="modal">
    <div class="modal__container">
        <div class="modal__content">
            {{{text}}}
        </div>
         <button class="modal__close">
            {{{icon "close"}}}
            <span class="visually-hidden">Close</span>
        </button>
    </div>
</div>
 
{
  "text": "For more information on our trade definitions see the <a href='#'>Regulatory information</a>"
}