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 moreaccessible.

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

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

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;

}