Botões

Os botões são os componentes mais comuns em nossas plataformas, aparecendo em quase todas as páginas do portal. Embora sejam relativamente simples, não podemos deixar de lado a quantidade de reações que temos que analisar para identificarmos a melhor de aplicarmos.

Na prática :)

Tonalidades_

Para uma ação que leva a uma conversão.

Para uma ação que não leva a uma conversão.

Para direcionamentos internos.

Forma de utilização

Principal aplicação no portal da Bradesco Seguros, em telas de chamadas, como banners e de direcionamentos internos.

Download do mockup

Vermelho_

#cc092f

R: 230

G: 9

B: 53

#e60935

R: 204

G: 9

B: 47

#e60935

R: 153

G: 0

B: 15

As variações do vermelho seguem conforme a reação e interação do usuário no portal, para tal ação, como compre, conheça, etc.

Padrão de construção_

Altura: 36px

Tamanho fonte: 16px

Raio Borda: 2px

Aplicação_

O botão vermelho é usado como botão principal para uma call to action. É usado em banners principais e em banners de produtos internos.

<input class="bradseg-btn red" type="button" value="Botão">

Copiar < / >

Azul_

#0b67be

R: 11

G: 103

B: 190

#0e81ed

R: 14

G: 129

B: 237

#2365a7

R: 35

G: 101

B: 167

As variações do azul seguem conforme a ação e conversão do usuário no portal, como assista, saiba mais, etc.

Padrão de construção_

Altura: 36px

Tamanho fonte: 16px

Raio Borda: 2px

Aplicação_

O botão azul é usado como botão principal de paginas internas, para detalhar sobre tal tema ou produto em questão.

<input class="bradseg-btn blue" type="button" value="Botão">

Copiar < / >

Cinza_

#fafaf6

R: 244

G: 244

B: 246

#ffffff

R: 255

G: 255

B: 255

#ffffff

R: 255

G: 255

B: 255

As variações do cinza seguem conforme a ação e conversão do usuário no portal, como voltar, home, etc.

Padrão de construção_

Altura: 36px

Tamanho fonte: 16px

Raio Borda: 2px

Aplicação_

O botão cinza é usado como botão principal de páginas internas, para voltar de uma determinada página ou ir para a home.

<input class="bradseg-btn cinza" type="button" value="Botão">

Copiar < / >

Default

Campo Habilitado

Para ações que levam à conversão de algo realizado, concluído. Por exemplo: compre, conheça, etc.

<!-- Botão abrir modal -->
<input class="bradseg-btn blue" type="button" value="Abrir Modal" data-toggle="modal" data-target="#idModal">

<!-- Modal -->
<div id="idModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-vertical-helper">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h5 class="modal-title" id="myModalLabel">Título Opcional</h5>
      </div>
      <div class="modal-body">
        <span class="font100px font-blue icon-alerta-sucesso"></span>
        <h5 class="font-blue">Sucesso!</h5>
        <p class="font16px">Mensagem opcional.</p>
      </div>
      <div class="modal-footer">
        <input class="bradseg-btn small" type="button" value="Cancelar" data-dismiss="modal">
        <input class="bradseg-btn blue small" type="button" value="Ok" data-dismiss="modal">
      </div>
    </div>
  </div>
</div>
</div>

Copiar < / >

Default

Passe o mouse

Campo Habilitado

<a href="javascript:;" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Conteúdo Tooltip!">Passe o mouse</a>

Copiar < / >

Painéis e Cards :)

Grande parte do portal é dividido por seções para melhor divulgação das informações, ou seja, os painéis e cards podem mostrar melhor as informações, de um modo simples, clean, com facilidade para melhor compreendimento.

Painel de descrição_

Título Título

Informação: Informação

Mais Informação: Informação

Informação:
000.000.000-00

O Painel de descrição é usado para utilização de exemplos como: detalhes de algum produto ou contratação.

<div class="bradseg-panel">
<h2>
  <small>Titulo</small>
  Título
</h2>
<hr class="red">
<p>Informação:
  <span>Informação</span>
</p>
<p>Mais Informação:
  <span>Informação</span>
</p>
<br>
<br>
<p>Informação:
  <br>
  <span>000.000.000-00</span>
</p>
</div>

Copiar < / >

Painel de acesso rápido_

Título

Link 1 Link 2 Link 3

O Painel de acesso rápido serve para utilização geral de exemplos, como: lista de links.

<div class="bradseg-panel">
<h2>Título</h2>
<hr class="red">
<a href="javascript:;">
  <span class="icon-seta-direita-b"></span> Link 1</a>
<a href="javascript:;">
  <span class="icon-seta-direita-b"></span> Link 2</a>
<a href="javascript:;">
  <span class="icon-seta-direita-b"></span> Link 3</a>
</div>

Copiar < / >

Painel de informação_

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Painel de informação serve para utilização de exemplos de textos informativos ou alertas.

<div class="bradseg-panel">
  <h2>
    <small>Titulo</small>
  </h2>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua.</span>
  </p>
</div>

Copiar < / >

Card de Produto_

Título

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card de Produtoé usado propriamente para apresentar os produtos e categorias.

<div class="bradseg-panel">
  <h2>
    <small>Titulo</small>
  </h2>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
      et dolore magna aliqua.</span>
  </p>
</div>

Copiar < / >

Card de Contato / Serviço_

Título

Lorem ipsum dolor sit amet, consectetur link.

Telefone: 0800-000-0000

Fax: 0800-000-0000

Card de Contato / Serviço é usado para apresentar vantagens, serviços, atendimento, etc.

<div class="bradseg-card">
  <div class="card-icon">
    <span class="icon-atend-fixo"></span>
  </div>
  <div class="card-content">
    <h2>Título</h2>
    <p>Lorem ipsum dolor sit amet, consectetur
      <a href="javascript:;">link</a>.</p>
    <hr>
    <p>Telefone:
      <b>0800-000-0000</b>
    </p>
    <p>Fax:
      <b>0800-000-0000</b>
    </p>
  </div>
</div>

Copiar < / >

Tabelas e Listas :)

Na navegação do portal Bradesco Seguros, elas são utilizadas para melhor visualização do conteúdo, divisão de informações e imagens e campos de seleção e links.

Tabela com colunas_

Título A	Título B	Links
Conteúdo 1	Lorem ipsum dolor sit amet.	Clique e acesse
Conteúdo 2	Lorem ipsum dolor sit amet.	Clique e acesse
Conteúdo 3	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	Clique e acesse
Conteúdo 4	Lorem ipsum dolor sit amet.	Clique e acesse

<table class="bradseg-table" width="100%">
  <thead class="hidden-xs">
    <tr>
      <th class="col-md-1 text-center">Selecione</th>
      <th class="col-md-2">Título A</th>
      <th class="col-md-7">Título B</th>
      <th class="col-md-2">Links</th>
    </tr>
  </thead>
  <tbody height="150px">
    <tr>
      <td class="col-md-1 col-sm-1 col-xs-12 text-center">
        <div class="bradseg-chk">
          <input id="chk1" type="checkbox">
          <label for="chk1">
            <span class="checkBox">
              <span class="icon-chk"></span>
            </span>
          </label>
        </div>
      </td>
      <td class="col-md-2 col-sm-2 col-xs-12">Conteúdo 1</td>
      <td class="col-md-7 col-sm-7 col-xs-12">Lorem ipsum dolor sit amet.</td>
      <td class="col-md-2 col-sm-2 col-xs-12">
        <a class="table-default-link">Clique e acesse</a>
      </td>
    </tr>
    <tr>
      <td class="col-md-1 col-sm-1 col-xs-12 text-center">
        <div class="bradseg-chk">
          <input id="chk2" type="checkbox">
          <label for="chk2">
            <span class="checkBox">
              <span class="icon-chk"></span>
            </span>
          </label>
        </div>
      </td>
      <td class="col-md-2 col-sm-2 col-xs-12">Conteúdo 2</td>
      <td class="col-md-7 col-sm-7 col-xs-12">Lorem ipsum dolor sit amet.</td>
      <td class="col-md-2 col-sm-2 col-xs-12">
        <a class="table-default-link">Clique e acesse</a>
      </td>
    </tr>
    <tr>
      <td class="col-md-1 col-sm-1 col-xs-12 text-center">
        <div class="bradseg-chk">
          <input id="chk3" type="checkbox">
          <label for="chk3">
            <span class="checkBox">
              <span class="icon-chk"></span>
            </span>
          </label>
        </div>
      </td>
      <td class="col-md-2 col-sm-2 col-xs-12">Conteúdo 3</td>
      <td class="col-md-7 col-sm-7 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
        et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.</td>
      <td class="col-md-2 col-sm-2 col-xs-12">
        <a class="table-default-link">Clique e acesse</a>
      </td>
    </tr>
    <tr>
      <td class="col-md-1 col-sm-1 col-xs-12 text-center">
        <div class="bradseg-chk">
          <input id="chk4" type="checkbox">
          <label for="chk4">
            <span class="checkBox">
              <span class="icon-chk"></span>
            </span>
          </label>
        </div>
      </td>
      <td class="col-md-2 col-sm-2 col-xs-12">Conteúdo 4</td>
      <td class="col-md-7 col-sm-7 col-xs-12">Lorem ipsum dolor sit amet.</td>
      <td class="col-md-2 col-sm-2 col-xs-12">
        <a class="table-default-link">Clique e acesse</a>
      </td>
    </tr>
  </tbody>
</table>

Copiar < / >

Lista Selecionável_

Primeira opção
Segunda opção
Terceira opção
Quarta opção
Quinta opção

Lista selecionável é sempre utilizada para refinar buscas internas no portal Bradesco Seguros.

<ul class="bradseg-select-list">
  <li>Primeira opção</li>
  <li>Segunda opção</li>
  <li>Terceira opção</li>
  <li>Quarta opção</li>
  <li>Quinta opção</li>
</ul>

Copiar < / >

Botões

Na prática :)

Tonalidades_

Forma de utilização

Vermelho_

Padrão de construção_

Aplicação_

Azul_

Padrão de construção_

Aplicação_

Cinza_

Padrão de construção_

Aplicação_

Modal_

Tooltip_

Painéis e Cards :)

Painel de descrição_

Título Título

Painel de acesso rápido_

Título

Painel de informação_

Título

Card de Produto_

Título

Card de Contato / Serviço_

Título

Tabelas e Listas :)

Tabela com colunas_

Lista Selecionável_