Conceito
Os componentes são os blocos de construção reutilizáveis de nosso Design System. Cada componente atende a uma interação específica ou necessidade de IU e foi criado especificamente para trabalhar em conjunto para criar padrões e experiências de usuário intuitivas.
Botões
Um botão aciona um evento ou ação. Eles permitem que os usuários saibam o que acontecerá a seguir depois de acionar o botão.
Botões grandes
Pode ser utilizado como call to action (CTAs) para Heros em destaque em uma tela.
Botões médios
Pode ser utilizado como botões de ação principal em uma tela.
Botões pequenos
Pode ser utilizado como botões de ação secundária, normalmente quando o botão medium já é utilizado em uma tela.
Alertas
Alertas são mensagens em destaque exibidas na parte superior da tela.
- Alertas em verde devem ser utilizados para mensagens de sucesso.
- Alertas em vermelho devem ser utilizado para mensagens de erros.
- Alertas em amarelo devem ser utilizados para mensagens de cautela.
- Alertas em verde claro devem ser utilizados para mensagens padrões.
Text alert lore ipsum dolor sit Amed
Text alert lore ipsum dolor sit Amed
Text alert lore ipsum dolor sit Amed
Text alert lore ipsum dolor sit Amed
Chips
Chips são elementos compactos que representam uma entrada, atributo ou ação.
José Oliveira
José Oliveira
José Oliveira
José Oliveira
José Oliveira
Switches
As opções ativam ou desativam o estado de um único item.
Tabs horizontais
As guias organizam o conteúdo em diferentes telas, conjuntos de dados e outras interações.
Tab 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tempora pariatur eveniet, provident dolor omnis numquam quae deserunt, doloribus dicta quisquam voluptatem quasi labore ullam vel porro earum nulla veniam?
Tab 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quo qui ratione tempora recusandae, consequuntur aliquam id ipsum magni quidem deleniti dignissimos iusto doloremque, officiis, molestiae in numquam quis? Quos.
Tabs verticais
As guias organizam o conteúdo em diferentes conjuntos de dados.
Text 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tempora pariatur eveniet, provident dolor omnis numquam quae deserunt, doloribus dicta quisquam voluptatem quasi labore ullam vel porro earum nulla veniam?
Text 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quo qui ratione tempora recusandae, consequuntur aliquam id ipsum magni quidem deleniti dignissimos iusto doloremque, officiis, molestiae in numquam quis? Quos.
Text 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tempora pariatur eveniet, provident dolor omnis numquam quae deserunt, doloribus dicta quisquam voluptatem quasi labore ullam vel porro earum nulla veniam?
Text 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio quo qui ratione tempora recusandae, consequuntur aliquam id ipsum magni quidem deleniti dignissimos iusto doloremque, officiis, molestiae in numquam quis? Quos.
Paginação
A paginação permite dividir grandes quantidades de conteúdo em pedaços menores em várias páginas.
Radio
Os botões radio permitem que os usuários selecionem uma opção de um conjunto.
Checkbox
Os checkbox permitem que os usuários selecionem mais de uma opção de um conjunto.
Input de texto
Os campos de texto permitem que os usuários insiram texto em uma UI. Eles geralmente aparecem em formulários e caixas de diálogo.
Input de texto grande
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Input de texto médio
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Input de texto pequeno
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Input de texto sem label
Input de texto sem label deve ser utilizado em casos de cadastros rápidos que não necessitam de um formulário extenso como por exemplo newsletters ou campos com espaço reduzido.
Input de texto sem label grande
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Input de texto sem label médio
Input de texto sem label deve ser utilizado em casos de cadastros rápidos que não necessitam de um formulário extenso como por exemplo newsletters ou campos com espaço reduzido.
Input de texto sem label pequeno
Input de texto sem label deve ser utilizado em casos de cadastros rápidos que não necessitam de um formulário extenso como por exemplo newsletters ou campos com espaço reduzido.
Select
Selecionar permite que os usuários façam uma única seleção ou várias seleções em uma lista de opções.
Select grande
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Select médio
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Select médio
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Select sem label
Input de texto sem label deve ser utilizado em casos de cadastros rápidos que não necessitam de um formulário extenso como por exemplo newsletters ou campos com espaço reduzido.
Select sem label grande
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Select sem label médio
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Select sem label pequeno
Eget ac mattis a fames arcu sapien facilisis quam. Velit cursus volutpat euismod nisl, quisque nulla risus. Odio dignissim tincidunt senectus pellentesque venenatis commodo massa consequat, vitae.
Campo de busca
É por este campo que o usuário irá adicionar seus principais interesses e desejos ao navegar na plataforma.
Selecionador de datas
Os selecionadores de data permitem que os usuários selecionem um intervalo de datas.
Lista
As listas são índices contínuos e verticais de texto.
- Text list item
- Text list item
- Text list item
Área de texto
Uma área de texto permite que os usuários insiram texto de formato longo que se estende por várias linhas.
Área de texto para formulários
Tellus arcu vehicula amet faucibus ac mus egestas. Lobortis in ultricies in eu aliquet feugiat ullamcorper felis.
Comentários
Espaço de mensagens que registra os últimos comentários, inclui nome, data, hora e foto de perfil da pessoa.
-
Mariana Alves 20/02/2020 - 20:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore.
-
Mariana Alves 20/02/2020 - 20:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore.
-
Mariana Alves 20/02/2020 - 20:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore.
Tabela
As tabelas de dados exibem conjuntos de dados em linhas e colunas.
Serviço | Prestador | Conta | Tipo | |
---|---|---|---|---|
Itaú | 9104-5 | 383838-4 | Conta de despesas | |
Bradesco | 98935-0 | 383838-4 | Conta de despesas |
Cards
Os cards contêm conteúdo e ações sobre um único assunto.
Modal
Um modal exibe o conteúdo que requer interação do usuário, em uma camada acima da página. O modal conta com a versão padrão de 600px de largura e o modelo maior com 952px de largura que pode ser utilizado para conteúdos mais extensos.
Modal title
Modal title
Header
O header exibe informações e acesso a telas mais profundas.
Mariana Alves 20/02/2020 - 20:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore.
Mariana Alves 20/02/2020 - 20:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore.
Mariana Alves 20/02/2020 - 20:00
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore.