Alert Callouts Subtle

By Rafi

note panel callout notification alert interaction toggler

How do I use This?

These alerts are great to grab attention when something needs to be addressed on your page or view.

HTML

<div data-closable class="callout alert-callout-subtle success">
  <strong>Yo!</strong> Alert Success
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">⊗</span>
  </button>
</div>

<div data-closable class="callout alert-callout-subtle alert">
  <strong>Yo!</strong> Alert Alert
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">⊗</span>
  </button>
</div>

<div data-closable class="callout alert-callout-subtle primary radius">
  <strong>Yo!</strong> Alert Primary
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">⊗</span>
  </button>
</div>

<div data-closable class="callout alert-callout-subtle warning radius">
  <strong>Yo!</strong> Alert Warning
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">⊗</span>
  </button>
</div>

<div data-closable class="callout alert-callout-subtle primary large">
  <strong>Yo!</strong> Large Alert
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">⊗</span>
  </button>
</div>

<div data-closable class="callout alert-callout-subtle primary small">
  <strong>Yo!</strong> Small Alert
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">⊗</span>
  </button>
</div>

$alert-callout-subtle-border-left-width: rem-calc(5);
$alert-callout-subtle-radius: 0.6rem;
$alert-callout-subtle-large-font-scale: 150%;
$alert-callout-subtle-small-font-scale: 80%;

.alert-callout-subtle {
  width: 100%;
  background: $light-gray;
  color: $dark-gray;
  border: 0;
  border-left: $alert-callout-subtle-border-left-width solid $dark-gray;
  box-shadow: 0 5px 8px -6px rgba(0,0,0, 0.2);

  &.success {
    background: $light-gray;
    color: $dark-gray;
    border-left: $alert-callout-subtle-border-left-width solid $success-color;
  }

  &.alert {
    background: $light-gray;
    color: $dark-gray;
    border-left: $alert-callout-subtle-border-left-width solid $alert-color;
  }

  &.warning {
    background: $light-gray;
    color: $dark-gray;
    border-left: $alert-callout-subtle-border-left-width solid $warning-color;
  }

  &.primary {
    background: $light-gray;
    color: $dark-gray;
    border-left: $alert-callout-subtle-border-left-width solid $primary-color;
  }

  &.small {

    font-size: $alert-callout-subtle-small-font-scale;

    .close-button {
      font-size: 1.5rem;
    }
  }

  &.large {
    font-size: $alert-callout-subtle-large-font-scale;

    .close-button {
      font-size: 3rem;
    }
  }

  .close-button {
    font-size: 2rem;
    @include vertical-center;
  }

  &.radius {
    border-radius: $alert-callout-subtle-radius;
  }
}

.alert-callout-subtle {
  width: 100%;
  background: #e6e6e6;
  color: #8a8a8a;
  border: 0;
  border-left: 0.3125rem solid #8a8a8a;
  box-shadow: 0 5px 8px -6px rgba(0, 0, 0, 0.2);
}

.alert-callout-subtle.success {
  background: #e6e6e6;
  color: #8a8a8a;
  border-left: 0.3125rem solid #3adb76;
}

.alert-callout-subtle.alert {
  background: #e6e6e6;
  color: #8a8a8a;
  border-left: 0.3125rem solid #cc4b37;
}

.alert-callout-subtle.warning {
  background: #e6e6e6;
  color: #8a8a8a;
  border-left: 0.3125rem solid #ffae00;
}

.alert-callout-subtle.primary {
  background: #e6e6e6;
  color: #8a8a8a;
  border-left: 0.3125rem solid #1779ba;
}

.alert-callout-subtle.small {
  font-size: 80%;
}

.alert-callout-subtle.small .close-button {
  font-size: 1.5rem;
}

.alert-callout-subtle.large {
  font-size: 150%;
}

.alert-callout-subtle.large .close-button {
  font-size: 3rem;
}

.alert-callout-subtle .close-button {
  font-size: 2rem;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.alert-callout-subtle.radius {
  border-radius: 0.6rem;
}

Alert Callouts Subtle

By Rafi

Circle Graph

Alert Callouts Bordered

Progress Indicator

Alert Callouts Subtle

By Rafi

Similar Building Blocks

Circle Graph

Alert Callouts Bordered

Progress Indicator