Locaweb Style

Documentação

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

Listas

Descrição e listagem de informações

Informações de utilização
A lista é utilizada para localizar um dado específico a ser gerenciado. O destino pode ser uma página interna ou outro painel.

Quando usar?

- Há necessidade de acesso a outro painel ou página interna.

- Há necessidade de exibir um resumo das informações sem colunas.

Quando não usar?

- Os dados apresentados sejam comparáveis.

- Há necessidade de ordenação de colunas.

Lista com identificador simples

O identificador deve ter a mesma ação do botão principal.

Desktop

Identificador da conta Fake Product Name
Administrar

Mobile

1
2
3
4
5
6
7
8
9
10
11
12

<div class="ls-list">
  <header class="ls-list-header">
    <div class="ls-list-title col-md-9">
      <a href="#" >Identificador da conta</a>
      <small>Fake Product Name  </small>
    </div>
    <div class="col-md-3 ls-txt-right">
      <a href="#" class="ls-btn-primary">Administrar</a>
    </div>
  </header>
</div>

Lista com informações secundárias e ação principal

O identificador deve ter a mesma ação do botão principal.

Desktop

Identificador da conta Fake Product Name I
Administrar
Status Publicado
Status Publicado
Administrar
Status Publicado
Status Publicado
Identificador da conta

Et nulla repellat aperiam autem molestiae deleniti assumenda iste maiores distinctio dolorum. aliquam molestias enim adipisci fuga ut quidem. minima incidunt quis praesentium alias voluptatem labore assumenda ut. enim et reiciendis sit corrupti et vero sit dolores pariatur ea ex. nihil sed qui illo sint. doloremque voluptatibus consequatur dolor ut unde in eos voluptates assumenda. molestiae dolore perferendis accusantium dolorem laborum quae eius id veniam repellat repellendus harum mollitia voluptatem

  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
Administrar
Status Publicado
Status Publicado

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<div class="ls-list">
  <header class="ls-list-header">
    <div class="ls-list-title col-md-9">
      <a href="#" >Identificador da conta</a>
      <small>Fake Product Name I </small>
    </div>
    <div class="col-md-3 ls-txt-right">
      <a href="<#" class="ls-btn-primary">Administrar</a>
    </div>
  </header>
  <div class="ls-list-content ">
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
  </div>
</div>

<div class="ls-list">
  <header class="ls-list-header">
    <div class="col-md-9">
      <img class="ls-list-image" src="../../../assets/images/locastyle/logo-locaweb.png" />
    </div>
    <div class="col-md-3 ls-txt-right">
      <a href="<#" class="ls-btn-primary">Administrar</a>
    </div>
  </header>
  <div class="ls-list-content ">
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
  </div>
</div>

<div class="ls-list">
  <header class="ls-list-header">
    <div class="col-md-9">
      <div class="ls-list-title ">
        <a href="#" >Identificador da conta</a>
      </div>
      <div class="ls-list-description">
        <p>Optio nihil est eum dolorem sit qui et. sed repellat numquam voluptas sequi sit omnis rerum omnis autem. cumque at sunt id esse est ex autem quas a laborum veritatis et assumenda quas. possimus voluptas molestiae nobis et possimus maxime consequatur quia pariatur ut. ullam earum reiciendis necessitatibus delectus consequatur qui reiciendis. sapiente aut qui assumenda porro. iure voluptatem fugiat quia quia placeat et</p>
        <ul>
            <li>Item 0</li>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
      </div>
    </div>
    <div class="col-md-3 ls-txt-right">
      <a href="<#" class="ls-btn-primary">Administrar</a>
    </div>
  </header>
  <div class="ls-list-content ">
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
  </div>
</div>

Lista com botão múltiplo

O identificador não deve ter link.

Desktop

Identificador da conta Fake Product Name I
Administrar
Status Publicado
Status Publicado
Administrar
Status Publicado
Status Publicado
Identificador da conta

Vel amet distinctio itaque dicta animi libero quae aut dolores sapiente non sed unde. omnis voluptatem consequuntur ab ratione sint consequatur hic quaerat nihil architecto autem. natus doloribus a eius vitae est est omnis mollitia. sunt odio et sit tempora tempora soluta placeat aut facilis aut impedit dignissimos. ducimus amet iure sapiente porro et quibusdam dolor debitis rem ipsam nesciunt occaecati maiores. numquam sed magnam earum velit quaerat quaerat et error atque ut illum est nisi

  • Item 0
  • Item 1
  • Item 2
  • Item 3
  • Item 4
Administrar
Status Publicado
Status Publicado

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<div class="ls-list">
  <header class="ls-list-header">
    <div class="ls-list-title col-md-9">
      <strong>Identificador da conta</strong>
      <small>Fake Product Name I </small>
    </div>
    <div class="col-md-3 ls-txt-right">
      <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
        <a href="#" class="ls-btn-primary">Administrar</a>
        <ul class="ls-dropdown-nav">
            <li><a href="#">Site</a></li>
            <li><a href="#">E-mail</a></li>
        </ul>
      </div>
    </div>
  </header>
  <div class="ls-list-content ">
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
  </div>
</div>

<div class="ls-list">
  <header class="ls-list-header">
    <div class="col-md-9">
      <img class="ls-list-image" src="../../../assets/images/locastyle/logo-locaweb.png" />
    </div>
    <div class="col-md-3 ls-txt-right">
      <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
        <a href="#" class="ls-btn-primary">Administrar</a>
        <ul class="ls-dropdown-nav">
            <li><a href="#">Site</a></li>
            <li><a href="#">E-mail</a></li>
        </ul>
      </div>
    </div>
  </header>
  <div class="ls-list-content ">
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
  </div>
</div>

<div class="ls-list">
  <header class="ls-list-header">
    <div class="col-md-9">
      <div class="ls-list-title ">
        <strong>Identificador da conta</strong>
      </div>
      <div class="ls-list-description">
        <p>Vero aut ipsa amet commodi laboriosam libero et vel ratione. incidunt eveniet non qui. eius rem totam sunt sunt praesentium qui atque similique sapiente</p>
        <ul>
            <li>Item 0</li>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
      </div>
    </div>
    <div class="col-md-3 ls-txt-right">
      <div data-ls-module="dropdown" class="ls-dropdown ls-pos-right">
        <a href="#" class="ls-btn-primary">Administrar</a>
        <ul class="ls-dropdown-nav">
            <li><a href="#">Site</a></li>
            <li><a href="#">E-mail</a></li>
        </ul>
      </div>
    </div>
  </header>
  <div class="ls-list-content ">
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
    <div class="col-xs-12 col-md-6">
      <span class="ls-list-label">Status</span>
      <strong>Publicado</strong>
    </div>
  </div>
</div>