Travel times 

<div class="travel-times" data-module="travelTimes" data-travel-time-api="/data/ti-app-board-settings.json">
    <div class="travel-times__text">
        <h3>Travel times</h3>
        <p>Tell us when you are going to be travelling Ireland, and we will show you tailored reccomendations for the duration of your trip.</p>
    </div>
    <div class="travel-times__image">
        <figure class="image js-image image--original-size " data-module="imagelazy" data-is-small-image="">
            <img class="image__lowres js-image-lazyload" data-src="/img/ui/img-calendar.png" alt="Different Alt Text">
            <picture class="image__container">
                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/img/ui/img-calendar.png" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/img/ui/img-calendar.png" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/img/ui/img-calendar.png" />
                <img class="js-image-lazyload js-fallback-image" data-src="" alt="Different Alt Text">
            </picture>
        </figure>
    </div>
    <div class="travel-times__list">
        <ul>
            <li>Tips for events happening during your stay</li>
            <li>Helpful travel reminders and updates</li>
        </ul>
    </div>
    <div class="travel-times__form">
        <div class="travel-times__form-row">
            <div class="travel-times__form-col travel-times__form-col--two-col">
                <label for="tripStartDate">Trip start date</label>
                <input type="date" id="tripStartDate" class="travel-times__input-date js-trip-input js-trip-start-date">
            </div>
            <div class="travel-times__form-col travel-times__form-col--two-col">
                <label for="tripEndDate">Trip end date</label>
                <input type="date" id="tripEndDate" class="travel-times__input-date js-trip-input js-trip-end-date">
            </div>
        </div>
        <div class="travel-times__form-row">
            <div class="travel-times__form-col">
                <a href="#" class="button-p1  js-trip-save " role="button">Save</a>
            </div>
        </div>
    </div>
    <div class="travel-times__modal js-travel-times-modal">
        <div class="travel-times__modal-inner">
            <a href="#" role="button" class="travel-times__close-modal js-close-travel-times-modal"><svg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
                    <path fill-rule='evenodd' clip-rule='evenodd' d='M4.94197 19.7071C4.55145 19.3166 4.55145 18.6834 4.94197 18.2929L18.9416 4.29331C19.3321 3.90278 19.9652 3.90278 20.3558 4.29331C20.7463 4.68383 20.7463 5.317 20.3558 5.70752L6.35618 19.7071C5.96566 20.0976 5.33249 20.0976 4.94197 19.7071Z' fill='#111317' />
                    <path fill-rule='evenodd' clip-rule='evenodd' d='M4.94182 4.29304C5.33234 3.90252 5.96551 3.90252 6.35603 4.29304L20.3556 18.2926C20.7461 18.6832 20.7461 19.3163 20.3556 19.7068C19.9651 20.0974 19.3319 20.0974 18.9414 19.7068L4.94182 5.70726C4.55129 5.31673 4.55129 4.68357 4.94182 4.29304Z' fill='#111317' />
                </svg></a>
            <div class="travel-times__modal-header">
                <svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'>
                    <path fill-rule='evenodd' clip-rule='evenodd' d='M30 7.5C31.4937 7.5 32.8739 8.29687 33.6207 9.59042L54.4399 45.6502C55.1867 46.9438 55.1867 48.5375 54.4399 49.8311C53.693 51.1247 52.3128 51.9215 50.8192 51.9215H9.18085C7.68718 51.9215 6.30696 51.1247 5.56013 49.8311C4.81329 48.5375 4.81329 46.9438 5.56013 45.6502L26.3793 9.59042C27.1261 8.29687 28.5063 7.5 30 7.5ZM30 11.6808L9.18085 47.7407H50.8192L30 11.6808ZM30.0034 36.7659C28.8489 36.7659 27.913 35.83 27.913 34.6755V24.2234C27.913 23.0689 28.8489 22.133 30.0034 22.133C31.1579 22.133 32.0939 23.0689 32.0939 24.2234L32.0939 34.6755C32.0939 35.83 31.1579 36.7659 30.0034 36.7659ZM30.0034 38.8564C28.8489 38.8564 27.913 39.7923 27.913 40.9468C27.913 42.1013 28.8489 43.0372 30.0034 43.0372C31.1579 43.0372 32.0939 42.1013 32.0939 40.9468C32.0939 39.7923 31.1579 38.8564 30.0034 38.8564Z' fill='#5FBD00' />
                </svg>
                <h2>You have unsaved changes. Save before leaving?</h2>
            </div>
            <div class="travel-times__buttons">
                <button class="button-p2 button-p2--full-width js-close-travel-times-modal">Don&#x27;t save</button>
                <button class="button-p1 button-p1--full-width js-save-travel-times-modal">Save</button>
            </div>
        </div>
    </div>
    <div class="overlay-feedback js-feedback">
        <span class="overlay-feedback__icon">
        </span>
        <span class="overlay-feedback__message"></span>
    </div>
</div>
 
<div class="travel-times" data-module="travelTimes" data-travel-time-api="{{appSettingsApi}}">
    <div class="travel-times__text">
        <h3>{{heading}}</h3>
        <p>{{description}}</p>
    </div>
    <div class="travel-times__image">
        {{> @cp-responsive-image calendarImage}}
    </div>
    <div class="travel-times__list">
        {{{listContent}}}
    </div>
    <div class="travel-times__form">
        <div class="travel-times__form-row">
            <div class="travel-times__form-col travel-times__form-col--two-col">
                <label for="tripStartDate">{{tripStartDateLabel}}</label>
                <input type="date" id="tripStartDate" class="travel-times__input-date js-trip-input js-trip-start-date">
            </div>
            <div class="travel-times__form-col travel-times__form-col--two-col">
                <label for="tripEndDate">{{tripEndDateLabel}}</label>
                <input type="date" id="tripEndDate" class="travel-times__input-date js-trip-input js-trip-end-date">
            </div>
        </div>
        <div class="travel-times__form-row">
            <div class="travel-times__form-col">
            {{> @cp-button-primary text=buttonText url="#" cssClasses="js-trip-save"}}
            </div>
        </div>
    </div>
    <div class="travel-times__modal js-travel-times-modal">
        <div class="travel-times__modal-inner">
            <a href="#" role="button" class="travel-times__close-modal js-close-travel-times-modal">{{{modalCloseIcon}}}</a>
            <div class="travel-times__modal-header">
                {{{modalWarningIcon}}}
                <h2>{{modalHeading}}</h2>
            </div>
            <div class="travel-times__buttons">
                <button class="button-p2 button-p2--full-width js-close-travel-times-modal">{{modalDontSaveButton}}</button>
                <button class="button-p1 button-p1--full-width js-save-travel-times-modal">{{modalSaveButton}}</button>
            </div>
        </div>
    </div>
    {{> @cp-overlay-feedback feedback=feedback}}
</div>
 
{
  "heading": "Travel times",
  "description": "Tell us when you are going to be travelling Ireland, and we will show you tailored reccomendations for the duration of your trip.",
  "listContent": "<ul><li>Tips for events happening during your stay</li><li>Helpful travel reminders and updates</li></ul>",
  "appSettingsApi": "/data/ti-app-board-settings.json",
  "calendarImage": {
    "altText": "Different Alt Text",
    "lowResolutionUrl": "/img/ui/img-calendar.png",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "/img/ui/img-calendar.png",
        "smallUrl": "/img/ui/img-calendar.png"
      }
    ]
  },
  "tripStartDateLabel": "Trip start date",
  "tripEndDateLabel": "Trip end date",
  "buttonText": "Save",
  "modalCloseIcon": "<svg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M4.94197 19.7071C4.55145 19.3166 4.55145 18.6834 4.94197 18.2929L18.9416 4.29331C19.3321 3.90278 19.9652 3.90278 20.3558 4.29331C20.7463 4.68383 20.7463 5.317 20.3558 5.70752L6.35618 19.7071C5.96566 20.0976 5.33249 20.0976 4.94197 19.7071Z' fill='#111317'/><path fill-rule='evenodd' clip-rule='evenodd' d='M4.94182 4.29304C5.33234 3.90252 5.96551 3.90252 6.35603 4.29304L20.3556 18.2926C20.7461 18.6832 20.7461 19.3163 20.3556 19.7068C19.9651 20.0974 19.3319 20.0974 18.9414 19.7068L4.94182 5.70726C4.55129 5.31673 4.55129 4.68357 4.94182 4.29304Z' fill='#111317'/></svg>",
  "modalWarningIcon": "<svg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M30 7.5C31.4937 7.5 32.8739 8.29687 33.6207 9.59042L54.4399 45.6502C55.1867 46.9438 55.1867 48.5375 54.4399 49.8311C53.693 51.1247 52.3128 51.9215 50.8192 51.9215H9.18085C7.68718 51.9215 6.30696 51.1247 5.56013 49.8311C4.81329 48.5375 4.81329 46.9438 5.56013 45.6502L26.3793 9.59042C27.1261 8.29687 28.5063 7.5 30 7.5ZM30 11.6808L9.18085 47.7407H50.8192L30 11.6808ZM30.0034 36.7659C28.8489 36.7659 27.913 35.83 27.913 34.6755V24.2234C27.913 23.0689 28.8489 22.133 30.0034 22.133C31.1579 22.133 32.0939 23.0689 32.0939 24.2234L32.0939 34.6755C32.0939 35.83 31.1579 36.7659 30.0034 36.7659ZM30.0034 38.8564C28.8489 38.8564 27.913 39.7923 27.913 40.9468C27.913 42.1013 28.8489 43.0372 30.0034 43.0372C31.1579 43.0372 32.0939 42.1013 32.0939 40.9468C32.0939 39.7923 31.1579 38.8564 30.0034 38.8564Z' fill='#5FBD00'/></svg>",
  "modalHeading": "You have unsaved changes. Save before leaving?",
  "modalDontSaveButton": "Don't save",
  "modalSaveButton": "Save"
}

There are no notes for this item.