Alert Callouts Bordered

By Rafi

How do I use This?

These alerts are great to grab attention when something needs to be addressed on your page or view. They are closable and have an easy to change radius.

HTML

<div data-closable class="callout alert-callout-border primary">
  <strong>Whoops!</strong> - You clearly did that wrong.
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div data-closable class="callout alert-callout-border secondary">
  <strong>Mistake</strong> - You made a mistake.
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div data-closable class="callout alert-callout-border radius">
  <strong>Oops</strong> - The most dreadful word in nuclear physics.
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div data-closable class="callout alert-callout-border alert radius">
  <strong>Error</strong> - You are the error.
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div data-closable class="callout alert-callout-border success">
  <strong>Yay!</strong> - You accomplished a simple task!
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<div data-closable class="callout alert-callout-border warning">
  <strong>Caution</strong> - A word I don't understand.
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

$alert-callout-border-left-width: rem-calc(5);
$alert-callout-border-padding: 1.3rem;
$alert-callout-border-radius: 0.6rem;

.alert-callout-border {
  width: 100%;
  padding: $alert-callout-border-padding;
  border-left-width: $alert-callout-border-left-width;
  border-left-color: $medium-gray;

  strong {
    color: $body-font-color;
  }

  .close-button {
    @include vertical-center;
  }

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

  &.primary {
    border-left-color: $primary-color;

    strong {
      color: $primary-color;
    }
  }

  &.secondary {
    border-left-color: $secondary-color;

    strong {
      color: $secondary-color;
    }
  }

  &.alert {
    border-left-color: $alert-color;

    strong {
      color: $alert-color;
    }
  }

  &.success {
    border-left-color: $success-color;

    strong {
      color: $success-color;
    }
  }

  &.warning {
    border-left-color: $warning-color;

    strong {
      color: $warning-color;
    }
  }
}

.alert-callout-border {
  width: 100%;
  padding: 1.3rem;
  border-left-width: 0.3125rem;
  border-left-color: #cacaca;
}

.alert-callout-border strong {
  color: #0a0a0a;
}

.alert-callout-border .close-button {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

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

.alert-callout-border.primary {
  border-left-color: #1779ba;
}

.alert-callout-border.primary strong {
  color: #1779ba;
}

.alert-callout-border.secondary {
  border-left-color: #767676;
}

.alert-callout-border.secondary strong {
  color: #767676;
}

.alert-callout-border.alert {
  border-left-color: #cc4b37;
}

.alert-callout-border.alert strong {
  color: #cc4b37;
}

.alert-callout-border.success {
  border-left-color: #3adb76;
}

.alert-callout-border.success strong {
  color: #3adb76;
}

.alert-callout-border.warning {
  border-left-color: #ffae00;
}

.alert-callout-border.warning strong {
  color: #ffae00;
}

Alert Callouts Bordered

By Rafi

Fancy Alert

Mobile App Modal

Vertical Bar Graph

Alert Callouts Bordered

By Rafi

Similar Building Blocks

Fancy Alert

Mobile App Modal

Vertical Bar Graph