Notification examples

Show params

Params

params:
- name: headingLevel
  type: number
  required: false
  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on. If no headingLevel is present the title will be a p tag.
- name: title
  type: object
  required: true
  description: This is the title. It's a h4 that can have text or html inside. Has tabindex=-1 and an id, that is the same as notification id with the -title suffix, to receive focus programatically.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the notification title.
- name: description
  type: object
  required: false
  description: This is the optional description under title
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML to use within the title. If `html` is provided, the `text` argument will be ignored.
  - name: classes
    type: string
    required: false
    description: Classes to add to the notification description.
- name: items
  type: array
  required: false
  description: This is a list of anchors. Can be used as errors links.
  - name: href
    type: string
    required: false
    description: Href attribute for the link item. If provided item will be an anchor.
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for the link item. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for the link item. If `html` is provided, the `text` argument will be ignored.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the link anchor.
- name: icon
  type: object
  required: false
  description: This is the optional icon at left
  - name: html
    type: string
    required: false
    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
- name: type
  type: string
  required: false
  description: Predefined notification types are `success`, `alert`, `info`
- name: isDismissible
  type: boolean
  required: false
  description: If true, the notification shows a close icon on top right to close it.
- name: id
  type: string
  required: true
  description: Required id attribute to add to the div container tag and to generate the title id.
- name: classes
  type: string
  required: false
  description: Classes to add to the div container tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the div container tag.

default

El documento se ha cargado correctamente

Show code

Macro

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

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="default" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="default-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>El documento se ha cargado correctamente</p>
    </div>
  </div>
</div>
<!-- /notification -->

default with html

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

Show code

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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="default-with-html" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="default-with-html-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>Las <a href=" # " class=" c-link ">entidades beneficiarias</a> deberán tener su sede y actividad principal en Aragón.</p>
    </div>
  </div>
</div>
<!-- /notification -->

with description

El documento se ha cargado correctamente

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

Show code

Macro

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

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="with-description" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="with-description-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>El documento se ha cargado correctamente</p>
        <p>
            Documento acreditativo de <em class=" italic ">registro de alta de la asociación</em> puede verse publicado ya.
        </p>
    </div>
  </div>
</div>
<!-- /notification -->

with items

Show code

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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="with-items" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="with-items-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>Problemas encontrados</p>
        <ul>
            <li>
              <a href="#empresa" class="c-link ">Campo Nombre de la empresa está vacío</a>
            </li>
            <li>
              <a href="#actividad" class="c-link ">Campo Fecha de inicio de la actividad está vacío</a>
            </li>
            <li>
              <a href="#email" class="c-link ">El formato de correo electrónico es incorrecto</a>
            </li>
        </ul>
    </div>
  </div>
</div>
<!-- /notification -->

with type success

El documento se ha cargado correctamente

Show code

Macro

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

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="type-success" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="type-success-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>El documento se ha cargado correctamente</p>
    </div>
  </div>
</div>
<!-- /notification -->

with type alert

Show code

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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="type-alert" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><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>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="type-alert-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>Problemas encontrados</p>
        <ul>
            <li>
              <a href="#empresa" class="c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
            </li>
            <li>
              <a href="#actividad" class="c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
            </li>
            <li>
              <a href="#email" class="c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
            </li>
        </ul>
    </div>
  </div>
</div>
<!-- /notification -->

with type info

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

Pedir cita previa

Show code

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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="type-info" class="c-notification c-notification--primary">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-primary-base" aria-label="Información" focusable="false" role="img"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="type-info-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>ATENCIÓN: Debido a la situación por Covid-19, pide cita previa para acudir a una de nuestras oficinas.</p>
        <p>
            <a class=" c-link text-sm " href=" # ">Pedir cita previa</a> 
        </p>
    </div>
  </div>
</div>
<!-- /notification -->

with close button

isDismissible: true

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.

Show code

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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="with-close-button" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="with-close-button-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>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.</p>
    </div>
      <div class="absolute top-0 right-0 p-sm">
        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
        </button>
      </div>
  </div>
</div>
<!-- /notification -->

with custom icon and class

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

http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf

Show code

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=\" # \">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</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-warning-base bg-warning-light"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="with-custom-icon" class="c-notification border-warning-base bg-warning-light">
  <div class="h-full mr-base">
    <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>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="with-custom-icon-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA</p>
        <p>
            <a class=" c-link break-all " href=" # ">http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> 
        </p>
    </div>
  </div>
</div>
<!-- /notification -->

with headingLevel 3

Esto es un título con h3

Show code

Macro

{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "headingLevel": 3,
  "title": {
    "text": "Esto es un título con h3"
  },
  "id": "headinglevel"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="headinglevel" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <h3          id="headinglevel-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>Esto es un título con h3</h3>
    </div>
  </div>
</div>
<!-- /notification -->

default with html

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

Show code

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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="default-with-html" class="c-notification c-notification--primary">
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="default-with-html-title"  class="font-bold pr-base focus:outline-none focus:underline" tabindex="-1"
>Las <a href=" # " class=" c-link ">entidades beneficiarias</a> deberán tener: su sede y actividad principal en Aragón.</p>
    </div>
  </div>
</div>
<!-- /notification -->

with mixed params

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

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

Show code

Macro

{% from "components/notification/_macro.notification.njk" import componentNotification %}
{{ componentNotification({
  "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"
})  }}

Markup

<!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="with-mixed-params" class="c-notification c-notification--primary">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-primary-base" aria-label="Información" focusable="false" role="img"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="with-mixed-params-title"  class="font-bold pr-base focus:outline-none focus:underline font-bold" tabindex="-1"
>No olvide adjuntar el registro de alta de la asociación</p>
        <p>
            Necesitará el documento acreditativo de registro de alta de la asociación
        </p>
        <ul>
            <li>
              <a href="#" class="c-link ">Desde modelo</a>
            </li>
            <li>
              <a href="#" class="c-link ">Obligatorio previo a resolución</a>
            </li>
            <li>
              <a href="#" class="c-link ">Condicionado</a>
            </li>
        </ul>
    </div>
      <div class="absolute top-0 right-0 p-sm">
        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
        </button>
      </div>
  </div>
</div>
<!-- /notification -->