Componentes em HTML
Os componentes são pequenos blocos que formam o site. Dentro dos editores do Wordpress é possível salvar e carregar modelos de blocos em poucos cliques.
Esta seção será atualizada com novos componentes.
Botão de download
O botão de download é constituído de ícone e texto descritivo do arquivo. O hover é aplicado somente no campo do ícone.
Download | Nome Documento
Como usar
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" type="text/css" type="text/css" media="all">
<style>
.container {
margin-left: 8px;
text-decoration: none;
max-width: 400px;
background-color: #FFFFFF;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 15%);
text-align: center;
flex-direction: row;
display: flex;
align-items: center;
}
.container-icone {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
flex: 0 0 auto;
box-sizing: border-box;
background-color: #005c6d;
padding: 0.5em;
color: #fff;
display: inline-block;
line-height: 1;
transition: all .3s;
font-size: 50px;
}
.container-icone:hover {
background-color: #004854;
}
.container-icone .fas {
width: 1em;
height: 1em;
position: relative;
display: block;
}
.container-title {
flex-grow: 1;
font-family: "Roboto", Sans-serif;
font-weight: 300;
color: #005c6d;
font-size: 20px;
}
</style>
<a class="container" href="https://www.cps.sp.gov.br">
<div class="container-icone">
<i aria-hidden="true" class="fas fa-file-download"></i>
</div>
<h4 class="container-title">
Download | Nome Documento
</h4>
</a>
Botões navegação
Os botões de navegação interna servem de apontadores para páginas dentro ou fora do site CPS. Cada tipo de botão utiliza um ícone respectivo à sua função.
Botão link interno
Botão de navegação para links internos
Nome da página
Botão link externo
Botão de navegação para links externos
Nome da página
Como usar
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" type="text/css" type="text/css" media="all">
<style>
.container_interno {
margin-left: 8px;
max-width: 400px;
background-color: #FFFFFF;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 15%);
text-align: center;
flex-direction: row-reverse;
display: flex;
align-items: center;
}
.container-interno-icone {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
flex: 0 0 auto;
box-sizing: border-box;
background-color: #00c1cf;
padding: 0.5em;
color: #fff;
display: inline-block;
line-height: 1;
transition: all .3s;
font-size: 50px;
}
.container-interno-icone .fas {
width: 1em;
height: 1em;
position: relative;
display: block;
}
.container-interno-icone:hover {
background-color: #00d8e8;
}
.container-interno-title {
flex-grow: 1;
font-family: "Roboto", Sans-serif;
font-weight: 300;
color: #00c1cf;
font-size: 20px;
}
</style>
<a class="container_interno" href="https://www.cps.sp.gov.br">
<div class="container-interno-icone">
<i aria-hidden="true" class="fas fa-chevron-right"></i>
</div>
<h4 class="container-interno-title">
Nome da página
</h4>
</a>
Botão de menu subsite
Alguns departamentos necessitam de mais páginas para agrupar seu conteúdo, e nesse contexto existem menus específicos para guiar o usuário por estas páginas. Esse menu obedece um padrão exemplificado abaixo.
Como usar
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" type="text/css" type="text/css" media="all">
<style>
.bt_subsite_container {
margin-bottom: 32px;
text-align: center;
float: left;
width: 100%;
max-width: 150px;
}
.bt_subsite_icone {
box-sizing: border-box;
display: inline-block;
color: #ffffff;
background: #005c6d;
font-size: 45px;
padding: 27px;
border-radius: 50%;
line-height: 40px;
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s;
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,-webkit-box-shadow .3s;
transition: 0.3s;
text-decoration: none;
}
.bt_subsite_icone:hover {
transform: scale(1.1);
background: #004854;
}
.bt_subsite_texto {
font-size: 18px;
display: inline-block;
font-family: "Roboto Slab", Sans-serif;
text-decoration: none;
color: #005c6d;
}
.bt_subsite_texto:hover {
color:#004854;
}
</style>
<div class="bt_subsite_container">
<a class="bt_subsite_icone" href="#">
<i aria-hidden="true" class="fas fa-home"></i>
</a>
<a class="bt_subsite_texto" href="#">
Home
</a>
</div>
Carrossel
Conteúdos em carrossel são utilizados quando a quantidade de links ou cards não é possível de ser comportada em outro formato. Quando utilizados devem obedecer os padrões visuais dos cards e sempre utilizar a iconografia padrão de navegação como as setas ‘chevron’.
Manual - Identidade Visual
Baixar
Manual - Identidade Visual
Baixar
Manual - Identidade Visual
Baixar
Como usar
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"> </script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" type="text/css" type="text/css" media="all">
<script>
$('.slick-slider').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 2,
slidesToScroll: 1,
adaptiveHeight: false,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
</script>
<style>
.slick-slider {
float: left;
max-width:800px;
margin-left: 50px;
clear: both;
margin-bottom: 32px;
width:70%;
}
.slick-slide {
height: auto;
}
.slick-prev, .slick-next {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 0;
color: #005C6D;
line-height: 1;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
border: none;
background: transparent;
}
.slick-prev {
left: -25px;
}
.slick-next {
right: -25px;
}
.slick-prev:before {
font-size: 24px;
content: "\f104";
}
.slick-next:before {
content: "\f105";
font-size: 24px;
}
</style>
<div class="slick-slider">
<div class="card_container">
<div class="card_item">
<a href="#" class="card_item_link">
<img src="https://bkpsitecpsnew.blob.core.windows.net/uploadsitecps/sites/1/2022/08/Manual-Identidade-Visual.jpg">
</a>
<div class="card_conteudo">
<h5 class="card_item-titulo">
Manual - Identidade Visual
</h5>
<a class="card_item-button" href="#">Baixar </a>
</div>
</div>
</div>
<div class="card_container">
<div class="card_item">
<a href="#" class="card_item_link">
<img src="https://bkpsitecpsnew.blob.core.windows.net/uploadsitecps/sites/1/2022/08/Manual-Identidade-Visual.jpg">
</a>
<div class="card_conteudo">
<h5 class="card_item-titulo">
Manual - Identidade Visual
</h5>
<a class="card_item-button" href="#">Baixar </a>
</div>
</div>
</div>
<div class="card_container">
<div class="card_item">
<a href="#" class="card_item_link">
<img src="https://bkpsitecpsnew.blob.core.windows.net/uploadsitecps/sites/1/2022/08/Manual-Identidade-Visual.jpg">
</a>
<div class="card_conteudo">
<h5 class="card_item-titulo">
Manual - Identidade Visual
</h5>
<a class="card_item-button" href="#">Baixar </a>
</div>
</div>
</div>
</div>
Acordeon
O Acordeon é um ótimo recurso para agrupar conteúdos diversos sobre o mesmo tema.
Accordion 1
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Accordion 2
O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.
Como usar
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" type="text/css" type="text/css" media="all">
<script>
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
var links = this.el.find('.article-title');
links.on('click', {
el: this.el,
multiple: this.multiple
}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.accordion-content').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('.accordion-container'), false);
});
$(document).on('click', function (event) {
if (!$(event.target).closest('#accordion').length) {
$this.parent().toggleClass('open');
}
});
</script>
<style>
#content-accordion {
display: inline-block;
width: 100%;
}
.accordion-container {
font-family: "Roboto", Sans-serif;
font-size: 16px;
color: #333;
position: relative;
width: 100%;
outline: 0;
cursor: pointer;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #E0E0E0;
}
.accordion-content {
border-width: 1px;
border-bottom-color: #E0E0E0;
color: #666666;
padding: 20px 40px 20px 40px;
background: #fff;
}
.accordion-container .article-title {
display: block;
position: relative;
margin: 0;
padding: 0.625em 0.625em 0.625em 2em;
font-family: "Roboto", Sans-serif;
font-weight: bold;
font-size: 16px;
color: #666666;
cursor: pointer;
transition: 0.3s;
border-width: 1px;
border-color: #E0E0E0;
background-color: #f8f8f8;
}
.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
color: #005c6d;
}
.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
color: #005c6d;
}
.accordion-container .content-entry i {
position: absolute;
left: 12px;
font-style: normal;
font-size: 1.625em;
color: #666666;
}
.accordion-container .content-entry i:before {
content: "\f078";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 6 Free";
font-size: 16px;
font-weight: 900;
transition: 0.3s;
}
.accordion-container .content-entry.open i:before {
content: "\f077";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 6 Free";
font-weight: 900;
transition: 0.3s;
}
.accordion-content {
display: none;
}
</style>
<div id="content-accordion">
<div id="accordion" class="accordion-container">
<article class="content-entry">
<h4 class="article-title"><i></i>Accordion 1</h4>
<div class="accordion-content">
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</article>
<article class="content-entry">
<h4 class="article-title"><i></i>Accordion 2</h4>
<div class="accordion-content">
<p>O Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.</p>
</div>
</article>
</div>
</div>
