Здесь вы узнаете, как сделать ярлыки состояния при помощи CSS.
Успех
Информация
Предупреждение
Опасность
Другое
Как сделать ярлыки состояния
Шаг 1) Добавляем HTML:
Пример
<span class="label success">Успех</span>
<span class="label info">Информация</span>
<span class="label warning">Предупреждение</span>
<span class="label danger">Опасность</span>
<span class="label other">Другое</span>
Шаг 2) Добавляем CSS:
Пример
.label {
color: white;
padding: 8px;
}
.success {background-color: #04AA6D;} /* Зеленый */
.info {background-color: #2196F3;} /* Синий */
.warning {background-color: #ff9800;} /* Оранжевый */
.danger {background-color: #f44336;} /* Красный */
.other {background-color: #e7e7e7; color: black;} /* Серый */
