Alert (Global)

Global alert

Use modifier ds-block--full-width on the ds-block container and ds-alert--full-width on ds-alert component for a full width version.

The full width version is a special version for page/site alerts that sits immeadiately below the site header.

Or they could be used for applications at top or bottom of viewport.

Full width alert

ready

The full width version is for top of page immeadiately below header

<div class="ds-block ds-block--full-width">

    <div class="ds-alert ds-alert--info ds-alert--full-width ds-alert--centered" role="alert">
        <div class="ds-alert__icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-info"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="8"></line></svg>
        </div>

        <div class="ds-alert__text">
            <p>La Trobe’s response to the COVID-19 emergency. <a href="https://www.latrobe.edu.au/about/novel-coronavirus">Read COVID-19 statements and FAQs.</a></p>
        </div>
    </div>

</div>