Kit de interface do usuário (UI Kit) do diretório de aplicativos

Use os componentes do kit de interface do usuário (UI Kit) do diretório de aplicativos para garantir que a interface do seu aplicativo esteja alinhada com as diretrizes de estilo da SendPulse. Isso acelera significativamente o desenvolvimento e garante um design consistente.

O kit inclui uma única folha de estilos para integração com o diretório de aplicativos, além de classes predefinidas para estilizar textos, formulários, tabelas, botões e outros elementos.

O kit de interface do usuário do diretório de aplicativos permite que você:

  • Diminua o tempo de criação do layout usando todas as regras básicas de CSS/SASS reunidas em um único arquivo;
  • Garanta a consistência com classes predefinidas para elementos de texto, formulários, tabelas, botões e muito mais;
  • Aumente a produtividade de designers e desenvolvedores com os componentes prontos para uso no Figma.

Neste artigo, vamos explorar e aprender como usar os principais componentes do UI kit do diretório de aplicativos.

Conteúdo

Primeiros passos

Para começar a usar o UI kit do diretório de aplicativos, é necessário adicionar um link para o código CSS do kit dentro da tag <head> da página do seu app. Nenhuma outra etapa de configuração é necessária.

<link rel="stylesheet" href="https://cdn.sendpulse.com/dist/css/sp-marketplace-app-ui.min.css">

Para ajustar o design dos elementos do diretório de aplicativos, utilize o Figma UI Kit, que contém todos os componentes essenciais.

Configure a tipografia

O kit inclui um conjunto completo de estilos tipográficos que seguem a linguagem de design da SendPulse. Esses estilos garantem consistência e legibilidade em toda a página do seu app.

Corpo do texto

O tamanho base da fonte é de 16px com altura de linha de 1.428. Os parágrafos (<p>) incluem espaçamento vertical padrão para facilitar a leitura. Você pode usar a classe CSS .lead para textos introdutórios maiores.

Cada bloco de parágrafo (<p>) recebe uma margem inferior equivalente à metade da sua altura de linha calculada (10px por padrão).

Elementos de texto inline

Use elementos de texto inline para estilizar rapidamente partes específicas do texto do corpo. Estão disponíveis os seguintes elementos:

<mark> Destaca o conteúdo principal.

Esse elemento serve para chamar a atenção dos usuários para partes importantes do texto, como avisos ou instruções.
<del> Exibe o conteúdo removido.

Esse elemento serve para exibir alterações em conteúdos, como logs de atualização ou comentários.
<s> Risca o texto para indicar dados desatualizados ou irrelevantes.
<ins> Mostra conteúdo inserido.

Esse elemento serve para indicar texto novo em documentação atualizada ou mudanças de versão.
<u> Aplica sublinhado no texto.

Esse elemento serve para estilizar links ou enfatizar frases-chave em mensagens.
<small> Aplica formatação de texto secundária (menor).

Esse elemento serve para mostrar textos explicativos, como descrições de campos de entrada ou carimbos de data/hora.
<strong> Formata o texto em negrito.

Esse elemento serve para enfatizar uma mensagem central ou instrução importante.
<em> Formata o texto em itálico.

Esse elemento serve para destacar palavras importantes ou esclarecimentos em descrições.
<abbr> Exibe uma dica ao passar o mouse.

Esse elemento serve para explicar abreviações, especialmente em formulários ou especificações de API.

Use a classe CSS .initialism para siglas
<blockquote> Formata o texto como uma citação.

Esse elemento serve para inserir comentários de usuários ou referências a análises externas.

Use a classe CSS .blockquote-reverse para citações alinhadas à direita.

Código

Use as tags de formatação de código para exibir seu texto como código de programação. As seguintes opções estão disponíveis:

<code> Envolve trechos de código em linha.
<kbd> Indica uma entrada normalmente digitada pelo teclado.
<pre> Envolve várias linhas de código.

Adicione todos os caracteres especiais usando Unicode para garantir a renderização correta.

Use a classe .pre-scrollable para adicionar uma barra de rolagem no eixo y e definir a altura máxima da área de rolagem em 350px.
<var> Indica variáveis.
<samp> Indica blocos de saída de exemplo.

Listas

Use as tags ou classes de lista para agrupar um conjunto de itens relacionados. As seguintes listas estão disponíveis no kit de interface do usuário do diretório de aplicativos:

<ul> Cria uma lista não ordenada.
<ol> Cria uma lista ordenada.
<dl> Cria uma lista de descrições com itens e suas descrições exibidas abaixo com margem à esquerda.

Termos longos em listas horizontais são automaticamente truncados e empilhados em visualizações menores.

Você também pode estilizar listas não ordenadas usando as seguintes classes CSS:

.list-unstyled Remove o estilo padrão e a margem esquerda dos itens de lista (somente dos elementos diretamente contidos na lista). É necessário adicionar a classe também a listas aninhadas.

Essa classe serve para menus laterais em que se deseja uma lista de links sem marcadores, para um design mais compacto.
.list-inline Coloca todos os itens de lista em uma única linha com leve espaçamento.

Essa classe serve para exibir abas de navegação ou opções de login em uma linha horizontal.

Títulos

Use as tags HTML padrão de título para destacar textos ou seções individuais. Você também pode usar classes CSS (.h1 a .h6) para aplicar estilos de título a textos em linha sem formatá-los como um título. Os seguintes títulos estão disponíveis:

h1 .h1 Negrito 40px
h2 .h2 Negrito 24px
h3 .h3 Regular 20px
h4 .h4 Regular 18px
h5 .h5 Regular 16px
h6 .h6 Regular 14px

Para incluir um texto secundário dentro de um título, use a tag <small> ou a classe .small.

Alinhamento e transformação do texto

Controle o alinhamento do texto usando as seguintes classes utilitárias:

.text-left Alinha o texto à esquerda.
.text-center Centraliza o texto.
.text-right Alinha o texto à direita.
.text-justify Justifica o texto.
.text-nowrap Impede a quebra automática de linha.

Transforme a maiusculização do texto usando estas classes:

.text-uppercase Deixa o texto em maiúsculas.
.text-lowercase Deixa o texto em minúsculas.
.text-capitalize Maiusculiza o texto (primeira letra de cada palavra em maiúscula).

Configure a tabela

Use as classes de tabela do kit para garantir consistência e responsividade na página do seu app. As seguintes classes de tabela estão disponíveis:

.table Aplica a estilização básica, incluindo espaçamento leve e divisores horizontais em todos os elementos <table>.
.blue-table Aplica o estilo de tabela padrão da SendPulse, sem bordas no cabeçalho e com fundos alternados nas linhas.
.table-striped Adiciona listras às linhas do <tbody> para melhorar a legibilidade (requer suporte ao seletor :nth-child).
.table-bordered Adiciona bordas em todas as células da tabela e ao redor da tabela.
.table-hover Ativa o estado de hover nas linhas do <tbody> para destacar a linha sob o cursor.

Esse elemento serve para melhorar a interação do usuário, por exemplo, ao selecionar um registro em uma lista de contatos.
.table-condensed Reduz pela metade o espaçamento das células para um layout de tabela mais compacto.
.table-responsive Envolve uma .table para permitir rolagem horizontal em telas mais estreitas que 768 px (não tem efeito em telas maiores).

Esse elemento serve para oferecer uma forma fácil e responsiva de visualizar tabelas em dispositivos móveis, como ao ver estatísticas de campanhas de e-mail.

Use classes contextuais para formatar elementos específicos, como linhas ou células individuais da tabela. As seguintes classes estão disponíveis:

.active Aplica uma cor de hover a uma linha ou célula inteira.
.success Indica uma ação bem-sucedida ou positiva.
.info Indica um contexto neutro e informativo.
.warning Indica um aviso que pode exigir atenção.
.danger Indica uma ação perigosa ou potencialmente negativa.

Configure o formulário

Adicione vários formulários para aceitar diferentes tipos de entrada do usuário. Cada elemento tem seu próprio conjunto de tipos e controles compatíveis. Os seguintes elementos de formulário estão disponíveis:

<form> O elemento principal para entradas de formulário. Pode ser estilizado como block, inline ou horizontal.
<input> Um elemento para diferentes tipos de entrada, como texto ou seleção.

Adicione o atributo disabled ou agrupe vários controles em <fieldset disabled> para desativar o campo ou exibir uma mensagem de hover “não permitido”.
<textarea> Um elemento para entradas de texto multilinha. Controle a altura da área de texto com o atributo rows.
<select> Um elemento para listas suspensas. Para listas com seleção múltipla, use o atributo multiple.

Adicione o atributo disabled ou agrupe vários controles em <fieldset disabled> para desativar o campo ou exibir uma mensagem de hover “não permitido”.

Você pode estilizar e controlar todos os elementos e tipos de formulário usando classes.

Controles básicos de formulário

Aplique controles de formulário aos tipos padrão de texto (text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color)1 para substituir suas configurações inline ou adicionar opções específicas de estilização usando as seguintes classes:

.form-control Estilização básica (largura 100%, preenchimento, bordas e tamanho da fonte) para <input>, <textarea> e <select>.
.form-control-date Substitui os estilos específicos para <input type="date">, garantindo layout e espaçamento consistentes.
.form-control-time Substitui os estilos específicos para <input type="time">, garantindo layout e espaçamento consistentes.
.form-control-static Estiliza um bloco de texto não editável para alinhá-lo aos outros controles de formulário.

Esse elemento serve para mostrar um valor predefinido aos usuários no mesmo estilo visual dos demais campos, com a edição desativada.
.help-block Exibe um texto auxiliar contextual em bloco, abaixo de um controle de formulário (associado via aria-describedby).

Esse elemento serve para explicar formatos ou restrições de entrada, como o comprimento mínimo de senha, sem sobrecarregar a interface.

Se precisar de entrada de texto multilinha, use <textarea> com .form-control. Para listas suspensas (<select>), aplique apenas .form-control. Os navegadores podem impor arredondamentos próprios aos elementos select nativos.

Grupos de entrada

Aplique um estilo uniforme em vários formulários usando grupos de entrada e seus complementos em um bloco para adicionar elementos unificados antes ou depois do campo. Você pode agrupar elementos de entrada com as seguintes classes:

.input-group Agrupa um <input>com seus complementos (texto ou botões) em uma única unidade inline.

Esse elemento serve para inserir um prefixo ou sufixo (por exemplo, um símbolo de moeda ou um botão) diretamente ao lado do campo para uma interface mais intuitiva.
.input-group-addon Estiliza o elemento (texto ou botão) anexado imediatamente antes ou depois do <input>.

Esse elemento serve para mostrar unidades (por exemplo, $ ou .00) ou botões de ação dentro de um único campo.

Caixas de seleção e botões de opção

Inclua caixas de seleção para permitir que os usuários escolham uma ou várias opções de uma lista ou adicione botões de opção para selecionar uma única entre várias opções. Use as seguintes classes para envolver e controlar o estilo de checkboxes e radios:

.checkbox Envolve um <input type="checkbox"> empilhado e seu <label>.
.radio Envolve um <input type="radio"> empilhado e seu <label>.
.checkbox-inline Exibe uma caixa de seleção e seu <label> na mesma linha (inline).
.radio-inline Exibe um botão de opção e seu <label> na mesma linha (inline).
.disabled (wrapper) Aplicada a .checkbox, .checkbox-inline, .radio ou .radio-inline para mostrar um cursor desativado e uma aparência mais apagada.

Mesmo que não haja texto visível no rótulo, envolva o input em .checkbox ou .radio e inclua um aria-label no <input> para que os leitores de tela o anunciem corretamente.

Wrappers de validação e feedback

Envolva os controles de formulário, seus rótulos e textos auxiliares em classes de validação e feedback para refletir estados de sucesso, aviso ou erro. Para adicionar um ícone de feedback, combine uma classe de validação com .has-feedback e inclua o elemento .form-control-feedback dentro.

.has-success Aplica o estilo de sucesso (verde) ao bloco e a todos os elementos dentro dele (rótulos, inputs e texto auxiliar).
.has-warning Aplica o estilo de aviso (amarelo) ao bloco e a todos os elementos dentro dele.
.has-error Aplica o estilo de erro (vermelho) ao bloco e a todos os elementos dentro dele.
.has-feedback Posiciona absolutamente um ícone de feedback dentro de um .form-control quando combinado com uma classe de validação.
.form-control-feedback Posiciona o ícone de forma absoluta dentro de um bloco .has-feedback.
.sp-icon icon-check Renderiza um ícone de marca de verificação (sucesso).
.sp-icon icon-warning Renderiza um ícone de aviso.
.sp-icon icon-closed Renderiza um ícone de erro/fechado (erro).

Recomendamos fortemente incluir um em <span class="sr-only"></span> oculto (por exemplo, “(sucesso)”) associado via aria-describedby para que leitores de tela anunciem corretamente o estado de validação.

Tamanho e layout

Ajuste a altura dos controles, os tamanhos gerais dos grupos de formulário (em formulários horizontais) e as larguras dos campos usando as colunas do grid.

.input-lg Renderiza um controle maior e mais alto, combinando com a altura do .btn-lg.

Esse elemento serve para criar campos de destaque, por exemplo, em um formulário de busca com fonte maior para melhor leitura.
.input-sm Renderiza um controle menor e mais baixo, combinando com a altura do .btn-sm.

Esse elemento serve para painéis compactos de filtros ou configurações com espaço limitado..
.form-group-lg Em um layout .form-horizontal, aumenta rótulo e campo para um tamanho “grande”.

Esse elemento serve para destacar campos principais, como a entrada da chave de API.
.form-group-sm Em um layout .form-horizontal, reduz rótulo e campo para um tamanho “pequeno”.
.col-xs-2 Envolvem um campo e forçam sua largura para ocupar 2, 3 ou 4 colunas no breakpoint xs.

Esses elementos servem para ajustar a largura dos campos em uma única linha em dispositivos móveis..
.col-xs-3 Envolva um campo nessa coluna do grid para forçá-lo a ocupar 3 colunas no breakpoint xs.
.col-xs-4 Envolva um campo nessa coluna do grid para forçá-lo a ocupar 4 colunas no breakpoint xs.

Configure os botões

Adicione e configure botões na página do seu app usando as classes em <a>, <button> e <input>. Use as seguintes classes para definir o contexto visual, tamanho e estado do botão:

.btn Classe base para todos os botões: aplica preenchimento, borda, tamanho da fonte e cursor.
.btn-default Estilo neutro (“secundário”) com fundo claro e texto escuro.
.btn-primary Estilo de ação principal com fundo azul intenso e texto branco.
.btn-success Indica uma ação bem-sucedida ou positiva com fundo verde.
.btn-info Estilo informativo com fundo azul claro.
.btn-warning Indica cautela com fundo laranja.
.btn-danger Indica uma ação perigosa com fundo vermelho.
.btn-link Estiliza um link para parecer um botão (sem fundo, apenas texto sublinhado).
.btn-lg Ajustam o tamanho do botão (grande, pequeno e extra pequeno) de .btn btn-sm.
.btn-sm Ajustam o tamanho do botão (grande, pequeno e extra pequeno) de .btn btn-sm.
.btn-xs Botão extra pequeno que usa o menor tamanho padrão.
.btn-block Faz o botão ocupar toda a largura disponível do bloco em que está.
.active Força a aparência de pressionado (fundo mais escuro e sombra interna).
.disabled Deixa o botão visualmente apagado e desativa os eventos do ponteiro (para <a> e <button>).

Use disabled="disabled" em <button>.

Você pode aplicar as classes de botão aos elementos <a> e <button>. No entanto, apenas os elementos <button> são compatíveis com os componentes nav e navbar do diretório de aplicativos.

O Internet Explorer 9 e versões anteriores aplicam uma sombra indesejada ao texto de <button> desativados. Não há uma solução em CSS para esse problema.

Configure as configurações do elemento Imagem

Adicione e configure imagens na página do seu app usando classes e ajustes. É possível tornar as imagens responsivas e alterar seu formato conforme necessário.

Escale as imagens junto ao bloco em que estão e centralize-as usando as seguintes classes:

.img-responsive Aplica max-width: 100%; height: auto; display: block; para que a imagem escale de forma fluida.
.center-block Centraliza um elemento em nível de bloco horizontalmente (por exemplo, uma imagem responsiva).

Imagens SVG com .img-responsive podem ter dimensionamento incorreto no IE8–10. Para corrigir, adicione width: 100% \9; em uma substituição personalizada. Por padrão, o Bootstrap não inclui isso.

Aplique cantos arredondados ou outros estilos usando as seguintes classes:

.img-rounded Adiciona cantos levemente arredondados à imagem.
.img-circle Deixa a imagem em forma de círculo perfeito (exige uma imagem quadrada).
.img-thumbnail Aplica uma borda clara, padding e cantos arredondados para um visual de miniatura.

O Internet Explorer 8 não oferece suporte ao arredondamento via CSS. As imagens podem aparecer com cantos quadrados apenas.

Classes auxiliares

Use classes auxiliares para mais opções de formatação de elementos. Por exemplo, você pode controlar a cor do texto e a visibilidade, adicionar um ícone de fechar ou formatar um formulário como caret.

Cores contextuais do texto

Use classes de cor de texto para transmitir significado ou dar ênfase por meio das cores. Sempre garanta que qualquer significado semântico associado à cor também seja comunicado por texto visível ou por texto oculto para leitores de tela (por exemplo, com .sr-only).

.text-muted Aplica uma cor mais clara para diminuir a importância de um texto (por exemplo, “última atualização”).
.text-primary Usa a cor principal da marca. Geralmente usada para links importantes ou chamadas para ação.
.text-success Aplica um tom de verde; geralmente para indicar sucesso (por exemplo, “Configurações salvas”).
.text-info Aplica um tom azul claro; frequentemente para mensagens informativas ou dicas.
.text-warning Aplica um tom laranja; usado para chamar atenção para avisos (por exemplo, “Senha expirando em breve”).
.text-danger Aplica um tom vermelho; usado para destacar erros ou ações críticas (por exemplo, “Excluir conta”).

Em alguns casos, as classes de ênfase não podem ser aplicadas devido à especificidade de outro seletor. Na maioria dos casos, basta envolver o texto em um <span> com a classe desejada como solução.

Cores de fundo contextuais

As classes de fundo de texto definem uma cor sólida de fundo em qualquer elemento em nível de bloco. Assim como nas cores do texto, evite depender apenas do fundo para transmitir significado. Se necessário, inclua também texto acessível ou rótulos ocultos.

.bg-primary Aplica a cor principal da marca como fundo; útil para cabeçalhos ou banners.
.bg-success Aplica um fundo verde para indicar sucesso (por exemplo, “Operação concluída”).
.bg-info Aplica um fundo azul claro para seções informativas ou chamadas.
.bg-warning Aplica um fundo laranja para chamar a atenção para conteúdos de aviso.
.bg-danger Aplica um fundo vermelho para contextos críticos ou perigosos (por exemplo, alertas de erro).

Em alguns casos, as classes de fundo contextuais não podem ser aplicadas devido à especificidade de outro seletor. Uma solução suficiente é envolver o conteúdo do elemento em um <div> com a classe desejada.

Visibilidade e exibição

Controle se um elemento é exibido ou ocultado, inclusive para tecnologias assistivas, com estas classes utilitárias. Elas usam !important para sobrescrever a maioria das outras regras de exibição.

.show Força a exibição do elemento como block (bloco), substituindo outras configurações de display (exibição) (por exemplo, .hidden).

Esse elemento serve para exibir uma seção oculta da documentação apenas em condições específicas, como a expansão de configurações avançadas de integração.
.hidden Remove o elemento do layout (display: none), ocultando-o também para tecnologias assistivas.

Esse elemento serve para remover temporariamente determinados formulários ou mensagens da interface, por exemplo, para ocultar uma opção de configuração personalizada de autenticação até que esteja disponível.
.invisible Oculta o elemento (visibility: hidden) mas mantém seu espaço no fluxo do documento.

Esse elemento serve para manter o alinhamento do layout ao ocultar temporariamente um elemento gráfico, por exemplo, um ícone de status, para garantir que a estrutura da documentação continue intacta.

Use .hidden quando for necessário remover completamente um elemento (por exemplo, para ocultar um modal). Use .invisible quando for necessário tornar o elemento invisível mantendo o espaço reservado no layout (por exemplo, como um espaço para conteúdo futuro).

Classes adicionais

Adicione elementos comuns da interface, como ícones de fechar e carets. Elas são projetadas para cenários específicos (como dispensar alertas ou marcar menus suspensos) e devem ser usadas apenas em seus contextos previstos.

.close Estiliza um botão (geralmente <button> ou <a>) com padding mínimo e um grande glifo “×”. Usado para dispensar alertas, modais ou outros componentes que podem ser fechados.

Sempre inclua um atributo relevante como aria-label="Close" nos elementos com .close.
.caret Renderiza uma pequena seta apontando para baixo, comumente usada dentro de botões de menus suspensos. Em menus ascendentes (drop-up), ela vira automaticamente para cima.

Esse elemento serve para indicar visualmente aos desenvolvedores a presença de configurações adicionais de integração (por exemplo, seleção de um canal de comunicação) sem gráficos personalizados.

Notas

  1. (texto, senha, data/hora, data/hora local, data, mês, hora, semana, número, e-mail, url, pesquisa, tel e cor) ↩

Última Atualização: 10.07.2025

Rate this article about "Kit de interface do usuário (UI Kit) do diretório de aplicativos"

User Rating: 4 / 5 (6)

Popular em nosso blog

Teste o SendPulse hoje gratuitamente