<div class="newsletter-tout" data-module="newsletterTout">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
<div class="newsletter-tout__icon-wrapper">
<div class="newsletter-tout__icon js-icon-newsletter is-visible"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<path d='M4.143 5A2.154 2.154 0 002 7.143v9.524c0 1.174.968 2.142 2.143 2.142h15.714A2.154 2.154 0 0022 16.668V7.143A2.154 2.154 0 0019.857 5H4.143zm.156 1.429h15.41l-7.27 6.488c-.277.247-.585.247-.863 0L4.299 6.429zm-.87 1.138l4.895 4.367-4.895 4.703v-9.07zm17.142 0v9.063l-4.88-4.703 4.88-4.36zm-5.952 5.32l4.665 4.494H4.716l4.68-4.487 1.227 1.094c.78.696 1.988.697 2.768 0l1.228-1.101z' />
</svg></div>
<div class="newsletter-tout__icon js-icon-success"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
<path fill-rule='evenodd' clip-rule='evenodd' d='M20.71 3.295a1 1 0 01-.005 1.414l-13.077 13a1 1 0 01-1.41 0l-3.923-3.9a1 1 0 011.41-1.418l3.218 3.199 12.372-12.3a1 1 0 011.414.005z' />
<path fill-rule='evenodd' clip-rule='evenodd' d='M18.59 2.582a2 2 0 112.82 2.836l-13.077 13a2 2 0 01-2.82 0l-3.923-3.9a2 2 0 01-.008-2.828l.709.705-.71-.705a2 2 0 012.829-.008l2.513 2.498L18.59 2.582zM6.923 17l.705-.7a1 1 0 01-1.41 0l.705.7z' />
</svg></div>
</div>
<div class="newsletter-tout__inner js-inner">
<div class="grid-container">
<div class="grid-x">
<div class="newsletter-tout__content cell medium-10 medium-offset-1 large-8 large-offset-2">
<h3 class="newsletter-tout__title">Header - H3</h3>
<p class="newsletter-tout__subtitle">Body copy - Card description</p>
<div class="newsletter-form" data-module="newsletterForm" data-api-endpoint="http://ti-dev-web.hugoandcat.dev/api/sitecore/customform/subscribe" data-news-letter-signup="" data-preload="">
<h3 class="newsletter-form__title"></h3>
<p class="newsletter-form__subtitle"></p>
<form class="newsletter-form__form js-newsletter-form" action="" method="GET">
<label class="newsletter-form__label" for="title"></label>
<div class="newsletter-form__group">
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="first_name">First name</label>
<input class="newsletter-form__input js-newsletter-first-name-input" type="text" id="first_name" name="first_name" autocomplete="off" placeholder="First name" pattern="[A-Za-z0-9 ,.]+" title="Please avoid using special characters except for period and comma." required />
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">This is your name, the first bit, like 'James' in 'James Bond'</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="last_name">Last name</label>
<input class="newsletter-form__input js-newsletter-surname-input" type="text" id="last_name" name="last_name" autocomplete="off" placeholder="Last name" pattern="[A-Za-z0-9 ,.]+" title="Please avoid using special characters except for period and comma." required />
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">This is your last name, the last bit, like 'Twotts' in 'Felicity Twotts'</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
</div>
<div class="newsletter-form__group">
<div class="newsletter-form__input-group">
<label class="newsletter-form__label" for="email">Email address</label>
<input class="newsletter-form__input js-newsletter-email-input" type="text" id="email" name="email" autocomplete="off" placeholder="Email address" pattern="[^<>]*" title="Please avoid using > or < symbols in details." required />
<div class="tooltip" data-module="tooltip">
<div class="tooltip__inner">
<div class="tooltip__icon tooltip__icon--info tooltip__toggle"></div>
</div>
<div class="tooltip__tooltip ">
<p class="tooltip__tooltip-content">This is like a postal address but its for posting Electronic messages. The future is here and it might actually save the trees!</p>
<div class="tooltip__icon tooltip__icon--close tooltip__close"></div>
</div>
</div>
</div>
</div>
<label class="newsletter-form__label" for="email"></label>
<input class="newsletter-form__inputemail2 js-newsletter-inputemail2" type="email" id="email2" name="email2" autocomplete="do-not-autocomplete-asdflaskd" placeholder="" />
<p class="newsletter-form__message newsletter-form__message--error js-newsletter-error"><span class="newsletter-form__icon"></span></p>
<p class="newsletter-form__message newsletter-form__message--error js-newsletter-api-error"><span class="newsletter-form__icon"></span>Something went wrong...</p>
<p class="newsletter-form__message newsletter-form__message--success js-newsletter-success"><span class="newsletter-form__icon"></span>Success! Thank you for subscribing to our newsletter.</p>
<div class="newsletter-form__group newsletter-form__checkboxes">
<div class="newsletter-form__input-group newsletter-form__checkbox-group">
<input type="checkbox" id="agree" value="" class="newsletter-form__checkbox input-checkbox is-default js-newsletter-checkbox-input" required>
<label class="newsletter-form__disclaimer" for="agree">
<div class="richtext ">
<p>I understand that by signing up, I will receive personalised email content based on my use of Tourism Ireland’s website, emails and Tourism Ireland’s advertising on other websites, cookies and tracking pixels. You can unsubscribe at any time by clicking 'unsubscribe' in our emails. Find our more information on “How we handle your personal data” in our <a href='#'>privacy terms</a>.</p>
</div>
</label>
</div>
<div class="newsletter-form__input-group newsletter-form__checkbox-group">
<input type="checkbox" id="third-party-sign-up" value="false" class="newsletter-form__checkbox input-checkbox is-default js-third-party-sign-up">
<label class="newsletter-form__disclaimer" for="third-party-sign-up">
<div class="richtext ">
<p>I would like to receive information and special offers by email from carefully selected travel partners. For more information please see our <a href='#'>privacy policy</a>.</p>
</div>
</label>
</div>
</div>
<button class="button-p1 button-p1--with-icon newsletter-form__button js-newsletter-submit" disabled>Subscribe</button>
</form>
</div>
<div class="richtext ">
<p>For more information on how we handle personal data please read our <a href='#'>Privacy Policy</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="newsletter-tout" data-module="newsletterTout">
{{#if backgroundResponsiveImage}}
{{> @cp-medium-image backgroundResponsiveImage}}
{{/if}}
<div class="newsletter-tout__icon-wrapper">
{{#if iconNewsletter}}
<div class="newsletter-tout__icon js-icon-newsletter is-visible">{{{iconNewsletter}}}</div>
{{/if}}
{{#if iconSuccess}}
<div class="newsletter-tout__icon js-icon-success">{{{iconSuccess}}}</div>
{{/if}}
</div>
<div class="newsletter-tout__inner js-inner">
<div class="grid-container">
<div class="grid-x">
<div class="newsletter-tout__content cell medium-10 medium-offset-1 large-8 large-offset-2">
<h3 class="newsletter-tout__title">{{title}}</h3>
{{#if subtitle}}
<p class="newsletter-tout__subtitle">{{subtitle}}</p>
{{/if}}
{{#if newsletter}}
{{> @cp-newsletter-form newsletter}}
{{/if}}
{{#if richText}}
{{> "@cp-text-richtext" richText}}
{{/if}}
</div>
</div>
</div>
</div>
</div>
{
"title": "Header - H3",
"subtitle": "Body copy - Card description",
"iconNewsletter": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4.143 5A2.154 2.154 0 002 7.143v9.524c0 1.174.968 2.142 2.143 2.142h15.714A2.154 2.154 0 0022 16.668V7.143A2.154 2.154 0 0019.857 5H4.143zm.156 1.429h15.41l-7.27 6.488c-.277.247-.585.247-.863 0L4.299 6.429zm-.87 1.138l4.895 4.367-4.895 4.703v-9.07zm17.142 0v9.063l-4.88-4.703 4.88-4.36zm-5.952 5.32l4.665 4.494H4.716l4.68-4.487 1.227 1.094c.78.696 1.988.697 2.768 0l1.228-1.101z' /></svg>",
"iconSuccess": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' clip-rule='evenodd' d='M20.71 3.295a1 1 0 01-.005 1.414l-13.077 13a1 1 0 01-1.41 0l-3.923-3.9a1 1 0 011.41-1.418l3.218 3.199 12.372-12.3a1 1 0 011.414.005z' /><path fill-rule='evenodd' clip-rule='evenodd' d='M18.59 2.582a2 2 0 112.82 2.836l-13.077 13a2 2 0 01-2.82 0l-3.923-3.9a2 2 0 01-.008-2.828l.709.705-.71-.705a2 2 0 012.829-.008l2.513 2.498L18.59 2.582zM6.923 17l.705-.7a1 1 0 01-1.41 0l.705.7z'/></svg>",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
},
"newsletter": {
"disclaimerText": {
"content": "<p>I understand that by signing up, I will receive personalised email content based on my use of Tourism Ireland’s website, emails and Tourism Ireland’s advertising on other websites, cookies and tracking pixels. You can unsubscribe at any time by clicking 'unsubscribe' in our emails. Find our more information on “How we handle your personal data” in our <a href='#'>privacy terms</a>.</p>"
},
"thirdPartySignUp": {
"content": "<p>I would like to receive information and special offers by email from carefully selected travel partners. For more information please see our <a href='#'>privacy policy</a>.</p>"
},
"form": {
"apiEndpoint": "http://ti-dev-web.hugoandcat.dev/api/sitecore/customform/subscribe",
"firstNamePlaceholderText": "First name",
"firstNameToolTip": {
"content": "This is your name, the first bit, like 'James' in 'James Bond'"
},
"surnamePlaceholderText": "Last name",
"surnameToolTip": {
"content": "This is your last name, the last bit, like 'Twotts' in 'Felicity Twotts'"
},
"emailPlaceholderText": "Email address",
"emailToolTip": {
"content": "This is like a postal address but its for posting Electronic messages. The future is here and it might actually save the trees!"
},
"emailErrorMessage": "Email format incorrect",
"requiredErrorMessage": "Fields can not be blank",
"apiErrorMessage": "Something went wrong...",
"successMessage": "Success! Thank you for subscribing to our newsletter.",
"button": {
"text": "Subscribe",
"url": "#"
}
}
},
"richText": {
"content": "<p>For more information on how we handle personal data please read our <a href='#'>Privacy Policy</a>.</p>"
}
}
There are no notes for this item.