ENLACES
Enlaces
CSS
Título:
- Fuente: Rubik Regular, 0.875rem (14px)
- Font-weight: 400
- Color: #004d71 (rgb(0, 77, 113))
- Márgenes bloque: izquierdo 1rem (10px); inferior 0.625rem (10px)
- Espaciado vertical enlace: .4286em (6px)
- Rollover: subrayado
HTML
<ul class="lst-link">
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!" class="link__ext" title="Enlace externo">Enlace externo</a></li>
<li><a href="#!.pdf">Enlace a documento PDF (PDF 20KB)</a></li>
<li><a href="#!.xls">Enlace a documento excel (XLS 20KB) </a></li>
<li><a href="#!.doc">Enlace a documento word(XLS 20KB) </a></li>
</ul>
HTML
<ul class="lst-link cols-02">
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
</ul>
HTML
<ul class="lst-link cols-03">
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
</ul>
HTML
<ul class="lst-link cols-04">
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!">Enlace estándar</a></li>
</ul>
Bloque con imagen y lista de enlaces
CSS
- Borde: 3px #d3e2db (rgb(211, 226, 219););
- Margen superior: 20px
- Margen inferior: 30px
- Espaciado: 15px
- Ancho imagen: 130px aprox.
- Enlaces: Lista de enlaces simple
HTML
<ul class="lst-link">
<li><a href="#!">Enlace estándar</a></li>
<li><a href="#!" class="link__ext" title="Enlace externo">Enlace externo</a></li>
<li><a href="#!.pdf" class="link__ext" title="Enlace externo">Enlace a documento PDF (PDF 20KB)</a></li>
<li><a href="#!" class="link__rec">Enlace estándar</a></li>
</ul>
Lista de enlaces destacados en bloque con imagen (home)
Trabajadores
CSS
- Fuente: Rubik Regular, 1rem (16px)
- Color: #004d71; (rgb(0, 77, 113))
- Fondo: Blanco
- Borde: 2px #d3e2db (rgb(221, 226, 219))
- Espaciado: vertical 3px, izquierdo 18px
- Margen inferior: 10px
- Rollover: color de borde #004d71 (rgb(0, 77, 113))
- Título: Montserrat 1.625rem (26px) color #515050 (rgb(81, 80, 80));
- Ancho imagen: 250px
- Márgenes bloque: vertical 30px, horizontal 20px
HTML
<div class="index">
<h2 class="index--title">Trabajadores</h2>
<div class="lst-home__img">
<img class="index--img" alt="" src="img.jpg" />
</div>
<ul class="index--link">
<li>
<a href="#!">
<span>Buscar ofertas de empleo en Empléate</span>
</a>
</li>
<li>
<a href="#!">
<span>Ofertas de empleo en Europa</span>
</a>
</li>
<li>
<a href="#!"></a>
</li>
<li>
<a href="#!">
<span>Prestaciones por desempleo</span>
</a>
</li>
</ul>
</div>
Lista de enlaces destacados
CSS
- Fuente: Rubik Regular, 1rem (16px)
- Color: #004d71; (rgb(0, 77, 113))
- Fondo: Blanco
- Borde: 3px #d3e2db (rgb(221, 226, 219))
- Espaciado: 13px
- Rollover: color de borde #004d71 (rgb(0, 77, 113))
- Seleccionado: fondo #004d71 (rgb(0, 77, 113)); color blanco
HTML
<div class="menuInf">
<h2 class="column--title" style="font-size:1.2rem">Otros Servicios</h2>
<div class="bloque_contenido">
<div class="row columns">
<div class="col-md-6 col-sm-6">
<div class="block-link-inf">
<div class="block-link--contenedor">
<ul>
<li><a class="" href="#" rel="noopener">Evaluación de la formación profesional para el empleo</a></li>
<li><a class="" href="#" rel="noopener">Convocatoria 2019 para la concesión de subvenciones destinadas al acondicionamiento y renovación de oficinas de empleo</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="block-link-inf">
<div class="block-link--contenedor">
<ul>
<li><a class="link__ext" href="#" target="_blank" rel="noopener">Cartera Común de Servicios del Sistema Nacional de Empleo (PDF)</a></li>
<li><a class="" href="#" rel="noopener">Derechos y Deberes de la ciudadanía: Procedimientos de gestión en SISPE </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Enlace botón simulado
CSS
- Fuente: Rubik Regular, 1rem (16px)
- Font-weight: 400
- Color: blanco
- Fondo: #004d71 (rgb(0, 77, 113))
- Espaciado: vertical 0.5rem (8px); horizontal 2rem (32px)
- Rollover: color #004d71, fondo blanco, outline 2px #004d71
HTML
<a class="button" href="#!">Botón simulado</a>