DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Notificaciones

Avisos

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Notification

Por defecto

Este componente se suele mostrar con un componente Alert, que incluye un contenedor con los atributos role="alert" y aria-live="assertive".

Descripción visual

Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene texto negro en peso normal alineado a la izquierda. Encabezado gris oscuro "por defecto" aparece fuera de la caja arriba.

El documento se ha cargado correctamente

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "El documento se ha cargado correctamente"
  },
  "id": "default"
}) }}

Por defecto con html

Descripción visual

Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene texto negro donde una porción específica aparece en color azul oscuro y peso negrita. Encabezado gris oscuro "por defecto con html" aparece fuera de la caja arriba.

Las entidades beneficiarias deberán tener su sede y actividad principal en Aragón.

Mostrar códigodel ejemplo: Por defecto con html

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "html": "Las <a href=' # ' class=' c-link '>entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón."
  },
  "id": "default-with-html"
}) }}

Con description

Descripción visual

Caja rectangular con fondo blanco y borde azul oscuro de 2-3px. Contiene dos líneas de texto negro en peso normal alineado a la izquierda, donde la primera línea es ligeramente prominente y la segunda línea es texto secundario de menor tamaño. Encabezado gris oscuro "con description" aparece fuera de la caja arriba.

El documento se ha cargado correctamente

Documento acreditativo de registro de alta de la asociación puede verse publicado ya.

Mostrar códigodel ejemplo: Con description

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "html": "El documento se ha cargado correctamente"
  },
  "description": {
    "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
  },
  "id": "with-description"
}) }}

Con content

Descripción visual

Notificación con fondo azul claro, borde azul oscuro de 2px, y padding generoso. Contiene un título en texto negro negrita y un párrafo descriptivo en texto gris oscuro de tamaño regular. El componente ocupa todo el ancho disponible con bordes redondeados sutiles.

El documento se ha cargado correctamente

Documento acreditativo de registro de alta de la asociación puede verse publicado ya.

Mostrar códigodel ejemplo: Con content

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "html": "El documento se ha cargado correctamente"
  },
  "content": {
    "html": "<p>Documento acreditativo de <em class=\" italic \">registro de alta de la asociación</em> puede verse publicado ya.</p>"
  },
  "id": "with-content"
}) }}

Con items

Descripción visual

Notificación con fondo blanco, borde azul oscuro de 2px en la sección interior, y título "Problemas encontrados" en texto negro negrita. Lista de tres enlaces en texto azul subrayado apilados verticalmente. El componente tiene padding amplio y bordes redondeados.

Problemas encontrados

Mostrar códigodel ejemplo: Con items

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Problemas encontrados"
  },
  "items": [
    {
      "text": "Campo Nombre de la empresa está vacío",
      "href": "#empresa"
    },
    {
      "text": "Campo Fecha de inicio de la actividad está vacío",
      "href": "#actividad"
    },
    {
      "text": "El formato de correo electrónico es incorrecto",
      "href": "#email"
    }
  ],
  "id": "with-items"
}) }}

Con tipo: éxito

Descripción visual

Notificación rectangular con fondo verde muy claro, borde verde oscuro de 2px, e ícono de checkmark verde a la izquierda. Texto en negro de peso regular alineado horizontalmente con el ícono. El componente ocupa todo el ancho con padding uniforme y bordes redondeados sutiles.

El documento se ha cargado correctamente

Mostrar códigodel ejemplo: Con tipo: éxito

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "El documento se ha cargado correctamente"
  },
  "type": "success",
  "id": "type-success"
}) }}

Con tipo: alerta

Descripción visual

Notificación con fondo rosa claro, borde rojo de 2px, e icono de alerta rojo a la izquierda. Contiene título en negrita negro y tres enlaces en rojo subrayado apilados verticalmente. Formato rectangular de ancho completo con padding generoso.

Problemas encontrados

Mostrar códigodel ejemplo: Con tipo: alerta

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Problemas encontrados"
  },
  "items": [
    {
      "text": "Campo Nombre de la empresa está vacío",
      "href": "#empresa"
    },
    {
      "text": "Campo Fecha de inicio de la actividad está vacío",
      "href": "#actividad"
    },
    {
      "text": "El formato de correo electrónico es incorrecto",
      "href": "#email"
    }
  ],
  "type": "alert",
  "id": "type-alert"
}) }}

Con tipo: info

Descripción visual

Notificación con fondo azul celeste claro, borde azul oscuro de 2px, e icono de información azul a la izquierda. Incluye texto en negrita negro y enlace azul subrayado en línea siguiente. Formato rectangular de ancho completo con padding interno.

ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas.

Mostrar códigodel ejemplo: Con tipo: info

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas."
  },
  "description": {
    "html": "<a class=' c-link text-sm ' href=' # '>Pedir cita previa</a> "
  },
  "type": "info",
  "id": "type-info"
}) }}

Con botón de cerrar

Usa el parámetro 'isDismissible': true

Descripción visual

Notificación con fondo blanco, borde azul oscuro de 2px, sin icono lateral. Presenta bloque de texto negro alineado a la izquierda y botón X gris en esquina superior derecha para cerrar. Formato rectangular de ancho completo con padding interno uniforme.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea.

Mostrar códigodel ejemplo: Con botón de cerrar

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
  },
  "isDismissible": true,
  "id": "with-close-button"
}) }}

Cerrar la notificación con javascript

Puedes usar con javascript la función global closeItemNotification(element), para cerrar la notificación. Ej: Abre la consola del navegador y escribe closeItemNotification('with-close-button-js') para cerrar la notificación. Es necesario usar el parámetro 'isDismissible': true

Descripción visual

Notificación con fondo azul celeste claro, borde azul oscuro de 2-3px, conteniendo texto negro en párrafo. Incluye botón de cierre "×" en la esquina superior derecha de color gris oscuro.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea.

Mostrar códigodel ejemplo: Cerrar la notificación con javascript

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut distinctio error non, reiciendis repudiandae reprehenderit minima quia laboriosam voluptate, quo veniam expedita possimus ex nam consequuntur autem eveniet, saepe ea."
  },
  "isDismissible": true,
  "id": "with-close-button-js"
}) }}

Con icono personalizado y clases

Descripción visual

Notificación con fondo blanco, borde azul oscuro de 2-3px a la izquierda, conteniendo icono de alerta triangular negro. Texto principal en negro con enlace azul subrayado, ambos alineados horizontalmente junto al icono.

Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA

Mostrar códigodel ejemplo: Con icono personalizado y clases

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "title": {
    "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
  },
  "description": {
    "html": "<a class=' c-link break-all ' href=' # '>Lista de admitidos (PDF, 20Kb)</a> "
  },
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor'/></svg>"
  },
  "id": "with-custom-icon",
  "classes": "border-neutral-dark bg-neutral-lighter"
}) }}

Con encabezado

Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. En este ejemplo: 'headingLevel': 3 creará un encabezado <h3>. Recuerda que tras el encabezado debe ir una descripción ya que, por accesibilidad, un encabezado no puede estar solo sin que tras él haya algún texto.

Descripción visual

Notificación con fondo blanco, borde azul oscuro de 2-3px en todo el perímetro, conteniendo encabezado en texto negro en negrita. Línea de texto adicional en negro regular debajo del encabezado, layout vertical.

Esto es un título con h3

Y esto es una descripción necesaria tras el encabezado

Mostrar códigodel ejemplo: Con encabezado

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "headingLevel": 3,
  "title": {
    "text": "Esto es un título con h3"
  },
  "description": {
    "text": "Y esto es una descripción necesaria tras el encabezado"
  },
  "id": "headinglevel"
}) }}

Con parámetros mixtos

Descripción visual

Notification box con borde azul de 2px, fondo azul muy claro, y contenido estructurado en múltiples líneas. El header incluye un icono de información circular azul a la izquierda, texto de título en negro(peso normal) , y botón de cierre "×" en la esquina superior derecha. El cuerpo contiene texto descriptivo en negro seguido de tres enlaces en azul subrayado dispuestos verticalmente.

No olvide adjuntar el registro de alta de la asociación

Necesitará el documento acreditativo de registro de alta de la asociación

Mostrar códigodel ejemplo: Con parámetros mixtos

Contenido

Nunjucks macro
{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "headingLevel": 3,
  "title": {
    "text": "No olvide adjuntar el registro de alta de la asociación",
    "classes": "font-bold"
  },
  "description": {
    "text": "Necesitará el documento acreditativo de registro de alta de la asociación"
  },
  "items": [
    {
      "text": "Desde modelo",
      "href": "#"
    },
    {
      "text": "Obligatorio previo a resolución",
      "href": "#"
    },
    {
      "text": "Condicionado",
      "href": "#"
    }
  ],
  "type": "info",
  "isDismissible": true,
  "id": "with-mixed-params"
}) }}