Listas
- Home >
- Componentes >
- Listas
Listas
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.
- 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.
- HTML
- CSS
<div class="simple-list-wrapper hyperlink">
<ul>
<li><a href="#"><i class="icon-link"> </i><span>Registo comercial - consulta de certidão permanente</span></a></li>
<li><a href="#"><i class="icon-link"> </i><span>Pedido de cartão de cidadão</span></a></li>
<li><a href="#"><i class="icon-link"> </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
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]- HTML
- CSS
<div class="group-list-wrapper">
<div class="row-fluid">
<div class="span6">
<i class="icon-beaker"> </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"> </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"> </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"> </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;
}
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.