Substituir o caminho da imagem nos códigos abaixo pelo caminho da imagem hospedada no seu site.
Substituir o caminho da imagem nos códigos abaixo pelo caminho da imagem hospedada no seu site.
Exemplos de utilização do selo de acessibilidade digital
Instruções de utilização do selo:
- Faça o download das imagens SVG abaixo para uma pasta de seu site;
- Insira o código CSS disponibilizado abaixo no arquivo de estilos do seu site;
- Identifique a melhor opção de selo e posicionamento do balão para o local onde pretende instalar o selo em seu site;
- Copie e cole o código referente ao selo substituindo o endereço da imagem (/img/smped/) pelo endereço onde foram colocadas as imagens baixadas em seu site. Ex: www.meusite.com/imagens/.
Código CSS à ser incluído na página:
/*Selo de acessibilidade digital*/
.sa{position:relative;display:inline-block}.sa .st{visibility:hidden;width:220px;background-color:#e2e2e2;color:#000;text-align:left;padding:5px;border-radius:6px;position:absolute;z-index:1;opacity:0;transition:opacity 1s}.sa .st div{font-weight:700;text-align:center;margin-bottom:5px}.sa .st span{display:block;text-align:center;margin-top:5px}.sa:hover .st, .sa:focus .st{visibility:visible;opacity:1}.sad .st,.sae .st{top:0}.sab .st,.sat .st{margin-left:-110px;left:50%}.sat .st{bottom:110%}.sab .st{top:90%}.sad .st{left:105%}.sae .st{right:105%}
Imagens SVG para download e hospedagem no site:
Código HTML para fundos claros
Substituir o caminho da imagem nos códigos abaixo pelo caminho da imagem hospedada no seu site.
-
Balão acima do logo
<a class="sa sat" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa1.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
-
Balão abaixo do logo
<a class="sa sab" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa1.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
-
Balão à direita do logo
<a class="sa sad" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa1.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
-
Balão à esquerda do logo
<a class="sa sae" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa1.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
Exemplos de utilização:
Código HTML para fundos escuros
Substituir o caminho da imagem nos códigos abaixo pelo caminho da imagem hospedada no seu site.
-
Balão acima do logo
<a class="sa sat" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa2.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
-
Balão abaixo do logo
<a class="sa sab" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa2.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
-
Balão à direita do logo
<a class="sa sad" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa2.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
-
Balão à esquerda do logo
<a class="sa sae" href="http://selodigital.imprensaoficial.com.br/validacao/SMPED/011e1a2b200bd239c6" target="_blank"> <img src="/img/smped/sa2.svg" height="70" alt="Este sitio possui um selo de acessibilidade digital."> <div class="st"><div>Selo de Acessibilidade Digital</div>Nº do Selo: 2023-AD/106<br>Validade: 22/12/2025<br>Clique para mais informações </div> </a>
Exemplos de utilização:
