Referência:
https://designsystem.digital.gov/components/alert/
https://design.gitlab.com/components/alert/
Um alerta mantém os usuários informados sobre alterações importantes e às vezes sensíveis ao tempo.
Alertas padrão
Paleta de Cores - Alerta
CSS
/* CSS HEX */
--denim: #155bcbff;
--forest-green-web: #168821ff;
--cyber-yellow: #ffcd07ff;
--vermilion: #e52207ff;
/* CSS HSL */
--denim: hsla(217, 81%, 44%, 1);
--forest-green-web: hsla(126, 72%, 31%, 1);
--cyber-yellow: hsla(48, 100%, 51%, 1);
--vermilion: hsla(7, 94%, 46%, 1);
/* SCSS HEX */
$denim: #155bcbff;
$forest-green-web: #168821ff;
$cyber-yellow: #ffcd07ff;
$vermilion: #e52207ff;
/* SCSS HSL */
$denim: hsla(217, 81%, 44%, 1);
$forest-green-web: hsla(126, 72%, 31%, 1);
$cyber-yellow: hsla(48, 100%, 51%, 1);
$vermilion: hsla(7, 94%, 46%, 1);
/* SCSS RGB */
$denim: rgba(21, 91, 203, 1);
$forest-green-web: rgba(22, 136, 33, 1);
$cyber-yellow: rgba(255, 205, 7, 1);
$vermilion: rgba(229, 34, 7, 1);
/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-right: linear-gradient(90deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-bottom: linear-gradient(180deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-left: linear-gradient(270deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-top-right: linear-gradient(45deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-bottom-right: linear-gradient(135deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-top-left: linear-gradient(225deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-bottom-left: linear-gradient(315deg, #155bcbff, #168821ff, #ffcd07ff, #e52207ff);
$gradient-radial: radial-gradient(#155bcbff, #168821ff, #ffcd07ff, #e52207ff);
role
pode notificar tecnologias assistivas sobre mensagens importantes e urgentes. Para aumentar a importância do alerta, escolha o apropriado role
na tabela de funções ARIA e inclua-o no .usa-alert
elemento.
Atributo | Caso de uso |
---|---|
role="alert" |
Mensagens importantes que exigem atenção imediata do usuário. Exemplo: alerta de erro |
role="status" |
Mensagens que fornecem informações consultivas, mas não têm a mesma urgência que os alertas. Exemplo: alerta de sucesso |
role="region" |
Mensagens que fornecem informações que o usuário gostaria de encontrar facilmente, mas não são importantes o suficiente para interromper o fluxo de trabalho do usuário. Exemplo: Alerta informativo ou de aviso Nota: você deve adicionar um atributo aria-label ou apropriado ao usar esta função.aria-labelledby |
Referência:WAI-ARIA
Variável | Descrição |
---|---|
$theme-alert-bar-width |
Largura da barra colorida à esquerda do alerta. |
$theme-alert-font-family |
Família de fontes do alerta. |
$theme-alert-icon-size |
Tamanho do ícone de alerta. |
$theme-alert-padding-x |
Preenchimento à esquerda e à direita do alerta. |
$theme-alert-text-color |
Cor do texto em fundos claros. Default usa cor de texto definida em $theme-text-color . |
$theme-alert-text-reverse-color |
Cor do texto em fundos escuros. Default usa cor de texto reversa definida em $theme-text-reverse-color . |
$theme-alert-text-color |
Vincule a cor em fundos claros. Default usa a cor do link definida em $theme-link-color . |
$theme-alert-link-reverse-color |
Cor de link em fundos escuros. Default usa a cor do link reverso definida em $theme-link-reverse-color . |
Variante | Descrição |
---|---|
.usa-alert--info |
Exibir um alerta de status informativo. |
.usa-alert--warning |
Exibir um alerta de status de aviso. |
.usa-alert--error |
Exibir um alerta de status de erro. |
.usa-alert--success |
Exibir um alerta de status de sucesso. |
.usa-alert--slim |
Exiba uma versão mais compacta do alerta. |
.usa-alert--no-icon |
Exibir um alerta sem um ícone. |
@forward "usa-alert";
uswds-fonts
, usa-icon
Atualizações significativas de código e orientação estão listadas na tabela a seguir:
Encontro | versão USWDS | afeta | Descrição |
---|---|---|---|
19/10/2022 | 3.2.0 |
|
Atualizado o alinhamento do conteúdo do alerta para corresponder visualmente ao conteúdo do banner. O componente de alerta do site também foi atualizado. Mais Informações: uswds#4922 |
28/04/2022 | 3.0.0 |
|
Quebra Atualizado para a sintaxe do módulo Sass e nova estrutura de pacote. Mais Informações: uswds#4656 |
17-03-2021 | 2.11.1 |
|
Ícones brancos ausentes restaurados. Ícones error--white , info--white , e restaurados . warning--white Mais Informações: uswds#4106 |
17-03-2021 | 2.11.0 |
|
Fornecido melhor suporte para ícones de cores que se adaptam às configurações do tema. Agora a cor do ícone de alerta será atualizada automaticamente para se adaptar ao plano de fundo do alerta ou à cor do texto do alerta. Mais Informações: uswds#4079 |
17-03-2021 | 2.11.0 |
|
Adicionado a $theme-alert-padding-y configuração. Mais Informações: uswds#4079 |