<div class="c-global-banner c-global-banner--default">
    <div class="o-svg-icon o-svg-icon-circle-information o-svg-icon--default ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="#595959" />
            <path d="M12 10C12.5523 10 13 10.4477 13 11V17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10Z" fill="#595959" />
            <path d="M13.5 7.5C13.5 8.32843 12.8284 9 12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5Z" fill="#595959" />
        </svg>
    </div>
    <p class="c-body-1">
    <p>Nam eget hendrerit massa, a consequat turpis.</p>
    </p>
    <button class="c-button c-button--borderless c-button--icon" type="button" data-banner-close="data-banner-close">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-close  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.29289 5.2929C5.68342 4.90237 6.31658 4.90237 6.70711 5.2929L12 10.5858L17.2929 5.2929C17.6834 4.90237 18.3166 4.90237 18.7071 5.2929C19.0976 5.68342 19.0976 6.31659 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31659 4.90237 5.68342 5.29289 5.2929Z" fill="#595959" />
                </svg>
            </div>
            <div class="u-sr-accessible">Close
            </div>
        </span>
    </button>
</div>

<div class="c-global-banner c-global-banner--warning">
    <div class="o-svg-icon o-svg-icon-warning o-svg-icon--warning ">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12.0002 14C11.4479 14 11.0002 13.5523 11.0002 13V10C11.0002 9.44772 11.4479 9 12.0002 9C12.5525 9 13.0002 9.44772 13.0002 10V13C13.0002 13.5523 12.5525 14 12.0002 14Z" fill="#595959" />
            <path d="M10.5002 16.5C10.5002 15.6716 11.1717 15 12.0002 15C12.8286 15 13.5002 15.6716 13.5002 16.5C13.5002 17.3284 12.8286 18 12.0002 18C11.1717 18 10.5002 17.3284 10.5002 16.5Z" fill="#595959" />
            <path d="M10.2303 3.2156C10.9802 1.79093 13.0202 1.79092 13.77 3.2156L22.1136 19.0685C22.8146 20.4003 21.8488 22 20.3438 22H3.65653C2.15151 22 1.18574 20.4003 1.8867 19.0685L10.2303 3.2156ZM20.3438 20L12.0002 4.14709L3.65653 20L20.3438 20Z" fill="#595959" />
        </svg>
    </div>
    <p class="c-body-1">
    <p>Nam eget hendrerit massa, a consequat turpis.</p>
    </p>
    <button class="c-button c-button--borderless c-button--icon" type="button" data-banner-close="data-banner-close">
        <span class="c-button__content">
            <div class="o-svg-icon o-svg-icon-close  ">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.29289 5.2929C5.68342 4.90237 6.31658 4.90237 6.70711 5.2929L12 10.5858L17.2929 5.2929C17.6834 4.90237 18.3166 4.90237 18.7071 5.2929C19.0976 5.68342 19.0976 6.31659 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31659 4.90237 5.68342 5.29289 5.2929Z" fill="#595959" />
                </svg>
            </div>
            <div class="u-sr-accessible">Close
            </div>
        </span>
    </button>
</div>