Modal

Default modal - close btn top/right

Zavřít

Modal content

Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.

        {% set modal_props = {
  id: "defaultModal",
  title: "Modal title"
} %}


{% include "@Components/button/button.twig" with { props:
  {
    attributes: ['data-target="' ~ modal_props.id ~ '"', 'data-toggle="modal"'],
    title: "Open modal",
    tag: "button"
  }
} %}

{% embed "@Components/modal/modal.twig" with { props: modal_props } %}

  {% block content %}
    <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
  {% endblock %}

{% endembed %}

          

<button class="btn --conversion" data-target="defaultModal" data-toggle="modal">    <span class="btn__title">Open modal</span>
  
  </button>

  


<div data-modal tabindex="-1" role="dialog" aria-labelledby="Modal title" aria-hidden="true" class="base-modal" id="defaultModal">
      <div class="base-modal__close-out" data-modal-close="defaultModal">
      <div class="base-modal__close-out-image">
        <span class="icon --white">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>
      </div>
      <div class="base-modal__close-out-text">
        Zavřít
      </div>
    </div>
    <div class="base-modal__box ">
        <div class="base-modal__content">
          <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
      </div>
  </div>
</div>

Default modal - close btn in box

Modal content

Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.

        {% set modal_props = {
  id: "defaultModalInnerClose",
  title: "Modal title",
  size: "md",
  close_inner: true,
  button: {
    title: "Open modal",
    tag: "button"
  }

} %}

{% embed "@Components/modal/modal.twig" with { props: modal_props } %}

  {% block content %}
    <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
  {% endblock %}

{% endembed %}

          
  


<div data-modal tabindex="-1" role="dialog" aria-labelledby="Modal title" aria-hidden="true" class="base-modal" id="defaultModalInnerClose">
    <div class="base-modal__box --md">
          <div class="base-modal__close-in" data-modal-close="defaultModalInnerClose">
        <span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>
      </div>
        <div class="base-modal__content">
          <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
      </div>
  </div>
</div>

Modal SM

Zavřít

Modal content

Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.

        {% set modal_props = {
  id: "defaultModalSM",
  title: "Modal title",
  size: "sm",
  button: {
    title: "Open modal",
    tag: "button"
  }

} %}

{% embed "@Components/modal/modal.twig" with { props: modal_props } %}

  {% block content %}
    <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
  {% endblock %}

{% endembed %}

          
  


<div data-modal tabindex="-1" role="dialog" aria-labelledby="Modal title" aria-hidden="true" class="base-modal" id="defaultModalSM">
      <div class="base-modal__close-out" data-modal-close="defaultModalSM">
      <div class="base-modal__close-out-image">
        <span class="icon --white">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>
      </div>
      <div class="base-modal__close-out-text">
        Zavřít
      </div>
    </div>
    <div class="base-modal__box --sm">
        <div class="base-modal__content">
          <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
      </div>
  </div>
</div>

Modal LG

Zavřít

Modal content

Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.

        {% set modal_props = {
  id: "defaultModalLg",
  title: "Modal title",
  size: "lg",
  button: {
    title: "Open modal",
    tag: "button"
  }

} %}

{% embed "@Components/modal/modal.twig" with { props: modal_props } %}

  {% block content %}
    <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
  {% endblock %}

{% endembed %}

          
  


<div data-modal tabindex="-1" role="dialog" aria-labelledby="Modal title" aria-hidden="true" class="base-modal" id="defaultModalLg">
      <div class="base-modal__close-out" data-modal-close="defaultModalLg">
      <div class="base-modal__close-out-image">
        <span class="icon --white">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>
      </div>
      <div class="base-modal__close-out-text">
        Zavřít
      </div>
    </div>
    <div class="base-modal__box --lg">
        <div class="base-modal__content">
          <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
      </div>
  </div>
</div>

Default - link "a"

Zavřít

Modal content

Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.

        {% set modal_props = {
  id: "defaultModalA",
  title: "Modal title",
  button: {
    title: "Open modal",
    tag: "a"
  }

} %}

{% embed "@Components/modal/modal.twig" with { props: modal_props } %}

  {% block content %}
    <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
  {% endblock %}

{% endembed %}

          
  


<div data-modal tabindex="-1" role="dialog" aria-labelledby="Modal title" aria-hidden="true" class="base-modal" id="defaultModalA">
      <div class="base-modal__close-out" data-modal-close="defaultModalA">
      <div class="base-modal__close-out-image">
        <span class="icon --white">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>
      </div>
      <div class="base-modal__close-out-text">
        Zavřít
      </div>
    </div>
    <div class="base-modal__box ">
        <div class="base-modal__content">
          <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
      </div>
  </div>
</div>

Custom close btn text

Vlastní text pro zavření modalu

Modal content

Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.

        {% set modal_props = {
  id: "defaultModalCloseText",
  title: "Modal title",
  size: "md",
  close_btn_text: "Vlastní text pro zavření modalu",
  button: {
    title: "Open modal",
    tag: "button"
  }

} %}

{% embed "@Components/modal/modal.twig" with { props: modal_props } %}

  {% block content %}
    <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
  {% endblock %}

{% endembed %}

          
  


<div data-modal tabindex="-1" role="dialog" aria-labelledby="Modal title" aria-hidden="true" class="base-modal" id="defaultModalCloseText">
      <div class="base-modal__close-out" data-modal-close="defaultModalCloseText">
      <div class="base-modal__close-out-image">
        <span class="icon --white">
  <svg xmlns="http://www.w3.org/2000/svg" width="13.121" height="13.121" viewBox="0 0 13.121 13.121">
  <g id="Group_2504" data-name="Group 2504" transform="translate(-341.001 -473.036)">
    <line id="Line_281" data-name="Line 281" x2="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
    <line id="Line_282" data-name="Line 282" x1="11" y2="11" transform="translate(342.062 474.097)" fill="none" stroke="#0062ab" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
  </g>
</svg>

  </span>
      </div>
      <div class="base-modal__close-out-text">
        Vlastní text pro zavření modalu
      </div>
    </div>
    <div class="base-modal__box --md">
        <div class="base-modal__content">
          <h2>Modal content</h2>
    <div>Thought shower. Unlock meaningful moments of relaxation roll back strategy we need to think big start small and scale fast to energize our clients or bench mark copy and paste from stack overflow and my capacity is full action item. On this journey powerPointless hard stop mumbo jumbo take five, punch the tree, and come back in here with a clear head. How much bandwidth do you have a tentative event rundown is attached for your reference, including other happenings on the day you are most welcome to join us beforehand for a light lunch we would also like to invite you to other activities on the day, including the interim and closing panel discussions on the intersection of businesses and social innovation, and on building a stronger social innovation eco-system respectively the last person we talked to said this would be ready and let's unpack that later and strategic fit, for increase the resolution, scale it up we need a larger print circle back. Staff engagement scope creep.</div>
      </div>
  </div>
</div>

Schema

    {
  "props": {
    "id": {
      "type": "string",
      "description": "Uniqe id of modal"
    },
    "title": {
      "type": "string",
      "description": "Title for accesibility"
    },
    "size": {
      "type": "string",
      "description": "sm | md (default) | lg"
    },
    "close_inner": {
      "type": "boolean",
      "description": "Set the posisiton of the close button | default false"
    },
    "close_btn_text": {
      "type": "string",
      "description": "Custom text for close button | default: 'Zavřít'"
    },
    "button": {
      "type": "object",
      "description": "Inherited from 'Core - Button'",
      "tag": {
        "type": "string",
        "description": "a | button | span"
      },
      "title": {
        "type": "string",
        "description": "Title for button"
      }
    }
  }
}