Locaweb Style

Documentação

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

Box genérico

Um box genérico usado para dividir ou agrupar conteúdos

Geralmente precisamos agrupar ou dividir algumas informações em caixas no layout. Essas caixas são simples e bem genéricas que podem conter qualquer outro elemento.

Para criar um box genérico, basta adicionar a classe .ls-box em algum elemento, de preferência em um elemento DIV.

Um título

Uma caixa genérica lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, dicta, alias accusantium est unde autem ipsam libero tempora tempore nesciunt eveniet eaque laudantium qui facilis aut deserunt sequi suscipit perspiciatis.

1
2
3
4

<div class="ls-box">
  <h5 class="ls-title-3">Um título</h5>
  <p>Uma caixa genérica lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, dicta, alias accusantium est unde autem ipsam libero tempora tempore nesciunt eveniet eaque laudantium qui facilis aut deserunt sequi suscipit perspiciatis.</p>
</div>

Estas são as classes que você pode usar para modificar o .ls-box.

Classes Descrição
Classes de tamanho: ls-xs-space, ls-sm-space, ls-md-space e ls-lg-space Aumenta ou diminui o espaço do box.
.ls-ico-bg Faz com que o ícone do :before de ls-box seja posicionado à direita, com uma opacidade baixa. Como se fosse um background.
.ls-box-gray O box tem background cinza.
.ls-box-filter Faz um box preparado para receber elementos de filtro. Ela herda as classes .ls-box-gray, .ls-sm-space e .ls-box
.ls-box-group Agrupa os boxes genéricos

Box com a classe .ls-box-gray

Por padrão o background do elemento .ls-box é branco, mas você mudar para cinza se usar a classe .ls-box-gray.

Vários espaçamentos

Como outros elementos, você pode usar as classes .ls-xs-space, .ls-sm-space, .ls-md-space e .ls-lg-space para aumentar ou diminuir o tamanho do .ls-box.

Box grande .ls-lg-space

Ut placeat ut quis voluptatibus illum debitis facilis sint animi vitae odit sit sit et. iste sunt delectus tenetur ab dolorum non nisi vel unde quia non sed corrupti. excepturi facilis nulla deserunt. consectetur aspernatur quia in ut aliquid porro et. possimus ipsa reiciendis atque voluptatem tempora

Box médio .ls-md-space

Reiciendis illum laboriosam quasi magni cumque et ipsa et similique. eius quia quam maxime nihil reprehenderit ipsa suscipit delectus consectetur voluptatem in facilis repellat. occaecati officia similique sit qui

Box default (sem classe de tamanho)

Quasi et qui eaque est beatae aliquam voluptatem aut voluptatum est quaerat dolorem est dolores. et dignissimos id sunt aliquid possimus commodi et est voluptatum. dicta aut inventore nam sed sit unde et corrupti qui ullam. odio quas ipsum non velit suscipit omnis quis ut nemo nesciunt. velit sequi natus molestiae ex. doloribus assumenda et ut. nostrum et ratione quasi

Box pequeno .ls-sm-space

Porro tempora aut blanditiis iste sapiente autem qui voluptatem illum quas omnis sed. iusto soluta dicta sapiente ut unde at modi nisi reiciendis quod sunt. ea qui molestiae repudiandae qui dolor officiis sint est molestiae ut maxime. ducimus fuga et aperiam officia rerum ab odit quis iusto maiores rerum perferendis

Box super pequeno .ls-xs-space

Nisi facere nihil libero. magnam pariatur ea iusto sed dolores ipsa beatae. vero tempore et id nostrum 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="ls-box ls-lg-space">
  <h5 class="ls-title-3">Box grande .ls-lg-space</h5>
  <p>Consequatur atque debitis ipsam dolores quos assumenda maxime praesentium. voluptas repellat possimus voluptatum. quis veritatis dignissimos sunt dolorem voluptatibus impedit est. aspernatur molestiae maxime illum est aspernatur temporibus fugit minima quod illum modi incidunt tempore. eius voluptates repellendus ut quasi fugit cumque adipisci assumenda omnis consequatur. tempora aut odio et voluptates quis ducimus in id</p>
</div>

<div class="ls-box ls-md-space">
  <h5 class="ls-title-3">Box médio .ls-md-space</h5>
  <p>Quibusdam excepturi beatae est quia est. cupiditate corrupti itaque qui et quisquam. qui fugit quas nostrum velit similique occaecati eos illum. quo aperiam nihil dolor qui quibusdam vitae velit dolores ipsam ut illo sed</p>
</div>

<div class="ls-box">
  <h5 class="ls-title-3">Box default (sem classe de tamanho)</h5>
  <p>Nemo doloribus modi ut sit est asperiores ut. magni aut voluptas ut dolor quaerat. iusto alias nemo officia tempora eum nemo occaecati aut ut non. eius quo iure tempora est error saepe eos facilis et aliquid corporis eum qui ut</p>
</div>

<div class="ls-box ls-sm-space">
  <h5 class="ls-title-5">Box pequeno .ls-sm-space</h5>
  <p>Ea nesciunt et excepturi qui quia nemo sint quod. aut doloribus minima occaecati ipsam nisi ipsam voluptas in. qui asperiores repellat laudantium id sint dicta suscipit magni odio est culpa error. exercitationem quas qui nesciunt vel maxime. asperiores velit nemo illum ipsum ipsa vel. aut voluptas modi expedita voluptates est architecto non nesciunt voluptates qui aut sunt quia dolorum. perspiciatis rerum molestiae atque esse quia quia</p>
</div>

<div class="ls-box ls-xs-space">
  <h5 class="ls-title-5">Box super pequeno .ls-xs-space</h5>
  <p>Nisi facere nihil libero. magnam pariatur ea iusto sed dolores ipsa beatae. vero tempore et id nostrum </p>
</div>
Um título

Uma caixa genérica lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, dicta, alias accusantium est unde autem ipsam libero tempora tempore nesciunt eveniet eaque laudantium qui facilis aut deserunt sequi suscipit perspiciatis.

1
2
3
4

<div class="ls-box ls-box-gray">
  <h5 class="ls-title-3">Um título</h5>
  <p>Uma caixa genérica lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas, dicta, alias accusantium est unde autem ipsam libero tempora tempore nesciunt eveniet eaque laudantium qui facilis aut deserunt sequi suscipit perspiciatis.</p>
</div>

Box com ícones à esquerda

Esse não tem segredo: se quiser colocar ícones à esquerda, basta fazer um grid com duas colunas: na primeira coluna vai o elemento com o ícone. Na segunda coluna vai seu conteúdo. Veja abaixo:

Aparência e conteúdo

Fortaleça ainda mais a sua revenda personalizando o painel de acesso dos seus clientes. Mude as cores, o nome ou insira a sua marca.

Endereço de acesso

Você pode personalizar a URL de acesso no painel dos seus clientes. Uma boa prática para que eles associem a revenda ao nome da sua empresa.

E-mail

Cadastre um endereço de e-mail para enviar notificações aos seus clientes.

 
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

<div class="ls-box-group">
  <div class="ls-box ls-md-space">
    <div class="row">
      <div class="col-md-2 ls-txt-center">
      <span class="ls-ico-alone ls-ico-paint-format"></span>
      </div>
      <div class="col-md-10">
        <a href="config-aspect">
          <h3 class="ls-title-5"><strong>Aparência e conteúdo</strong></h3>
          <p>Fortaleça ainda mais a sua revenda personalizando o painel de acesso dos seus clientes. Mude as cores, o nome ou insira a sua marca.</p>
        </a>
      </div>
    </div>
  </div>

  <div class="ls-box ls-md-space">
    <div class="row">
      <div class="col-md-2 ls-txt-center">
      <span class="ls-ico-alone ls-ico-screen"></span>
      </div>
      <div class="col-md-10">
        <a href="config-domain">
          <h3 class="ls-title-5"><strong>Endereço de acesso</strong></h3>
          <p>Você pode personalizar a URL de acesso no painel dos seus clientes. Uma boa prática para que eles associem a revenda ao nome da sua empresa.</p>
        </a>
      </div>
    </div>
  </div>

  <div class="ls-box ls-md-space">
    <div class="row">
      <div class="col-md-2 ls-txt-center">
      <span class="ls-ico-alone ls-ico-envelope"></span>
      </div>
      <div class="col-md-10">
        <a href="config-email">
          <h3 class="ls-title-5"><strong>E-mail</strong></h3>
          <p>Cadastre um endereço de e-mail para enviar notificações aos seus clientes.</p>
        </a>
      </div>
    </div>
  </div>
</div>

Box com ícone de background

Se o elemento .ls-box já tiver alguma classe de ícones, basta inserir a classe .ls-ico-bg. Isso fará com que o ícone fique alinhado à direita, com uma opacidade baixa.

Cadastre contatos na sua revenda

Comece agora: cadastre seu primeiro cliente, adicione envios e acompanhe o seu desenvolvimento.

Cadastrar meu primeiro cliente 
1
2
3
4
5

<div class="ls-box ls-lg-space ls-ico-user-add ls-ico-bg">
  <h1 class="ls-title-1 ls-color-theme">Cadastre contatos na sua revenda</h1>
  <p>Comece agora: cadastre seu primeiro cliente, adicione envios e acompanhe o seu desenvolvimento.</p>
  <a class="ls-btn-primary" href="#">Cadastrar meu primeiro cliente</a>
</div>