pragma-views2/webcomponents/pragma-messages/pragma-messages.html

<template id="pragma-messages-template">
    <div class="pragma-messages-wrapper" keyup.delegate="onKeyUp" keydown.delegate="onKeyDown">
        <div class="pragma-messages-header">
            <h3>@translations.pragmaMessages.headings.title</h3>
            <icon-button id="btnCloseMessages" icon-name="close" tabindex="0" aria-label="Close messages" click.delegate="btnCloseClick"></icon-button>
        </div>
        <ul class="pragma-messages-list"  click.delegate="handleCardClick"></ul>
    </div>
</template>

<template id="pragma-messages-section-template">
    <li role="group">
        <h4>#item.name</h4>
        <ul role="list"></ul>
    </li>
</template>

<template id="pragma-messages-item-template">
    <li class="message" role="alert">
        <div class="message-body">
            <span>#item.message</span>
            <button class="btnCloseCard aux" aria-label="Remove">
                <svg viewBox="0 0 24 24">
                    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
                </svg>
            </button>
        </div>
        <div class="message-code">
            <div class="message-code-body" aria-expanded="false">
                <div class="message-code-body-title"></div>
                <span aria-label="Error code">#item.code</span>
            </div>
            <button class="aux btnMoreInfo"></button>
        </div>
    </li>
</template>