Alert

An Alert Message is a design system component that provides users with critical information or feedback about their interaction with the application. It typically appears as a prominent, styled box containing a message, often accompanied by an icon to indicate the type of alert, such as success, error, warning, or information. Alert messages are designed to capture attention and convey important updates or issues that require user awareness or action.
Usage

Alert

Variants:

                                                
                                                <div class="Alert Alert--success mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#info" />
                                                  </svg>
                                                  <div>We sent you an activation link to email <strong>spirit@lmc.eu</strong>.</div>
                                                </div>
                                                
                                                <div class="Alert Alert--informative mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#info" />
                                                  </svg>
                                                  <div>
                                                    Data update failed due to missing internet connection Data update failed due to missing internet connection Data
                                                    update failed due to missing internet connection Data update failed due to missing internet connection Data update
                                                    failed due to missing internet connection Data update failed due to missing internet connection
                                                  </div>
                                                </div>
                                                
                                                <div class="Alert Alert--warning mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#warning" />
                                                  </svg>
                                                  <div><strong>Warning!</strong> Data update failed due to missing internet connection</div>
                                                </div>
                                                
                                                <div class="Alert Alert--danger mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#close" />
                                                  </svg>
                                                  <div>Data update failed due to missing internet connection</div>
                                                </div>
                                                
                                                <div class="Alert Alert--success Alert--center mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#info" />
                                                  </svg>
                                                  <div>We sent you an activation link to email <strong>spirit@lmc.eu</strong>.</div>
                                                </div>
                                                
                                                <div class="Alert Alert--informative Alert--center">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#info" />
                                                  </svg>
                                                  <div>
                                                    Data update failed due to missing internet connection Data update failed due to missing internet connection Data
                                                    update failed due to missing internet connection Data update failed due to missing internet connection Data update
                                                    failed due to missing internet connection Data update failed due to missing internet connection
                                                  </div>
                                                </div>
                                                
                                                <div class="Alert Alert--warning Alert--center mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#warning" />
                                                  </svg>
                                                  <div><strong>Warning!</strong> Data update failed due to missing internet connection</div>
                                                </div>
                                                
                                                <div class="Alert Alert--danger Alert--center mb-600">
                                                  <svg width="24" height="24">
                                                    <use xlink:href="/icons/svg/sprite.svg#close" />
                                                  </svg>
                                                  <div>Data update failed due to missing internet connection</div>
                                                </div>