{{#> web/layout/default title="Alert" parentPageName="Components" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Alert Colors</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Alert Alert--success">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
        <div>We sent you an activation link to email <strong>spirit@lmc.eu</strong>. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

      <div class="Alert Alert--informative">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#info" />
        </svg>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
          provident unde. Eveniet, iste, molestiae? See <a href="./" class="link-underlined">FAQ</a> for more info.
        </div>
      </div>

      <div class="Alert Alert--warning">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
        </svg>
        <div><strong>Warning!</strong> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

      <div class="Alert Alert--danger">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#danger" />
        </svg>
        <div>Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

    </div>
  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Alert Centered</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Alert Alert--success Alert--center">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
        </svg>
        <div>We sent you an activation link to email <strong>spirit@lmc.eu</strong>. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

      <div class="Alert Alert--informative Alert--center">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#info" />
        </svg>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
          provident unde. Eveniet, iste, molestiae? See <a href="./" class="link-underlined">FAQ</a> for more info.
        </div>
      </div>

      <div class="Alert Alert--warning Alert--center">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
        </svg>
        <div><strong>Warning!</strong> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

      <div class="Alert Alert--danger Alert--center">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#danger" />
        </svg>
        <div>Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Alert Icons</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Alert Alert--success">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#profile" />
        </svg>
        <div>We sent you an activation link to email <strong>spirit@lmc.eu</strong>. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

      <div class="Alert Alert--informative">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#info" />
        </svg>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
          perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
          provident unde. Eveniet, iste, molestiae? See <a href="./" class="link-underlined">FAQ</a> for more info.
        </div>
      </div>

      <div class="Alert Alert--warning">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
        </svg>
        <div><strong>Warning!</strong> Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

      <div class="Alert Alert--danger">
        <svg width="24" height="24">
          <use xlink:href="/assets/icons/svg/sprite.svg#close" />
        </svg>
        <div>Data update failed due to missing internet connection. See <a href="./" class="link-underlined">FAQ</a> for more info.</div>
      </div>

    </div>

  </div>

</section>

{{/web/layout/default }}