LOCAWEB STYLE

Documentação Locaweb Style

Boxes com colunas

Box com variações de layout com colunas de informações que utilizam os grids do bootstrap.

Caixa com 3 colunas sem o header

informação 0
informação 0
informação 0 
<div class="boxList">
  <div class="boxListGrids row-fluid">
    <div class="span4">
      <span class="titleBox">informação</span>
      <strong class="valueBox">0</strong>
    </div>
    <div class="span4">
      <span class="titleBox">informação</span>
      <strong class="valueBox">0</strong>
    </div>
    <div class="span4">
      <span class="titleBox">informação</span>
      <strong class="valueBox">0</strong>
    </div>
  </div>
</div>

Caixas com header + 2 colunas

Título

Botão
informação 0
Cancelar recorrência 
  <div class="boxList">
    <header>
      <h3 class="titleBoxList">Título</h3>
      <a href="#" class="btn btn-primary fRight">Botão</a>
    </header>
    <div class="boxListGrids row-fluid">
      <div class="span3">
        <span class="titleBox">informação</span>
        <strong class="valueBox">0</strong>
      </div>
      <div class="span9 txtLeft">
        <a href="#" class="lnkArrow" tabindex="3" title="Cancelar recorrência">Cancelar recorrência</a>
        <span data-content="Ao desabilitar a recorrência, os envios desse cliente não serão renovados para os próximos períodos." class="infoHelp" rel="popover" data-original-title="Cancelar recorrência"></span>
      </div>
    </div>
  </div>

Caixas com header + 4 colunas + conteúdo qualquer

Título

Botão
informação 0
informação 0
informação 0
informação 0

aqui vai qualquer conteúdo 

<div class="boxList">
    <header>
      <h3 class="titleBoxList">Título</h3>
      <a href="#" class="btn btn-primary fRight">Botão</a>
    </header>
    <div class="boxListGrids row-fluid">
      <div class="span3">
        <span class="titleBox">informação</span>
        <strong class="valueBox">0</strong>
      </div>
      <div class="span3">
        <span class="titleBox">informação</span>
        <strong class="valueBox">0</strong>
      </div>
      <div class="span3">
        <span class="titleBox">informação</span>
        <strong class="valueBox">0</strong>
      </div>
      <div class="span3">
        <span class="titleBox">informação</span>
        <strong class="valueBox">0</strong>
      </div>
    </div>
    <div class="boxListContent">
      <p>aqui vai qualquer conteúdo </p>
    </div>
  </div>

Caixas com header + título com ícone

Título com ícone alguma descrição aqui

Botão
informação 0
informação 0
informação 0 
   <div class="boxList">
     <header>
       <h3 class="titleBoxList ico-calendar-check">
        Título com ícone
         <small>alguma descrição aqui </small>
       </h3>
       <a href="#" class="btn btn-primary fRight">Botão </a>
     </header>
     <div class="boxListGrids row-fluid">
       <div class="span4">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
       <div class="span4">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
       <div class="span4">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
     </div>
   </div>

Caixas com 5 colunas

É necessário inserir a class .boxList5 e tudo fica perfeito.

Com 5 boxes

Botão
informação 0
informação 0
informação 0
informação 0
informação 0 
   <div class="boxList boxList5">
     <header>
       <h3 class="titleBoxList">Com 5 boxes </h3>
       <a href="#" class="btn btn-primary fRight">Botão </a>
     </header>
     <div class="boxListGrids row-fluid">
       <div class="span2">
         <span class="titleBox ">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
       <div class="span2">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
       <div class="span2">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
       <div class="span2">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
       <div class="span2">
         <span class="titleBox">informação </span>
         <strong class="valueBox">0 </strong>
       </div>
     </div>
   </div>

Header com Imagem e dropdown

Título com imagem alguma descrição aqui

Botão
informação 0
informação 0 
<div class="boxList">
  <header>
    <img src="caminho/da/imagem.png" alt="imagem">
    <h3 class="titleBoxList">
      Título com imagem
      <small class="dBlock">alguma descrição aqui</small>
    </h3>
    <div class="btn-group fRight">
      <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="3">
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu pull-right">
        <li><a href="#">Action</a></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <a href="#" class="btn fRight">Botão</a>
  </header>
  <div class="boxListGrids row-fluid">
    <div class="span6">
      <span class="titleBox">informação</span>
      <strong class="valueBox">0</strong>
    </div>
    <div class="span6">
      <span class="titleBox">informação</span>
      <strong class="valueBox">0</strong>
    </div>
  </div>
</div>