Artículo
Artículo básico
Los artículos se emplean para mostrar contenido autónomo e independiente.
- HTML
- JS
<article class="ulpgcds-article">
<a href="#">
<img src="/sites/default/files/2020-01/ulpgc_salon_de_actos.jpg" alt="Texto descriptivo" />
<h3>Título de un artículo</h3>
</a>
</article> Variantes
Artículo con descripción
Título de un artículo
Texto de prueba que puede ir o no dependiendo del objetivo del artículo o bien de la capacidad para describir la acción en el título
- HTML
- JS
<article class="ulpgcds-article"><a href="#"><img alt="Texto descriptivo" src="/sites/default/files/2020-01/ulpgc_salon_de_actos.jpg" />
<h3>Título de un artículo</h3></a>
<p>Texto de prueba que puede ir o no dependiendo del objetivo del artículo o bien de la capacidad para describir la acción en el título</p>
</article> Título de un artículo
Texto de prueba que puede ir o no dependiendo del objetivo del artículo o bien de la capacidad para describir la acción en el título
- HTML
- JS
<article class="ulpgcds-article"><a href="#"><img alt="Texto descriptivo" src="/sites/default/files/2020-01/ulpgc_salon_de_actos.jpg" />
<div class="ulpgcds-article__date">01 Ene 2020</div>
<h3>Título de un artículo</h3></a>
<p>Texto de prueba que puede ir o no dependiendo del objetivo del artículo o bien de la capacidad para describir la acción en el título</p>
</article> Visualización corta en móvil
Título de un artículo
Texto de prueba que puede ir o no dependiendo del objetivo del artículo o bien de la capacidad para describir la acción en el título
- HTML
- JS
<article class="ulpgcds-article ulpgcds-article--short"><a href="#"><img alt="Texto descriptivo" src="/sites/default/files/2020-01/ulpgc_salon_de_actos.jpg" />
<h3>Título de un artículo</h3></a>
<p>Texto de prueba que puede ir o no dependiendo del objetivo del artículo o bien de la capacidad para describir la acción en el título</p>
</article> Uso del componente
Un artículo debería tener sentido por si mismo, tanto si se acompaña de una descripción como si no. El objetivo de este componente es destacar una información con respecto a otros tipos de enlaces.
El artículo debe mostrar al usuario la suficiente información para que este comprenda el contenido al que puede acceder si interactúa con el enlace.
Algunos usos potenciales de este tipo de componente pueden ser:
- Noticias destacadas
- Enlaces a secciones destacadas
- Agrupación de enlaces relacionados.
Buenas prácticas:
- Sea conciso en el título del artículo. Títulos muy largos pueden ser conflictivos con este tipo de componente, en especial en dispositivos pequeño.
- A la hora de definir el título del artículo, este debe entenderse por si solo sin necesidad de información adicional.
- Es recomendable que la imagen que acompaña a cada artículo contenga la información clave en el centro de la imagen y este relacionada con el contexto del artículo.
- Si va a emplear el artículo para mostrar un listado de noticias, no olvide añadir la fecha de publicación.
- Si va a emplear una descripción, esta debe ser lo más corta posible y aportar valor añadido al título del artículo. La descripción es un texto complementario, no sustitutivo.
- Todos los artículos deben tener un enlace asociado.
- No emplee un artículo de forma individual, es preferible emplearlos para agrupaciones de un mismo tipo de contenido. Por ejemplo, para mostrar un conjunto de noticias destacadas.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-article | Activa la visualización del artículo |
| .ulpgcds-article--short | Activa la visualización del artículo para que su versión responsive sea con imagen pequeña y sólo título |
| .ulpgcds-article__date | Estilo para la fecha, cuando proceda |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
