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

Tags

Uma tag rotula objetos da IU para rápido reconhecimento e navegação.

Text
Text
Text
Text
Text
Text
Text
Text
Text
Text
Text

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.

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.

Error message

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.

Error message

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.

Error message

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.

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.

  • 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.

Header

O header exibe informações e acesso a telas mais profundas.