<link media="all" rel="stylesheet" href="/assets/themes/default/css/header.css?cb=">
<header class="header" data-module="header">
<div class="header__inner js-header-inner">
<div class="header__mobile-navigation js-mobile-navigation">
<div class="header__mobile-navigation-inner">
<nav class="primary-navigation primary-navigation--mobile">
<ul class="primary-navigation__list">
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--has-children ">
<a href="#" class="primary-navigation__link ">
<span>Parent</span>
</a>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link primary-navigation__link--is-active">
<span>Working</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title"><a href="#">Text</a></div>
<p class="sub-navigation__text-text"><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.</a></p>
<a href="#" data-module="cta" class="cta sub-navigation__text-cta">
Primary Cta
</a>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<a href="#">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</a>
<a href="#" class="sub-navigation__image-link">Image Link</a>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Careers</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>News & Views</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Contact</span>
</a>
<div class="menu-toggle js-menu-toggle">
<span class="menu-toggle__horizontal-line"></span>
<span class="menu-toggle__vertical-line"></span>
</div>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
<nav class="header__mobile-quick-links">
<a href="#" class="header__quick-link">
Quick Link
</a>
<a href="#" class="header__quick-link">
<img src="https://via.placeholder.com/100X25" alt="">
</a>
</nav>
</div>
</div>
<nav class="header__top-navigation js-top-navigation">
<div class="grid-container">
<div class="grid-x header__top-navigation-row">
<a href="#" class="header__quick-link">
Quick Link
</a>
<a href="#" class="header__quick-link">
<img src="https://via.placeholder.com/100X25" alt="">
</a>
</div>
</div>
</nav>
<div class="grid-container">
<div class="grid-x header__navigation-row">
<div class="header__navigation-wrapper">
<div class="burger">
<label for="burger-nav"></label>
<input type="checkbox" id="burger-nav" class="js-burger-nav" name="burger-nav" />
<span></span>
<span></span>
<span></span>
</div>
<nav class="primary-navigation primary-navigation--desktop">
<ul class="primary-navigation__list">
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--has-children ">
<a href="#" class="primary-navigation__link ">
<span>Parent</span>
</a>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link primary-navigation__link--is-active">
<span>Working</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title"><a href="#">Text</a></div>
<p class="sub-navigation__text-text"><a href="#">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi.</a></p>
<a href="#" data-module="cta" class="cta sub-navigation__text-cta">
Primary Cta
</a>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<a href="#">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</a>
<a href="#" class="sub-navigation__image-link">Image Link</a>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Careers</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--image">
<div class="sub-navigation__image-wrapper">
<div class="sub-navigation__image-container">
<img src="https://via.placeholder.com/150x150" alt="Alt Text" loading="lazy" class="sub-navigation__image">
</div>
</div>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>News & Views</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="primary-navigation__list-item js-nav-list-item primary-navigation--is-dynamic">
<a href="#" class="primary-navigation__link ">
<span>Contact</span>
</a>
<div class="sub-navigation js-sub-navigation">
<div class="sub-navigation__inner js-sub-nav-inner">
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--text">
<div class="sub-navigation__col-title sub-navigation__text-title">Text</div>
<p class="sub-navigation__text-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, modi'</p>
</div>
<div class="sub-navigation__col sub-navigation__col--has-title sub-navigation__col--links">
<div class="sub-navigation__col-title sub-navigation__links-title">Links</div>
<ul class="sub-navigation__link-list">
<li class="sub-navigation__link"><a href="#">link one</a></li>
<li class="sub-navigation__link"><a href="#">link two</a></li>
<li class="sub-navigation__link"><a href="#">link three</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
<div class="cell site-logo__wrapper">
<a class="site-logo" href="/">
<span>Default</span>
<img src="/media/logo.svg" class="site-logo__image" alt="Default" />
</a>
</div>
</div>
</div>
</div>
</header>
<div class="header__spacer js-header-spacer"></div>
<link media="all" rel="stylesheet" href="/assets/themes/default/css/hero.css?cb=">
<div class="hero hero--home hero--with-image " data-module="hero">
<div class="hero__image ">
<picture>
<source media="(max-width: 840px)" type="" srcset="https://dummyimage.com/400x225/f0f0f0/545454.png" />
<source media="(min-width: 841px)" type="" srcset="https://dummyimage.com/800x450/f0f0f0/545454.png" />
<img src="https://dummyimage.com/800x450/f0f0f0/545454.png" alt="Image alt text">
</picture>
</div>
<div class="hero__content">
<div class="hero__content-inner">
<h1 class="hero__title">Hero Title</h1>
<p class="hero__subline">Competently recaptiualize professional convergence before tactical services. Compellingly fabricate go forward products with competitive customer service. Completely synthesize ethical initiatives before customized technology.</p>
<div class="hero__cta-container">
<a class="hero__cta js-hero-cta" href="#">CTA text</a>
</div>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="/assets/themes/default/css/grid-layout.css">
<div class="grid-layout">
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty">
</div>
<div class="cell medium-10 grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/section-header.css?cb=">
<div class="section-header">
<p class="section-header__eyebrow">Section Eyebrow text</p>
<h2 class="section-header__title">Section Header</h2>
<p class="section-header__subline">Section Header subline text lorem ipsum si descomado ipvarat</p>
</div>
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty">
</div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-2 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-8 align-center grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/richtext.css?cb=">
<div class="richtext"><span class='richtext__heading01'>Heading 1</span><span class='richtext__heading02'>Heading 2</span><span class='richtext__heading03'>Heading 3</span><span class='richtext__heading04'>Heading 4</span><span class='richtext__lead'>Lead</span><span class='richtext__heading02'>Paragraph</span>
<p>Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim.</p><span class='richtext__heading02'>Fine</span>
<p class='richtext__fine'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.tum fermentum.</p><span class='richtext__heading02'>Small</span>
<p class='richtext__small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum.</p><span class='richtext__heading02'>Extra small</span>
<p class='richtext__x-small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><span class='richtext__heading02'>Links</span>
<p><a href='#'>This is a text link</a></p><span class='richtext__heading02'>Lists</span>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
</div>
</div>
<div class="cell medium-2 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-5 grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/richtext.css?cb=">
<div class="richtext"><span class='richtext__heading01'>Heading 1</span><span class='richtext__heading02'>Heading 2</span><span class='richtext__heading03'>Heading 3</span><span class='richtext__heading04'>Heading 4</span><span class='richtext__lead'>Lead</span><span class='richtext__heading02'>Paragraph</span>
<p>Mauris nec nulla id sapien laoreet tempor. Aliquam vitae convallis purus, vel euismod nulla. Proin ut cursus odio, vel rutrum enim.</p><span class='richtext__heading02'>Fine</span>
<p class='richtext__fine'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.tum fermentum.</p><span class='richtext__heading02'>Small</span>
<p class='richtext__small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum efficitur velit condimentum fermentum.</p><span class='richtext__heading02'>Extra small</span>
<p class='richtext__x-small'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><span class='richtext__heading02'>Links</span>
<p><a href='#'>This is a text link</a></p><span class='richtext__heading02'>Lists</span>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
</div>
</div>
<div class="cell medium-5 grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="image ">
<figure>
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=95&width=640" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=100" />
<img src="https://qa.dartwebsites.com/media/a54e589a-ffbe-45b9-a25b-e15a1cb28893/adobestock125009636---web-crop.jpg?quality=100" loading="lazy" width="1920" height="824" alt="Image Alt Text">
</picture>
<figcaption class="image__caption">Image caption appears inside figcaption tag</figcaption>
</figure>
</div>
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-5 grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/youtube-video.css?cb=">
<div class="youtube-video">
<h2 class="youtube-video__title">Video title</h2>
<div class="youtube-video__iframe-wrapper youtube-video__iframe-wrapper--with-description">
<iframe class="youtube-video__iframe" loading="lazy" width="1600" height="900" src="https://www.youtube.com/embed/qApVnpPei9I" title="Video title"></iframe>
</div>
<p class="youtube-video__description">Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.</p>
</div>
</div>
<div class="cell medium-5 grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/mp4-video.css?cb=">
<div class="mp4-video mp4-video--with-description" data-module="video" data-autoplay="true" data-fullscreen="false">
<h2 class="mp4-video__title">Video title</h2>
<div class="mp4-video__video-container js-video-container">
<video data-module="video" class="video-player__video" playsinline preload="metadata" poster="https://via.placeholder.com/1600x900.png" loop autoplay muted data-poster-url="https://via.placeholder.com/1600x900.png">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="https://videos.pexels.com/video-files/33839224/14360680_1920_1080_30fps.mp4" type="video/mp4">
</video>
</div>
<p class="mp4-video__description">Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.</p>
</div>
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-5 grid-layout__cell">
<div class="map__container" data-module="map" data-marker-icon="/assets/themes//images/map-marker.png">
<div class="map js-map"></div>
<div class="map-item js-map-item" pin-order="">
<div class="map-item__title js-map-item-title">Title No 1</div>
<div class="map-item__description js-map-item-description">
<p>Here is the description for the <strong>pin</strong></p>
</div>
<div class="map-item__longitude js-map-item-longitude">-108.5006904</div>
<div class="map-item__latitude js-map-item-latitude">45.7832856</div>
</div>
<div class="map-item js-map-item" pin-order="">
<div class="map-item__title js-map-item-title">Title No 2</div>
<div class="map-item__description js-map-item-description">
<p>Here is the description for <em>second</em> the <strong>pin</strong></p>
</div>
<div class="map-item__longitude js-map-item-longitude">-107.5006904</div>
<div class="map-item__latitude js-map-item-latitude">45.7832856</div>
</div>
</div>
</div>
<div class="cell medium-5 grid-layout__cell">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/map.css?cb=">
<div class="map__container" data-module="map" data-marker-icon="/assets/themes/default/images/map-marker.png">
<div class="map js-map"></div>
<div class="map-item js-map-item" pin-order="">
<div class="map-item__title js-map-item-title">Title No 1</div>
<div class="map-item__description js-map-item-description">
<p>Here is the description for the <strong>pin</strong></p>
</div>
<div class="map-item__longitude js-map-item-longitude">-108.5006904</div>
<div class="map-item__latitude js-map-item-latitude">45.7832856</div>
</div>
<div class="map-item js-map-item" pin-order="">
<div class="map-item__title js-map-item-title">Title No 2</div>
<div class="map-item__description js-map-item-description">
<p>Here is the description for <em>second</em> the <strong>pin</strong></p>
</div>
<div class="map-item__longitude js-map-item-longitude">-107.5006904</div>
<div class="map-item__latitude js-map-item-latitude">45.7832856</div>
</div>
</div>
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/card-collection.css?cb=">
<div class="card-collection card-collection--3-cards card-collection--3-columns" data-module="cardCollection">
<div class="grid-container">
<div class="grid-x grid-padding-x card-collection__cards">
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--events js-card-wrapper">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/event-card.css?cb=">
<div class="event-default-card">
<a href="#">
<div class="event-defaul-card__image-wrapper">
<div class="event-default-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</div>
<div class="event-default-card__info">
<div class="event-default-card__date">
<p class="event-default-card__day">
2020-7-4
</p>
<p class="event-default-card__start-time">
10:00
</p>
<p class="event-default-card__end-time">
12:00
</p>
</div>
<p class="event-default-card__title">
Lorem Ipsum
</p>
<p class="event-default-card__location">
New York, USA
</p>
<p class="event-default-card__description">
</p>
</div>
<div class="event-default-card__footer">
<p class="event-default-card__cta">
<span class="secondary-cta">Click here</span>
</p>
<p class="event-default-card__price">
£31 pp
</p>
</div>
</a>
</div>
</div>
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--events js-card-wrapper">
<div class="event-default-card">
<a href="#">
<div class="event-defaul-card__image-wrapper">
<div class="event-default-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</div>
<div class="event-default-card__info">
<div class="event-default-card__date">
<p class="event-default-card__day">
2020-7-4
</p>
<p class="event-default-card__start-time">
10:00
</p>
<p class="event-default-card__end-time">
12:00
</p>
</div>
<p class="event-default-card__title">
Lorem Ipsum
</p>
<p class="event-default-card__location">
London, UK
</p>
<p class="event-default-card__description">
</p>
</div>
<div class="event-default-card__footer">
<p class="event-default-card__cta">
<span class="secondary-cta">Click here</span>
</p>
<p class="event-default-card__price">
£31 pp
</p>
</div>
</a>
</div>
</div>
<div class="cell card-collection__card-wrapper card-collection__card-wrapper--events js-card-wrapper">
<div class="event-default-card">
<a href="#">
<div class="event-defaul-card__image-wrapper">
<div class="event-default-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="Image alt text">
</picture>
</div>
</div>
<div class="event-default-card__info">
<div class="event-default-card__date">
<p class="event-default-card__day">
2020-7-4
</p>
<p class="event-default-card__start-time">
10:00
</p>
<p class="event-default-card__end-time">
12:00
</p>
</div>
<p class="event-default-card__title">
Lorem Ipsum
</p>
<p class="event-default-card__location">
Amsterdam, NT
</p>
<p class="event-default-card__description">
</p>
</div>
<div class="event-default-card__footer">
<p class="event-default-card__cta">
<span class="secondary-cta">Click here</span>
</p>
<p class="event-default-card__price">
£31 pp
</p>
</div>
</a>
</div>
</div>
</div>
<div class="card-collection__cta">
<link media="all" rel="stylesheet" href="/assets/themes//css/cta.css?cb=">
<a href="#" data-module="cta" class="cta primary-cta " role="button">
Button
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/statistics.css?cb=">
<div class="statistics component">
<div class="statistics__card-container">
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__title">
<h2>101</h2>
</div>
<div class="statistics-card__text">
<p>pretty dalmatians</p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__title">
<h2>2</h2>
</div>
<div class="statistics-card__text">
<p>metres of seperation at all times</p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__title">
<h2>4</h2>
</div>
<div class="statistics-card__text">
<p>corners of the earth</p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__title">
<h2>2</h2>
</div>
<div class="statistics-card__text">
<p>heads are better than one</p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__text">
<p>Sign up by clicking <a href='#'>here</a></p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__text">
<p>Give us a call on 01234 567890</p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__text">
<p>We're open all the time, we never, ever close ever!</p>
</div>
</div>
<div class="statistics-card">
<div class="statistics-card__icon">
<svg enable-background='new 0 0 443.294 443.294' height='512' viewBox='0 0 443.294 443.294' width='512' xmlns='http://www.w3.org/2000/svg'>
<path d='m221.647 0c-122.214 0-221.647 99.433-221.647 221.647s99.433 221.647 221.647 221.647 221.647-99.433 221.647-221.647-99.433-221.647-221.647-221.647zm0 415.588c-106.941 0-193.941-87-193.941-193.941s87-193.941 193.941-193.941 193.941 87 193.941 193.941-87 193.941-193.941 193.941z' />
<path d='m235.5 83.118h-27.706v144.265l87.176 87.176 19.589-19.589-79.059-79.059z' />
</svg>
</div>
<div class="statistics-card__text">
<p>To find out more click this <a href='#'>link</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link media="all" rel="stylesheet" href="/assets/themes/default/css/footer.css?cb=">
<footer class="site-footer " data-module="footer">
<div class="grid-container site-footer__container">
<div class="grid-x site-footer__content">
<div class="site-footer__nav-container">
<div class="site-footer__nav-columns">
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Component</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
About us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
What’s covered
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Here for you</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Support
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Contact us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Submit a claim
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Component</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
About us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
What’s covered
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Pricing
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
FAQs
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Here for you</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Support
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Contact us
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Submit a claim
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Component</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
About us
</a>
</li>
</ul>
</nav>
<nav class="site-footer__nav" role="navigation">
<h2 class="site-footer__links-title">
<a href="#">Here for you</a>
</h2>
<ul class="site-footer__list">
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Support
</a>
</li>
<li class="site-footer__item">
<a href="#" class="site-footer__link">
Contact us
</a>
</li>
</ul>
</nav>
</div>
<div class="site-footer__social-and-richtext-container">
<nav class="site-footer__social-links js-social-links">
<h2 class="site-footer__links-title">Follow us on social</h2>
<div class="site-footer__social-links-container">
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="facebook" rel="noopener">
<span class="icon-facebook"></span> <span class="text">Facebook</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="twitter" rel="noopener">
<span class="icon-twitter"></span> <span class="text">Twitter</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="instagram" rel="noopener">
<span class="icon-instagram"></span> <span class="text">Instagram</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="youtube" rel="noopener">
<span class="icon-youtube"></span> <span class="text">YouTube</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="pinterest" rel="noopener">
<span class="icon-pinterest"></span> <span class="text">Pinterest</span>
</a>
<a class="social-links__link js-social-link" href="#" target="_blank" data-type="tripadvisor" rel="noopener">
<span class="icon-tripadvisor"></span> <span class="text">TripAdvisor</span>
</a>
</div>
</nav>
<div class="site-footer__rich-text" role="complementary">
<h2 class="site-footer__links-title">richTextBlockTitle</h2>
<div class="site-footer__text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="site-footer__logo">
<a href="/" class="site-footer__logo--link" title="Default alt">
<img src="/media/logo.svg" alt="Default alt" loading="lazy" />
</a>
</div>
</div>
</div>
<div class="grid-container">
<div class="site-footer__footer">
<ul class="site-footer__hygiene-links">
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
Privacy Statement
</a>
</li>
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
Disclaimer
</a>
</li>
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
General Terms and Condition
</a>
</li>
<li class="site-footer__hygiene-link-item">
<a href="#" class="site-footer__hygiene-link">
Sitemap
</a>
</li>
</ul>
<div class="site-footer__copyright">
<p class="site-footer__copyright-text">Default 2019 ©</p>
<p class="site-footer__company-info-text">Site Name Address | Registered company No. 12345678</p>
</div>
</div>
</div>
</footer>
{{ render "@header" }}
{{ render "@hero-home" }}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/grid-layout.css">
<div class="grid-layout">
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty">
</div>
<div class="cell medium-10 grid-layout__cell">
{{ render "@section-header" }}
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty">
</div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-2 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-8 align-center grid-layout__cell">
{{ render "@rich-text" }}
</div>
<div class="cell medium-2 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-5 grid-layout__cell">
{{ render "@rich-text" }}
</div>
<div class="cell medium-5 grid-layout__cell">
{{ render "@image" }}
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-5 grid-layout__cell">
{{ render "@youtube-video" }}
</div>
<div class="cell medium-5 grid-layout__cell">
{{ render "@mp4-video" }}
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
<div class="cell medium-5 grid-layout__cell">
{{ render "@google-map" map1 }}
</div>
<div class="cell medium-5 grid-layout__cell">
{{ render "@google-map" }}
</div>
<div class="cell medium-1 grid-layout__cell grid-layout__cell--empty"></div>
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
{{ render "@card-collection--event-collection"}}
</div>
</div>
</div>
<div class="grid-layout__row">
<div class="grid-container">
<div class="grid-x grid-padding-x" data-direction="rtl">
{{ render "@statistics"}}
</div>
</div>
</div>
</div>
{{ render "@footer" }}
{
"theme": "default",
"firstInstance": true,
"map1": {
"locations": [
{
"title": "Title No 1",
"description": "<p>Here is the description for the <strong>pin</strong></p>",
"longitude": "-108.5006904",
"latitude": "45.7832856"
},
{
"title": "Title No 2",
"description": "<p>Here is the description for <em>second</em> the <strong>pin</strong></p>",
"longitude": "-107.5006904",
"latitude": "45.7832856"
}
]
},
"map2": {
"locations": [
{
"title": "Map 2 Title 1",
"description": "<p>Here is the description for the <strong>pin</strong></p>",
"longitude": "-108.5006904",
"latitude": "45.7832856"
},
{
"title": "Map 2 Title 2",
"description": "<p>Here is the description for <em>second</em> the <strong>pin</strong></p>",
"longitude": "-81.282721",
"latitude": "19.294047"
}
]
}
}
No notes defined.