# Alert: Warn

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="alert alert--warn">
        <div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</div>
        <button class="alert-btn" type="button">
            <span class="icon icon-close icon--brand-gray icon--small"></span>
            <span class="sr-only">Schließen</span>
        </button>
    </div>

`
`

    <div class="alert alert--warn">
        <div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</div>
        <button class="alert-btn" type="button">
            <span class="icon icon-close icon--brand-gray icon--small"></span>
            <span class="sr-only">Schließen</span>
        </button>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .alert {
        @extend %heading-font-regular;

        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;

        padding: $spacer-xs;

        font-size: $font-size-base;
        color: $alert-color;

        &--info {
          background-color: $brand-info;
        }

        &--warn {
          color: $brand-text;
          background-color: $brand-warn;
        }

        &--error {
          background-color: $brand-danger;
        }
      }

      .alert-btn {
        @extend %base-button;

        color: inherit;
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .alert {
          padding: $spacer-sm;
        }
      }

  `
- URL: /components/raw/alert/_alert.scss
- Filesystem Path: components/05-atoms/form-elements/alert/_alert.scss
- Size: 533 Bytes

- Handle: @alert--warn
- Variants (3): Default , Error , Warn
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/form-elements/alert/alert--warn.html

No notes defined.