Alert

Alerts

Component Preview
<!-- Hawk Alert -->
<div role="alert">
    <div class="uiowa-alerts-wrapper">
        <div class="alert hawk-alert alert-danger">
            <div class="hawk-alert-message">
                <span class="hawk-alert-heading">
                    <span class="hawk-alert-label">Hawk Alert</span>
                    <span class="hawk-alert-date">Tuesday, April 14, 2020 - 7:30 PM</span>
                </span>
                <span class="hawk-alert-body">
                    <p>Test Hawk Alert: This is a test of the Hawk Alert system conducted by Cindy Schooley. This is only a test.</p>
                </span>
                <a class="hawk-alert-link alert-link" href="https://e.uiowa.edu">Visit e.uiowa.edu for more information.</a>
            </div>
        </div>
    </div>
</div>

<!-- Success -->
<div role="alert">
    <div class="uiowa-alerts-wrapper">
        <div class="alert alert-success">
            <div class="hawk-alert-message">
                <span class="hawk-alert-body">
                    <p><i class="fas fa-check-circle"></i><strong>Success:</strong> there are no active alerts at this time.&nbsp;</p>
                </span>
                <a class="hawk-alert-link alert-link" href="https://e.uiowa.edu">Visit e.uiowa.edu for more information.</a>
            </div>
        </div>
    </div>
</div>

<!-- Warning -->
<div role="alert">
    <div class="uiowa-alerts-wrapper">
        <div class="alert alert-warning">
            <div class="hawk-alert-message">
                <span class="hawk-alert-body">
                    <p><i class="fas fa-exclamation-circle"></i><strong>Warning:</strong> there are active alerts at this time.&nbsp;</p>
                </span>
                <a class="hawk-alert-link alert-link" href="https://e.uiowa.edu">Visit e.uiowa.edu for more information.</a>
            </div>
        </div>
    </div>
</div>

<!-- Info -->
<div role="alert">
    <div class="uiowa-alerts-wrapper">
        <div class="alert alert-info">
            <div class="hawk-alert-message">
                <span class="hawk-alert-body">
                    <p><i class="fas fa-info-circle"></i><strong>Info:</strong> there are no active alerts at this time.&nbsp;</p>
                </span>
                <a class="hawk-alert-link alert-link" href="https://e.uiowa.edu">Visit e.uiowa.edu for more information.</a>
            </div>
        </div>
    </div>
</div>

<!-- Danger -->
<div role="alert">
    <div class="uiowa-alerts-wrapper">
        <div class="alert alert-danger">
            <div class="hawk-alert-message">
                <span class="hawk-alert-body">
                    <p><i class="fas fa-exclamation-circle"></i><strong>Danger:</strong> there are active alerts at this time.&nbsp;</p>
                </span>
                <a class="hawk-alert-link alert-link" href="https://e.uiowa.edu">Visit e.uiowa.edu for more information.</a>
            </div>
        </div>
    </div>
</div>

<!-- System Message -->
<div role="alert">
    <div class="uiowa-alerts-wrapper">
        <div class="alert alert-dismissible alert-success">
            <div class="hawk-alert-message">
                <span class="hawk-alert-body">
                    <p><i class="fas fa-times-circle"></i>Basic page <em class="placeholder"><a href="/student-life" hreflang="en">Student life</a></em> has been updated.</p>
                </span>
                <a class="hawk-alert-link alert-link" href=""></a>
            </div>
        </div>
    </div>
</div>

  • Content:
    .hawk-alert.alert .hawk-alert-message {
      margin: 0 1.25rem;
      position: relative; }
      @media (min-width: 84.375em) {
        .hawk-alert.alert .hawk-alert-message {
          max-width: 81.875em;
          margin: 0 auto; } }
    
    .alert {
      padding: 1.05rem 0; }
    
    .alert-danger {
      border-bottom: 2px solid #BD472A;
      background: #fbeeeb; }
      .alert-danger .close:before {
        background: #BD472A; }
    
    .alert-success {
      border-bottom: 2px solid #00664F;
      background: #ebfffa; }
      .alert-success .close:before {
        background: #00664F; }
    
    .alert-warning {
      border-bottom: 2px solid #FFCD00;
      background: #fffae6; }
      .alert-warning .close:before {
        background: #63666A; }
    
    .alert-info {
      border-bottom: 2px solid #00558C;
      background: #f2faff; }
      .alert-info .close:before {
        background: #00558C; }
    
    .hawk-alert.alert {
      display: flex;
      align-items: center; }
      @media (min-width: 855px) {
        .hawk-alert.alert {
          text-align: left; } }
      @media (min-width: 855px) {
        .hawk-alert.alert > * {
          display: flex;
          text-align: left; } }
      @media (min-width: 855px) {
        .hawk-alert.alert .hawk-alert-message {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px; } }
      @media (min-width: 855px) {
        .hawk-alert.alert .hawk-alert-message .hawk-alert-heading {
          border-right: 1px solid #63666A;
          grid-area: 1 / 1 / 3 / 2; } }
      @media (min-width: 855px) {
        .hawk-alert.alert .hawk-alert-message .hawk-alert-link.alert-link {
          width: 100%;
          padding-left: 1.05rem;
          padding-top: 0.325rem;
          text-align: left;
          grid-area: 2 / 2 / 3 / 5; } }
      @media (min-width: 855px) {
        .hawk-alert.alert .hawk-alert-message .hawk-alert-body {
          width: 100%;
          padding-left: 1.05rem;
          text-align: left;
          flex-wrap: wrap;
          display: flex;
          align-items: center;
          grid-area: 1 / 2 / 2 / 5; } }
      .hawk-alert.alert .hawk-alert-message .hawk-alert-body p {
        width: 100%;
        margin: 0; }
        @media (min-width: 855px) {
          .hawk-alert.alert .hawk-alert-message .hawk-alert-body p {
            text-align: left; } }
    
    .alert {
      text-align: center; }
    
    .hawk-alert-message,
    .alert {
      clear: both;
      color: #151515;
      font-family: "Roboto", sans-serif;
      font-size: 1.2rem;
      line-height: 1.4; }
      .hawk-alert-message::after,
      .alert::after {
        content: '';
        display: table;
        clear: both; }
      .hawk-alert-message .close,
      .alert .close {
        border: none;
        background: none; }
        .hawk-alert-message .close span,
        .alert .close span {
          position: absolute !important;
          height: 1px;
          width: 1px;
          overflow: hidden;
          clip: rect(1px, 1px, 1px, 1px); }
        .hawk-alert-message .close:hover, .hawk-alert-message .close:focus,
        .alert .close:hover,
        .alert .close:focus {
          cursor: pointer; }
          .hawk-alert-message .close:hover:before, .hawk-alert-message .close:focus:before,
          .alert .close:hover:before,
          .alert .close:focus:before {
            color: #fff;
            border-radius: 50%;
            background: #151515; }
        .hawk-alert-message .close:before,
        .alert .close:before {
          display: inline-block;
          width: 35px;
          margin-right: 5px;
          padding: 7px;
          content: "\f00d";
          color: #fff;
          border-radius: 50%;
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          font-style: normal;
          font-variant: normal;
          line-height: 1.2;
          line-height: 1;
          text-rendering: auto; }
      .hawk-alert-message p,
      .alert p {
        width: 70%;
        text-align: center;
        color: #fff; }
      .hawk-alert-message a,
      .alert a {
        text-decoration: underline;
        color: #151515;
        font-weight: 700; }
      .hawk-alert-message p,
      .hawk-alert-message > *,
      .alert p,
      .alert > * {
        margin: 0 auto;
        text-align: center;
        color: #151515;
        font-family: "Roboto", sans-serif;
        font-size: 1.2rem;
        line-height: 1.4; }
        .hawk-alert-message p i,
        .hawk-alert-message p span,
        .hawk-alert-message p svg,
        .hawk-alert-message > * i,
        .hawk-alert-message > * span,
        .hawk-alert-message > * svg,
        .alert p i,
        .alert p span,
        .alert p svg,
        .alert > * i,
        .alert > * span,
        .alert > * svg {
          margin-right: 0.625rem; }
        .hawk-alert-message p a,
        .hawk-alert-message > * a,
        .alert p a,
        .alert > * a {
          text-decoration: underline;
          color: #151515;
          font-weight: 700; }
          .hawk-alert-message p a:hover, .hawk-alert-message p a:focus,
          .hawk-alert-message > * a:hover,
          .hawk-alert-message > * a:focus,
          .alert p a:hover,
          .alert p a:focus,
          .alert > * a:hover,
          .alert > * a:focus {
            text-decoration: none; }
    
    .alert-danger .hawk-alert-label:before, .alert-danger
    h2:before, .alert-danger
    h3:before, .alert-danger
    h4:before, .alert-danger
    h5:before, .alert-danger
    h6:before {
      color: #BD472A; }
    
    .alert-warning .hawk-alert-label:before, .alert-warning
    h2:before, .alert-warning
    h3:before, .alert-warning
    h4:before, .alert-warning
    h5:before, .alert-warning
    h6:before {
      color: #63666A; }
    
    .alert-success .hawk-alert-label:before, .alert-success
    h2:before, .alert-success
    h3:before, .alert-success
    h4:before, .alert-success
    h5:before, .alert-success
    h6:before {
      color: #00664F; }
    
    .alert-info .hawk-alert-label:before, .alert-info
    h2:before, .alert-info
    h3:before, .alert-info
    h4:before, .alert-info
    h5:before, .alert-info
    h6:before {
      color: #00558C; }
    
    .uiowa-alerts-wrapper .hawk-alert-heading {
      padding-right: 1.875rem;
      text-align: left; }
    
    .uiowa-alerts-wrapper h2,
    .uiowa-alerts-wrapper h3,
    .uiowa-alerts-wrapper h4,
    .uiowa-alerts-wrapper h5,
    .uiowa-alerts-wrapper h6 {
      display: block;
      padding: 0 0.325rem 0 1.875rem;
      text-align: center;
      font-size: 1.7rem; }
      @media (min-width: 855px) {
        .uiowa-alerts-wrapper h2,
        .uiowa-alerts-wrapper h3,
        .uiowa-alerts-wrapper h4,
        .uiowa-alerts-wrapper h5,
        .uiowa-alerts-wrapper h6 {
          align-items: center;
          justify-content: center; } }
    
    .uiowa-alerts-wrapper .hawk-alert-label:before {
      padding-right: 0.625rem; }
    
    .uiowa-alerts-wrapper .hawk-alert-label,
    .uiowa-alerts-wrapper h2,
    .uiowa-alerts-wrapper h3,
    .uiowa-alerts-wrapper h4,
    .uiowa-alerts-wrapper h5,
    .uiowa-alerts-wrapper h6 {
      text-transform: uppercase;
      font-size: 1.7rem;
      font-weight: 700; }
      .uiowa-alerts-wrapper .hawk-alert-label:before,
      .uiowa-alerts-wrapper h2:before,
      .uiowa-alerts-wrapper h3:before,
      .uiowa-alerts-wrapper h4:before,
      .uiowa-alerts-wrapper h5:before,
      .uiowa-alerts-wrapper h6:before {
        display: inline-block;
        content: "\f06a";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        line-height: 1;
        text-rendering: auto; }
    
    .uiowa-alerts-wrapper .hawk-alert-date {
      display: block;
      text-align: center;
      font-family: "Roboto", sans-serif;
      font-size: 1.2rem;
      font-weight: 300; }
      @media (min-width: 855px) {
        .uiowa-alerts-wrapper .hawk-alert-date {
          text-align: left; } }
    
    .uiowa-alerts-wrapper .hawk-alert-body,
    .uiowa-alerts-wrapper .hawk-alert-link {
      display: block; }
    
  • URL: /components/raw/alert/alert.css
  • Filesystem Path: src/components/alert/alert.css
  • Size: 7.2 KB
  • Content:
    @import '../../assets/scss/variables';
    @import '../../assets/scss/utilities';
    
    .alert {
      padding: $md 0;
    }
    
    .alert-danger {
      border-bottom: 2px solid $danger;
      background: $danger-light;
    
      .close:before {
        background: $danger;
      }
    }
    
    .alert-success {
      border-bottom: 2px solid $success;
      background: $success-light;
    
      .close:before {
        background: $success;
      }
    }
    
    .alert-warning {
      border-bottom: 2px solid $warning;
      background: $warning-light;
    
      .close:before {
        background: $brand-cool-gray;
      }
    }
    
    .alert-info {
      border-bottom: 2px solid $info;
      background: $info-light;
    
      .close:before {
        background: $info;
      }
    }
    
    .hawk-alert.alert {
      @include breakpoint(menu) {
        text-align: left;
      }
    
      @include center(vertical);
    
      >* {
        @include breakpoint(menu) {
          display: flex;
          text-align: left;
        }
      }
    
      .hawk-alert-message {
        @extend %container;
    
        @include breakpoint(menu) {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-rows: repeat(2, 1fr);
          grid-column-gap: 0px;
          grid-row-gap: 0px;
        }
    
        .hawk-alert-heading {
          @include breakpoint(menu) {
            border-right: 1px solid $brand-cool-gray;
            grid-area: 1 / 1 / 3 / 2;
          }
        }
    
        .hawk-alert-link.alert-link {
          @include breakpoint(menu) {
            width: 100%;
            padding-left: $md;
            padding-top: $xsm;
            text-align: left;
            grid-area: 2 / 2 / 3 / 5;
          }
        }
    
        .hawk-alert-body {
          @include breakpoint(menu) {
            width: 100%;
            padding-left: $md;
            text-align: left;
            flex-wrap: wrap;
    
            @include center(vertical);
            grid-area: 1 / 2 / 2 / 5;
          }
    
          p {
            width: 100%;
            margin: 0;
    
            @include breakpoint(menu) {
              text-align: left;
            }
          }
    
        }
      }
    }
    
    .alert {
      text-align: center;
    }
    
    .hawk-alert-message,
    .alert {
      clear: both;
      color: $secondary;
      font-family: $font-family-sans-serif;
      font-size: 1.2rem;
      line-height: 1.4;
      @include clearfix;
    
      .close {
        border: none;
        background: none;
    
        span {
          @include element-invisible;
        }
    
        &:hover,
        &:focus {
          cursor: pointer;
    
          &:before {
            color: #fff;
            border-radius: 50%;
            background: $secondary;
          }
        }
    
        &:before {
          display: inline-block;
          width: 35px;
          margin-right: 5px;
          padding: 7px;
          content: "\f00d";
          color: #fff;
          border-radius: 50%;
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          font-style: normal;
          font-variant: normal;
          line-height: 1.2;
          line-height: 1;
          text-rendering: auto;
        }
      }
    
      p {
        width: 70%;
        text-align: center;
        color: #fff;
      }
    
      a {
        text-decoration: underline;
        color: $secondary;
        font-weight: $font-weight-bold;
      }
    
      p,
      >* {
        margin: 0 auto;
        text-align: center;
        color: $secondary;
        font-family: $font-family-sans-serif;
        font-size: 1.2rem;
        line-height: 1.4;
    
        i,
        span,
        svg {
          margin-right: $sm;
        }
    
        a {
          text-decoration: underline;
          color: $secondary;
          font-weight: $font-weight-bold;
    
          &:hover,
          &:focus {
            text-decoration: none;
          }
        }
      }
    }
    
    .hawk-alert-label,
    h2,
    h3,
    h4,
    h5,
    h6 {
    
      .alert-danger & {
        &:before {
          color: $danger;
        }
      }
    
      .alert-warning & {
        &:before {
          color: $brand-cool-gray;
        }
      }
    
      .alert-success & {
        &:before {
          color: $success;
        }
      }
    
      .alert-info & {
        &:before {
          color: $info;
        }
      }
    }
    
    
    .uiowa-alerts-wrapper {
    
      .hawk-alert-heading {
        padding-right: $lg;
        text-align: left;
      }
    
      h2,
      h3,
      h4,
      h5,
      h6 {
        display: block;
        padding: 0 $xsm 0 $lg;
        text-align: center;
        font-size: 1.7rem;
    
        @include breakpoint(menu) {
          align-items: center;
          justify-content: center;
        }
      }
    
      .hawk-alert-label {
        &:before {
          padding-right: $sm;
        }
      }
    
      .hawk-alert-label,
      h2,
      h3,
      h4,
      h5,
      h6 {
        text-transform: uppercase;
        font-size: 1.7rem;
        font-weight: $font-weight-bold;
    
        &:before {
          display: inline-block;
          content: "\f06a";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          font-style: normal;
          font-variant: normal;
          line-height: 1;
          text-rendering: auto;
        }
      }
    
      .hawk-alert-date {
        display: block;
        text-align: center;
        font-family: $font-family-sans-serif;
        font-size: 1.2rem;
        font-weight: $font-weight-light;
    
        @include breakpoint(menu) {
          text-align: left;
    
        }
      }
    
      .hawk-alert-body,
      .hawk-alert-link {
        display: block;
      }
    }
    
  • URL: /components/raw/alert/alert.scss
  • Filesystem Path: src/components/alert/alert.scss
  • Size: 4.7 KB