Alert

        <coral-alert>
          <coral-alert-header>Info</coral-alert-header>
          <coral-alert-content>For great success, configure the whozit.</coral-alert-content>
        </coral-alert>
      

        <coral-alert variant="error">
          <coral-alert-header>Error</coral-alert-header>
          <coral-alert-content>There is something borked!</coral-alert-content>
        </coral-alert>
      

        <coral-alert variant="warning">
          <coral-alert-header>Warning</coral-alert-header>
          <coral-alert-content>Something is about to go wrong!</coral-alert-content>
        </coral-alert>
      

        <coral-alert variant="success">
          <coral-alert-header>Success</coral-alert-header>
          <coral-alert-content>Everything went better than expected.</coral-alert-content>
        </coral-alert>
      

        <coral-alert variant="help">
          <coral-alert-header>Help</coral-alert-header>
          <coral-alert-content>
            If you are struggling, read <a class="coral-Link coral-Link--subtle" href="#">the manual</a>.
          </coral-alert-content>
        </coral-alert>
      

        <coral-alert variant="success">
          <coral-alert-header>Success</coral-alert-header>
          <coral-alert-content>Everything went better than expected.</coral-alert-content>
          <coral-alert-footer>
            <a href="#" onclick="event.preventDefault()" class="coral-Link" coral-close="">You can click me to close the alert</a>
          </coral-alert-footer>
        </coral-alert>