LOCAWEB STYLE

Documentação Locaweb Style

Boxes selecionável

Box com variações de layout que exibe informações ao ser selecionado.

Esse elemento utiliza dos grids pra ter sua largura, conforme o exemplo abaixo.

Primeiro conteúdo
Segundo conteúdo
Terceiro conteúdo


<div class="collapsedRadios">
  <header class="boxOption row">
    <div class="span3" data-checked="true">
      <label class="boxOptionLabel" >
        <input type="radio" class="boxOptionChecked" data-element="true" data-target="#box1" data-toggle="collapse" name="option">
        <img src="http://assets.locaweb.com.br/locastyle/1.2.27/images/bd/logo-postgre-mini.png" alt="">
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">CentOS</span>
          <small>Pequena descrição</small>
        </span>
      </label>
    </div>
    <div class="span3" data-checked="true">
      <label class="boxOptionLabel" >
        <input type="radio" class="boxOptionChecked" data-element="true" data-target="#box2" data-toggle="collapse" name="option">
        <img src="http://assets.locaweb.com.br/locastyle/1.2.22/images/bd/logo-sqlserver-mini.png" alt="">
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">Debian</span>
          <small>Pequena descrição</small>
        </span>
      </label>
    </div>
    <div class="span3" data-checked="true">
      <label class="boxOptionLabel" >
        <input type="radio" class="boxOptionChecked" data-element="true" checked="checked" data-target="#box3" data-toggle="collapse" name="option">
        <img src="http://assets.locaweb.com.br/locastyle/1.2.22/images/bd/logo-sqlserver-mini.png" alt="">
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">Debian</span>
          <small>Pequena descrição</small>
        </span>
      </label>
    </div>
  </header>
  <div id="box1" class="collapse">
    <div class="boxDinamicArrow">Primeiro conteúdo</div>
  </div>
  <div id="box2" class="collapse">
    <div class="boxDinamicArrow">Segundo conteúdo</div>
  </div>
  <div id="box3" class="collapse">
    <div class="boxDinamicArrow">Terceiro conteúdo</div>
  </div>
</div>

Box selecionável simples

O exemplo abaixo também utiliza os grids, porém não exibe nenhum conteúdo.

<div class="boxOption row">
  <div class="span12">
    <label>
      <input type="radio" name="option2">
      <img src="http://assets.locaweb.com.br/locastyle/1.2.27/images/bd/logo-postgre-mini.png" alt="logo postgres">
      <span class="boxOptionInfo">
        <span class="boxOptionTitle">Título 1</span>
        <p>Imagem do servidor <strong>cpro00012</strong> | descrição do servidor <br>
        Gerado em 13/05/2015</p>
      </span>
    </label>
  </div>
  <div class="span12">
    <label>
      <input type="radio" name="option2">
      <img src="http://assets.locaweb.com.br/locastyle/1.2.22/images/bd/logo-sqlserver-mini.png" alt="logo sqlserver">
      <span class="boxOptionInfo">
        <span class="boxOptionTitle">Título 2</span>
        Imagem do servidor <strong>cpro00047</strong> <br>Gerado em 13/05/2015
      </span>
    </label>
  </div>
</div>

Box selecionável com seta

Para adicionar a seta, basta a inserir a classe .arrow.

Primeiro conteúdo
Segundo conteúdo
<div class="collapsedRadios">
  <header class="boxOption row">
    <div class="span4" data-checked="true">
      <label class="boxOptionLabel arrow">
        <input type="radio" class="boxOptionChecked" data-element="true" data-target="#box_1" data-toggle="collapse" name="option">
        <img src="http://assets.locaweb.com.br/locastyle/1.2.27/images/bd/logo-postgre-mini.png" alt="">
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">CentOS</span>
          <small>Pequena descrição</small>
        </span>
      </label>
    </div>
    <div class="span5" data-checked="true">
      <label class="boxOptionLabel arrow">
        <input type="radio" class="boxOptionChecked" data-element="true" data-target="#box_2" data-toggle="collapse" name="option">
        <img src="http://assets.locaweb.com.br/locastyle/1.2.22/images/bd/logo-sqlserver-mini.png" alt="">
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">Debian</span>
          <small>Pequena descrição</small>
        </span>
      </label>
    </div>
  </header>
  <div id="box_1" class="collapse">
    <div class="boxWhite">Primeiro conteúdo</div>
  </div>
  <div id="box_2" class="collapse">
    <div class="boxWhite">Segundo conteúdo</div>
  </div>
</div>

Box selecionável com ícones

Para adicionar o icone, basta inserir no lugar da imagem.

Primeiro conteúdo
Segundo conteúdo
<div class="collapsedRadios">
  <header class="boxOption row">
    <div class="span4" data-checked="true">
      <label class="boxOptionLabel" >
        <input type="radio" class="boxOptionChecked" data-element="true" data-target="#box8" data-toggle="collapse" name="option">
        <span class="ico-pizza-1"></span>
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">CentOS</span>
        </span>
      </label>
    </div>
    <div class="span4" data-checked="true">
      <label class="boxOptionLabel" >
        <input type="radio" class="boxOptionChecked" data-element="true" data-target="#box9" data-toggle="collapse" name="option">
        <span class="ico-pizza-2"></span>
        <span class="boxOptionInfo">
          <span class="boxOptionTitle">Debian</span>
        </span>
      </label>
    </div>
  </header>
  <div id="box8" class="collapse">
    <div class="boxDinamicArrow">Primeiro conteúdo</div>
  </div>
  <div id="box9" class="collapse">
    <div class="boxDinamicArrow">Segundo conteúdo</div>
  </div>
</div>