Listas

Lista Simples
Exemplo de lista simples:
  • One claims that higher contrast is better, and black on white is the most readable combination.
  • The other says too much contrast is actually harder on the eyes, and some shade of grey is more accessible.
Código
Ocultar Código
  • HTML
  • CSS

<div class="simple-list-wrapper">
    <ul>
        <li>One claims that higher contrast is better, and black on white is the most readable combination.</li>
        <li>The other says too much contrast is actually harder on the eyes, and some shade of grey is moreaccessible.</li>
    </ul>
</div>

.simple-list-wrapper ul{
    list-style: none;
    padding-left: 15px;
    margin: 0;
}
.simple-list-wrapper ul li{
    font-family: "karmalight";
    font-size: 18px;
    color: #808184;
    margin: 15px 0px;
}
.simple-list-wrapper ul li:before {
    color: #808184;
    content: "\00b7";
    font-size: 34px;
    vertical-align: sub;
    line-height: normal;
    margin-right: 5px;
}

Lista Simples com Hiperligações

As listas simples com hiperligações dão acesso rápido a outras páginas internas ou externas.

Código
Ocultar Código
  • HTML
  • CSS

<div class="simple-list-wrapper hyperlink">
<ul>
    <li><a href="#"><i class="icon-link">&nbsp;</i><span>Registo comercial - consulta de certidão permanente</span></a></li>
    <li><a href="#"><i class="icon-link">&nbsp;</i><span>Pedido de cartão de cidadão</span></a></li>
    <li><a href="#"><i class="icon-link">&nbsp;</i><span>Consulta de certidão do registo civil</span></a></li>
</ul>
</div>

.simple-list-wrapper ul{
    list-style: none;
    padding-left: 15px;
    margin: 0;
}
.simple-list-wrapper ul li{
    font-family: "karmalight";
    font-size: 18px;
    color: #808184;
    margin: 15px 0px;
}
.simple-list-wrapper ul li:before {
    color: #808184;
    content: "\00b7";
    font-size: 34px;
    vertical-align: sub;
    line-height: normal;
    margin-right: 5px;
}
.simple-list-wrapper.hyperlink li:before{
    content: initial;
}
.simple-list-wrapper.hyperlink li a{
    color: #9D9D9C;
    text-decoration: none;
}
.simple-list-wrapper.hyperlink li i{
    font-size: 20px;
}
.simple-list-wrapper.hyperlink li a:hover{
    color: #3498DB;
}
.simple-list-wrapper.hyperlink li a span{
    margin-left: 5px;
}
.simple-list-wrapper.hyperlink li a:hover span{
    border-bottom: 1px solid #3498DB;
}
.simple-list-wrapper.hyperlink li{
    margin-bottom: 20px;
}

Lista em Grupo
As listas em grupo permitem mostrar informação mais detalhada.
 
Lista 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

[ver tudo]
 
Lista 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

[ver tudo]
 
Lista 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

[ver tudo]
 
Lista 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.

[ver tudo]
Código
Ocultar Código
  • HTML
  • CSS

<div class="group-list-wrapper">
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-beaker">&nbsp;</i>
            <div class="text-wrapper">
                <h6>Lista 1</h6>
               
                <p class="p2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
                <a href="#">[ver tudo]</a>
            </div>
        </div>
       
        <div class="span6">
            <i class="icon-leaf">&nbsp;</i>
            <div class="text-wrapper">
                <h6>Lista 2</h6>
               
                <p class="p2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
                <a href="#">[ver tudo]</a>
            </div>
        </div>
    </div>
   
    <div class="row-fluid">
        <div class="span6">
            <i class="icon-lightbulb">&nbsp;</i>
            <div class="text-wrapper">
                <h6>Lista 3</h6>
               
                <p class="p2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
                <a href="#">[ver tudo]</a>
            </div>
        </div>
       
        <div class="span6">
            <i class="icon-comments">&nbsp;</i>
            <div class="text-wrapper">
                <h6>Lista 4</h6>
               
                <p class="p2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.</p>
                <a href="#">[ver tudo]</a>
            </div>
        </div>
    </div>
</div>

.group-list-wrapper .span6 i,
.group-list-wrapper .span6 .text-wrapper{
    display: table-cell;
    vertical-align: top;
}
.group-list-wrapper .span6 i{
    font-size: 48px;
    line-height: normal;
    padding-right: 24px;
    min-width: 46px;
    text-align: center;
}
.group-list-wrapper .span6 a{
    font-family: "karmamedium";
    font-size: 16px;
    color: #3498DB;
}
.group-list-wrapper .span6 p{
    margin-bottom: 10px;
    color: #9D9D9C;
}
.group-list-wrapper .span6{
    margin-bottom: 60px;
}