Haz click en el botón anterior para mostrar u ocultar
Más información
¿Qué son los bloques?
Llamamos bloques a los contenedores definidos en las plantillas para facilitar la maquetación de las páginas. Cada bloque contiene las características necesarias para una correcta construcción y visualización de la página: anchura, posición, accesibilidad y otros apartados reservados para introducir contenido.
Código de color
Bloques invisibles y secciones
Bloques de cabecera y pie de página
Bloques para títulos y textos
Bloques para acciones y navegación
Bloques para notificaciones y avisos
Características de cada bloque
Número del elemento en el diagrama y código de color
Nombre del bloque
Código Nunjucks
Descripción
1
Spinner de página
{% block pageSpinnerBlock %}
Oculto detrás del contenido
2
Cabecera
{% block headerBlock %}
Ocupa el ancho de la ventana para incluir el componente cabecera
3
Skip-link
{% block skipLinkBlock %}
Ocupa el ancho de la ventana para incluir el componente de salto al contido principal necesario para accesibilidad
3
Subcabecera
{% block subheaderBlock %}
Espacio reservado bajo la cabecera, normalmente para contener bloques de navegación
4
Navegación de cabecera de edición
{% block headerNavigationEditBlock %}
Permite la navegación, si es necesaria, entre distintas páginas sin salir de la ventana de edición de contenido
5
Título de cabecera de edición
{% block headerTitleEditBlock %}
A la izquierda de la cabecera, muestra un título que indica que te encuentras editando el contenido
4
Navegación de subcabecera
{% block subheaderNavigation %}
Situado en la zona superior izquierda, para navegar a páginas anteriores
6
Acciones de cabecera de edición
{% block headerActionsEditBlock %}
A la derecha de la cabecera, permite realizar acciones sobre el contenido editado
7
Subcabecera
{% block subheaderBlock %}
Espacio reservado bajo la cabecera, normalmente para contener bloques de navegación
5
Acciones de subcabecera
{% block subheaderActions %}
Situado en la zona superior derecha, para realizar acciones sobre el contenido que visualizas
6
Título de subcabecera
{% block subheaderTitle %}
Situado bajo los bloques de navegación y acciones, muestra el título del contenido de la página
7
Menú de subcabecera
{% block subheaderMenu %}
Situado bajo el bloque de título de subcabecera, permite incluir un menú horizontal para navegar entre varios contenidos relacionados
4
8
Sección principal
main
Contenedor con anchura determinada con el contenido principal y otros bloques
5
9
Notificacion de cabecera
{% block notificationHeaderBlock %}
Situado al principio del contenido
Notificacion de pie de página
{% block notificationFooterBlock %}
Situado al final del contenido
6
10
Contenido
{% block contentBlock %}
Contenido principal
7
Notificación interior
{% block notificationInnerContentBlock %}
Se sitúa al principio del contenido interior
8
Contenido interior
{% block innerContentBlock %}
Contenido principal dentro de la sección interior
9
10
Menú lateral
{% block sidebarBlock %}
Barra lateral que ocupa el 25% de la anchura de la sección
11
Sección interior
section
Contenedor con anchura del 75% del ancho de la sección cuando la plantilla contiene el bloque de menú lateral. Muestra el contenido del item.
12
Notificación interior
{% block notificationInnerContentBlock %}
Se sitúa al principio del contenido interior
13
Contenido interior
{% block innerContentBlock %}
Contenido principal dentro de la sección interior
7
10
11
14
Pie de página
{% block footerBlock %}
Ocupa el ancho de la ventana para incluir el componente pie de página
8
11
12
15
Modal
{% block modalBlock %}
Zona reservada para ejecutar acciones una vez se carga la página
Haz click en el botón anterior para mostrar u ocultar
