Bloques en plantillas
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
| Nombre del bloque | Código Nunjucks | Descripción | |
|---|---|---|---|
| Spinner de página | {% block pageSpinnerBlock %} |
Oculto detrás del contenido | |
| Cabecera | {% block headerBlock %} |
Ocupa el ancho de la ventana para incluir el componente cabecera | |
| Skip-link | {% block skipLinkBlock %} |
Ocupa el ancho de la ventana para incluir el componente de salto al contido principal necesario para accesibilidad | |
| 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 | |
| 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 | |
| Acciones de cabecera de edición | {% block headerActionsEditBlock %} |
A la derecha de la cabecera, permite realizar acciones sobre el contenido editado | |
| Subcabecera | {% block subheaderBlock %} |
Espacio reservado bajo la cabecera, normalmente para contener bloques de navegación | |
| Navegación de subcabecera | {% block subheaderNavigation %} |
Situado en la zona superior izquierda, para navegar a páginas anteriores | |
| Acciones de subcabecera | {% block subheaderActions %} |
Situado en la zona superior derecha, para realizar acciones sobre el contenido que visualizas | |
| 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 | |
| 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 | |
| Sección principal | main |
Contenedor con anchura determinada con el contenido principal y otros bloques | |
| Notificacion de cabecera | {% block notificationHeaderBlock %} |
Situado al principio del contenido | |
| Notificacion de pie de página | {% block notificationFooterBlock %} |
Situado al final del contenido | |
| Menú lateral | {% block sidebarBlock %} |
Barra lateral que ocupa el 25% de la anchura de la sección | |
| Contenido | {% block contentBlock %} |
Contenido principal | |
| 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. | |
| Notificación interior | {% block notificationInnerContentBlock %} |
Se sitúa al principio del contenido interior | |
| Contenido interior | {% block innerContentBlock %} |
Contenido principal dentro de la sección interior | |
| Pie de página | {% block footerBlock %} |
Ocupa el ancho de la ventana para incluir el componente pie de página | |
| Modal | {% block modalBlock %} |
Zona reservada para ejecutar acciones una vez se carga la página |