Encabezados y textos

El texto es la principal forma en la que nuestros usuarios visualizan el contenido e información de nuestras plataformas digitales, por lo que hemos hecho una selección de fuestes estándar para los productos de Bci. Esto garantiza accesibilidad por ende la legibilidad de nuestras interfaces de forma igualitaria para todos nuestros usuarios.

La elección de la etiqueta desde el punto de vista semántico debe ser deacuerdo a las recomendaciones de SEO y arquitectura de información. Para facilitar esta tarea, hemos han creado clases que respetan los lineamientos del Banco y de esta manera separar lo visual de la estructura.

Display-1

Display-2

Display 3

Display 4

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

Encabezados Auxiliares

Pueden darse casos en los cuales un formato de fuente se ajuste bien en mobile pero no en Desktop. Para unificar y resolver estas inconsistencias, se crearon de manera adicional clases auxiliares por tallas. Mas abajo se detallan algunos ejemplos prácticos de su uso.

					
Display-1
Display-2
Display 3
Display 4
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
					
				

Importante: Estas clases solo estan creadas para funcionar desde el tamaño lg de Bootstrap ( >992px ) y por lo tanto, siempre se deben usar acompañadas de la clase heading principal, en el caso que no se añada al estar en un tamaño de pantalla menor a 992px adoptará el estilo nativo o definido para esa etiqueta HTML.

Resulta relevante reiterar que su uso solo aplica a estas situaciones particulares, para el resto basta con añadir la clase principal que se menciona en el apartado anterior.

Caso 1: A nivel de semántica, el texto corresponde a un h1 porque es la descripción principal de una landing, segun el diseño debe verse como un Display-3 para desktop, sin embargo, en mobile, se ha decidido que debido a temas de espacio y disposicion de los elementos debe ajustarse a un h3. Este ejemplo se implementaría de la siguiente forma:

					
Título Landing