Modal examples

Show params

Params

params:
- name: title
  type: object
  required: true
  description: This is the 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 item title.
- 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.
- name: description
  type: object
  required: true
  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 item description.
- name: itemsPrimary
  type: array
  required: false
  description: This is a list of primary action buttons (see button component params) placed left side from secondary items or centered if are alone.
- name: itemsSecondary
  type: array
  required: false
  description: This is a list of secondary action buttons (see button component params) placed right side from primary items or centered if are alone.
- 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 icon types are `discard`, `delete`, `edit`, `changes` and `publish`
- name: isDismissible
  type: boolean
  required: false
  description: If `true`, the modal 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.
- 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.
- name: caller
  type: nunjucks-block
  required: false
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.

default

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "default-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "classes": "c-button--primary"
    }
  ],
  "isDismissible": true
})  }}

Markup



<!-- modal -->
<div id="default-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
    <h2      id="label-default-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Aviso</h2>
    <p class="c-p my-base text-center">
        Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  De acuerdo, continuar
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with headingLevel 3

Esto es un h3

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "headinglevel-example",
  "title": {
    "text": "Esto es un h3"
  },
  "headingLevel": 3,
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "classes": "c-button--primary"
    }
  ],
  "isDismissible": true
})  }}

Markup



<!-- modal -->
<div id="headinglevel-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
    <h3      id="label-headinglevel-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Esto es un h3</h3>
    <p class="c-p my-base text-center">
        Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  De acuerdo, continuar
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with secondary action

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "secondary-action-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Editar servicio",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true
})  }}

Markup



<!-- modal -->
<div id="secondary-action-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
    <h2      id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Editar servicio publicado</h2>
    <div class="c-paragraph-base my-base text-center">
        <p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>
    </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Editar servicio
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with caller

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Para más información, ir a la Página de ayuda

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/modal/_macro.modal.njk" import componentModal %}
{% call componentModal({
  "id": "caller-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Editar servicio",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "caller": "<div class=\"prose max-w-auto mx-auto\"><p class=\"text-center text-sm\">Para más información, ir a la <a href=\"#\">Página de ayuda</a></p></div>"
})  %}
    <div class="prose max-w-auto mx-auto"><p class="text-center text-sm">Para más información, ir a la <a href="#">Página de ayuda</a></p></div>
{% endcall %}

Markup



<!-- modal -->
<div id="caller-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
    <h2      id="label-caller-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Editar servicio publicado</h2>
    <div class="c-paragraph-base my-base text-center">
        <p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>
    </div>
    <div class="p-base">
      <div class="prose max-w-auto mx-auto"><p class="text-center text-sm">Para más información, ir a la <a href="#">Página de ayuda</a></p></div>
    </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Editar servicio
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with many actions

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "many-actions-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "Guardar cambios y publicar",
      "classes": "c-button--primary"
    },
    {
      "text": "Guardar cambios"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Más información",
      "classes": "c-button--transparent"
    },
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "classes": "max-w-4xl"
})  }}

Markup



<!-- modal -->
<div id="many-actions-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white max-w-4xl">
    <h2      id="label-many-actions-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Aviso</h2>
    <p class="c-p my-base text-center">
        Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <ul class="flex flex-wrap gap-sm">
            <li>
              

<!-- button --><button class="c-button c-button--primary" >
  Guardar cambios y publicar
</button><!-- /button -->
            </li>
            <li>
              

<!-- button --><button class="c-button" >
  Guardar cambios
</button><!-- /button -->
            </li>
        </ul>
        <ul class="flex flex-wrap gap-sm">
            <li>
              

<!-- button --><button class="c-button c-button--transparent" >
  Más información
</button><!-- /button -->
            </li>
            <li>
              

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
            </li>
        </ul>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with icon type delete

Borrar servicio

Esta acción no se puede deshacer ¿Estás seguro?

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-A-example",
  "title": {
    "text": "Borrar servicio"
  },
  "description": {
    "text": "Esta acción no se puede deshacer ¿Estás seguro?"
  },
  "itemsPrimary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Si, borrar servicio",
      "classes": "c-button--alert"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "delete"
  }
})  }}

Markup



<!-- modal -->
<div id="icon-type-A-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <div class="flex justify-center p-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M100.625 122.5h-61.25a8.75 8.75 0 01-8.75-8.75V35h78.75v78.75a8.75 8.75 0 01-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 00-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 00-8.75-8.75z" stroke-width="8.749995"/></g></svg>
  </div>
    <h2      id="label-icon-type-A-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Borrar servicio</h2>
    <p class="c-p my-base text-center">
        Esta acción no se puede deshacer ¿Estás seguro?
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--alert" >
  Si, borrar servicio
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with icon type discard

Descartar cambios

Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-B-example",
  "title": {
    "text": "Descartar cambios"
  },
  "description": {
    "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
  },
  "itemsPrimary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Si, descartar cambios",
      "classes": "c-button--alert"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "discard"
  }
})  }}

Markup



<!-- modal -->
<div id="icon-type-B-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <div class="flex justify-center p-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-alert-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0zM23.596 116.404l92.808-92.808" stroke-width="8.749995"/></g></svg>
  </div>
    <h2      id="label-icon-type-B-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Descartar cambios</h2>
    <p class="c-p my-base text-center">
        Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--alert" >
  Si, descartar cambios
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with icon type changes

Hay cambios sin guardar

Si sales de la pantalla de edición sin guardar, perderás los cambios realizados.

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-C-example",
  "title": {
    "text": "Hay cambios sin guardar"
  },
  "description": {
    "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
  },
  "itemsPrimary": [
    {
      "text": "Guardar y salir",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Descartar cambios y salir"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "changes"
  }
})  }}

Markup



<!-- modal -->
<div id="icon-type-C-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <div class="flex justify-center p-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M107.112 40.833a48.125 48.125 0 00-85.237 30.608v13.142M35 104.463a48.125 48.125 0 0083.125-33.022v-8.75" stroke-width="8.749995"/><path d="M4.375 67.066l17.5 17.5 17.5-17.5M135.625 80.19l-17.5-17.5-17.5 17.5" stroke-width="8.749995"/></g></svg>
  </div>
    <h2      id="label-icon-type-C-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Hay cambios sin guardar</h2>
    <p class="c-p my-base text-center">
        Si sales de la pantalla de edición sin guardar, perderás los cambios realizados.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Guardar y salir
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Descartar cambios y salir
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with icon type edit

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-D-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Lo sé, quiero editarlo",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "edit"
  }
})  }}

Markup



<!-- modal -->
<div id="icon-type-D-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <div class="flex justify-center p-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M73.89 82.46l-21.652 3.098 3.091-21.66 55.685-55.685a13.125 13.125 0 0118.562 18.562z" stroke-width="8.749995"/><path d="M111.545 83.125v43.75a8.75 8.75 0 01-8.75 8.75h-87.5a8.75 8.75 0 01-8.75-8.75v-87.5a8.75 8.75 0 018.75-8.75h43.75" stroke-width="8.749995"/></g></svg>
  </div>
    <h2      id="label-icon-type-D-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Editar servicio publicado</h2>
    <div class="c-paragraph-base my-base text-center">
        <p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>
    </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Lo sé, quiero editarlo
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with icon type publish

Publicar

Se van a publicar todos los elementos de este servicio que están pendientes de publicación.

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-E-example",
  "title": {
    "text": "Publicar"
  },
  "description": {
    "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
  },
  "itemsPrimary": [
    {
      "text": "Publicar",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "publish"
  }
})  }}

Markup



<!-- modal -->
<div id="icon-type-E-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <div class="flex justify-center p-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" focusable="false" aria-hidden="true" role="presentation"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M16.094 91.17a9.707 9.707 0 01-5.145-17.938L118.767 5.833a9.7 9.7 0 0114.676 10.034l-21 111.842a9.707 9.707 0 01-17.301 4.031L64.75 91.17z" stroke-width="8.749995"/><path d="M64.75 91.17H50.167v30.163a9.7 9.7 0 0015.166 8.015l18.539-12.635zM64.744 91.17l64.633-85.11" stroke-width="8.749995"/></g></svg>
  </div>
    <h2      id="label-icon-type-E-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Publicar</h2>
    <p class="c-p my-base text-center">
        Se van a publicar todos los elementos de este servicio que están pendientes de publicación.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Publicar
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

with custom icon

¿Estás seguro de querer cambiar de estado a múltiples archivos?

Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.

Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso no cierres la ventana del navegador ni naveges a otra página en esta pestaña.

¿Estás seguro de iniciar el proceso ahora?

Show code

Macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "custom-icon-example",
  "title": {
    "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
    "classes": "c-h2 mt-base focus:outline-none focus:underline"
  },
  "description": {
    "html": "<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
    "classes": "mb-lg text-left"
  },
  "itemsPrimary": [
    {
      "text": "Si, comenzar proceso",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"block w-16 h-16 text-primary-light\" aria-label=\"Pregunta\" focusable=\"false\"><g fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M52.5 52.5a17.5 17.5 0 1123.333 16.503A8.75 8.75 0 0070 77.257v5.868M70 100.625a2.188 2.188 0 102.188 2.188A2.188 2.188 0 0070 100.624h0\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"8.749995\"/><path d=\"M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0z\" stroke-miterlimit=\"10\" stroke-width=\"8.749995\"/></g></svg>"
  }
})  }}

Markup



<!-- modal -->
<div id="custom-icon-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white">
  <div class="flex justify-center p-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="block w-16 h-16 text-primary-light" aria-label="Pregunta" focusable="false"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M52.5 52.5a17.5 17.5 0 1123.333 16.503A8.75 8.75 0 0070 77.257v5.868M70 100.625a2.188 2.188 0 102.188 2.188A2.188 2.188 0 0070 100.624h0" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.749995"/><path d="M4.375 70a65.625 65.625 0 10131.25 0 65.625 65.625 0 10-131.25 0z" stroke-miterlimit="10" stroke-width="8.749995"/></g></svg>
  </div>
    <h2      id="label-custom-icon-example" class="c-h2 mt-base focus:outline-none focus:underline" tabindex="-1"
>¿Estás seguro de querer cambiar de estado a múltiples archivos?</h2>
    <div class="mb-lg text-left">
        <p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>
    </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Si, comenzar proceso
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button" >
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->