Locaweb Style

Documentação

Saiba todas as features que te ajudarão a produzir sistemas mais rapidamente.

Box Informativo

Elemento que pode ser utilizado no dashboard de um painel para exibir informações resumidas, principalmente dados numéricos.

Quando usar?

- Há necessidade de exibir dados numéricos (valores, quantidades, etc.) sobre um o serviço contratado.

Quando não usar?

- A informação tenha foco em ajuda ou dica.

- A informação seja um identificador, endereço ou nome de servidor.


Desktop

Consumo de envios

Quantidade válida até 22/07/2014

CONTRATADO
100.000 envios por mês
Mudar de plano
DADOS
Aqui você verifica seus dados
Ver mais
TEXTO
DATA
26 dia
10 mês

Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<div class="ls-box ls-board-box">
  <header class="ls-info-header">
    <h2 class="ls-title-3">Consumo de envios</h2>
    <p class="ls-float-right ls-float-none-xs ls-small-info">Quantidade válida até <strong>22/07/2014</strong></p>
  </header>
  <div id="sending-stats" class="row">
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4">CONTRATADO</h6>
        </div>
        <div class="ls-box-body">
          <strong>100.000</strong>
          <small>envios por mês</small>
        </div>
        <div class="ls-box-footer">
          <a href="#" aria-label="Mudar o Plano de Revenda" class="ls-btn ls-btn-sm" title="Mudar o Plano de Revenda">Mudar de plano</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4">DADOS</h6>
        </div>
        <div class="ls-box-body">
          <strong class="ls-ico-bars"></strong>
          <small>Aqui você verifica seus dados</small>
        </div>
        <div class="ls-box-footer">
          <a href="#" aria-label="Comprar mais envios" class="ls-btn ls-btn-sm" title="Ver mais">Ver mais</a>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="ls-box ls-box-centered">
        <strong>TEXTO</strong>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4">DATA</h6>
        </div>
        <div class="ls-box-body">
          <div class="col-xs-6">
            <strong>26</strong>
            <small>dia</small>
          </div>
          <div class="col-xs-6">
            <strong>10</strong>
            <small>mês</small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Casa você deseje exibir o box sem dados, basta inserir no conteúdo, um parágrafo a classe .ls-no-data:

Desktop

Consumo de envios

Quantidade válida até 22/07/2014

Ainda não existem dados suficientes para esta visualização.

Mobile

1
2
3
4
5
6
7
8
9

<div class="ls-box ls-board-box">
  <header class="ls-info-header">
    <h2 class="ls-title-3">Consumo de envios</h2>
    <p class="ls-float-right ls-float-none-xs ls-small-info">
      Quantidade válida até <strong>22/07/2014</strong>
    </p>
  </header>
  <p class="ls-no-data">Ainda não existem dados suficientes para esta visualização.</p>
</div>

Opções e variações da estrutura

Label
Os títulos podem variar de acordo com o contexto, por exemplo: Informações do plano, Quantidade de sites, etc.

Escala
Os números exibidos podem ser simples com até 6 dígitos (100.000) ou informativos, como 10 milhões, 100 GB, 1.000 sites, etc.

Status
Pode ficar oculto ou ser exibido no canto direito.

Ação principal
No lugar do status, é possível exibir um botão de ação.

Desktop

Nome do produto

Gerenciar limites
Label
0
Label
10
Label
0
Label
10

Mobile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<div class="ls-box ls-board-box">
  <header class="ls-info-header">
    <h2 class="ls-title-3">Nome do produto</h2>
    <a href="" class="ls-btn">Gerenciar limites</a>
  </header>
  <div id="sending-stats" class="row">
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4">Label</h6>
        </div>
        <div class="ls-box-body">
          <strong>0</strong>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4">Label</h6>
        </div>
        <div class="ls-box-body">
          <strong>10</strong>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4">Label</h6>
        </div>
        <div class="ls-box-body">
          <strong>0</strong>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="ls-box">
        <div class="ls-box-head">
          <h6 class="ls-title-4 color-default">Label</h6>
        </div>
        <div class="ls-box-body">
          <strong>10</strong>
        </div>
      </div>
    </div>
  </div>
</div>

Aumentando a complexidade da estrutura

Você também pode aumentar um pouco a complexidade do seu box informativo utilizando a nossa grid internamente e o atributo data-prefix, tanto no elemento da grid como no strong, para chegar em exemplos como o de baixo.

Desktop

Dados de envio

Data de colheta dos dados: 26/08/2015

Limite de denúncias aceitável
0,60 ideal
0,90 você

Tempo de envio

Data de colheta dos dados: 26/08/2015

Tempo
10 dias
10 horas
Teste

Mobile