-
Componentes
-
Módulos
-
Tipos de visualización
- Clases auxiliares
-
Componentes
- Nativos de Liferay
- Interacciones
- Campos de formulario
- Botones
- Interruptores
- Filtros
- Desplegables
- Filtro aplicado
- Pestañas
- Filtro pestaña
- Vista cuadrícula o listado
- Línea divisoria
- Navegación
- Contenido
- Composiciones de texto
- Encabezado
- Elementos tarjetas
- Tablas
- Etiqueta
- Etiqueta
- Cifras
- Ficha Bloque Descriptivo
- Indicador de nivel
- Bloque persona
- Enlaces
- Descarga de ficheros
- Indicador fecha
- Logotipos
- Bloque ficha técnica
- Tarjetas
- Basica
- Pictograma
- Apertura - Tarjetas Flexibles
- Recurso Gráfico Compacta
- Básica Mosaico
- Calendarizada
- Datos de contacto
- Logotipo o pictograma
- Compra
- Accesos
- Contenedor Tarjetas
- Datos publicación
- Alertas
- Fondo imagen
- Multimedia
- Agenda
- Mover elemento responsivo
-
Módulos
- Funcionales
- Tarjetas
- Actualidad
- Contenido relacionado
- Apertura - Tres Destacados
- Carrusel
- Mosaico
- Mapa
- Filtrado
- Localizaciones
- Entradas destacadas
- Distributiva old
- Calendarizada
- Distributiva
- Publicación
- Accion
- Banner - Accesos directos
- Suscripcion
- Banner AccesoDirecto Ilustración
- Banner acceso directo textura
- Banner-Encuesta
- Banner - Etiquetas
- Acción-Compra
- Contenido
- Contenido + imagen
- Ficha-ilustracion
- Ficha-desplegables
- Tablas
- Contacto
- Descargas
- Ficha pestañas
- Citas destacadas
- Tarjetas
- Tarjetas-Pictograma
- Contenido Cifras+Imagen
- Listado
- Contenido-Entidades
- Cifras
- Selector alfabético
- Apertura
- Tipos de visualización
Tipografía
Colección de clases que afecta a la tipografía de los textos, estas a su vez se pueden combinar con las clases auxiliares de textos, teniendo a disposicón otras clases como bold o bolder.
También, si se requiere, tenemos a nuestra disposición en qué punto de ruptura queremos que tenga efecto, coincidiendo estos con los definidos de Bootstrap.
- .t-sm-#{$nombreTipo}-#{$tamaño}
- .t-md-#{$nombreTipo}-#{$tamaño}
- .t-lg-#{$nombreTipo}-#{$tamaño}
- .t-xl-#{$nombreTipo}-#{$tamaño}
Tipo-display
Para titulares grandes y llamativos que resumen la idea principal de una página o pantalla, se utilizará la tipografía Lora en mayúsculas.
Este tipo de titular, generalmente el de mayor tamaño, puede emplear una fuente o estilo único para marcar diferencia y aportar orden. Sin embargo, debe usarse con moderación, ya que un exceso puede sobrecargar a la persona usuaria y reducir su efectividad.
.t-display-xxl
.t-display-xl
.t-display-l
.t-display-m
.t-display-s
.t-display-xs
Tipo-encabezados
Para titulares que introducen secciones o temas dentro de una página o pantalla, se utiliza la tipografía «Libre Franklin» en «Regular» o «Semibold». Suele ser más pequeña que «Display», pero más grande que el texto principal, y puede utilizar un peso de fuente diferente para crear distinción y orden. Debe ser claro y descriptivo y seguir una jerarquía consistente de niveles (como H1, H2, H3, etc.) para ayudar a la persona usuaria a navegar y explorar el contenido.
.t-encabezado-xl
.t-encabezado-l
.t-encabezado-m
.t-encabezado-s
Tipo-heading
Estos tres estilos de titular están destinados a usarse únicamente en páginas/landings Especiales (Autor, Datos, etc...). Utilizamos la tipografía Lora Italic, aunque sin la obligatoriedad de ir en mayúsculas.
.t-heading-xl
.t-heading-l
.t-heading-m
.t-heading-s
Tipo-text
Para el contenido principal de una página o pantalla, como párrafos, listas, leyendas, etiquetas, etc., utilizamos la tipografía «Libre Franklin Regular».
El texto del cuerpo generalmente es el más pequeño en tamaño y debe usar una fuente y estilo legibles para garantizar la comprensión y accesibilidad. El texto del cuerpo debe seguir una altura de línea, espaciado y alineación consistentes para crear una experiencia de lectura armoniosa y cómoda.
Tipo-otros
Para el contenido principal de una página o pantalla, como párrafos, listas, leyendas, etiquetas, etc., utilizamos la tipografía «Libre Franklin Regular».
El texto del cuerpo generalmente es el más pequeño en tamaño y debe usar una fuente y estilo legibles para garantizar la comprensión y accesibilidad. El texto del cuerpo debe seguir una altura de línea, espaciado y alineación consistentes para crear una experiencia de lectura armoniosa y cómoda.