Alerta Exemplo BEM

by Rodrigo Portillo

HTML

<div class="alert-modal alert-modal--warning">
  <div class="alert-modal__header">
    <h2 class="alert-modal__title">Atenção</h2>
  </div>
  <div class="alert-modal__body">
    <p class="alert-modal__text">Algo inesperado aconteceu!</p>
  </div>
  <div class="alert-modal__footer">
    <button class="alert-modal__button alert-modal__button--ok">OK</button>
  </div>
</div>

CSS

.alert-modal {
  background: white;
  border: 1px solid orange;

  &--warning {
    border-color: red;
  }

  &__header,
  &__body,
  &__footer {
    padding: 1rem;
  }

  &__title {
    font-weight: bold;
  }

  &__text {
    color: #333;
  }

  &__button {
    background-color: orange;

    &--ok {
      background-color: green;
      color: white;
    }
  }
}