Alerts (アラート)

使い方

  1. 任意のサイズと色のアラートを表示できます。
  2. ページのデザインに応じて色やサイズのスタイルを上書きしてください。

画面表示

アラート表示がこのようにできます。
アラート表示がこのようにできます。

HTML/CSS（Sass）

<div class="e-alert e-alert-primary">
  アラート表示がこのようにできます。
</div>
<div class="e-alert e-alert-danger">
  アラート表示がこのようにできます。
</div>
.e-alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
}
.e-alert-primary {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe;
}
.e-alert-secondary {
  color: #41464b;
  background-color: #e2e3e5;
  border-color: #d3d6d8;
}
.e-alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}
.e-alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7;
}
.e-alert-warning {
  color: #664d03;
  background-color: #fff3cd;
  border-color: #ffecb5;
}
.e-alert-info {
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
}
.e-alert-light {
  color: #636464;
  background-color: #fefefe;
  border-color: #fdfdfe;
}
.e-alert-dark {
  color: #141619;
  background-color: #d3d3d4;
  border-color: #bcbebf;
}
.e-alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  
  &-primary {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
  }

  &-secondary {
    color: #41464b;
    background-color: #e2e3e5;
    border-color: #d3d6d8;
  }

  &-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
  }

  &-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
  }

  &-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
  }

  &-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
  }

  &-light {
    color: #636464;
    background-color: #fefefe;
    border-color: #fdfdfe;
  }

  &-dark {
    color: #141619;
    background-color: #d3d3d4;
    border-color: #bcbebf;
  }

}
TOP