Example layout for a “Woodland” detail page.
<header class="header">
<div class="header__container">
<div class="header__inner">
<h1 class="header__logo"><a href="page-homepage">Woodlands.co.uk</a></h1>
<div class="navigation">
<nav class="navigation__list">
<div class="form form--search form--search--simple">
<form action="/search" method="post">
<div class="form__inner">
<div class="form__field">
<label for="form__search_location" class="form__label"><span>Location</span></label>
<input type="text" class="form-input" id="form__search_location" name="location" placeholder="Enter location / postcode" />
</div>
<button class="button button--red button--inline ">
<span>Search</span>
</button>
</div>
</form>
</div>
<ul>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-buy">Buy</a>
<ul>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-buy">Woodlands for sale</a>
<ul>
<li class="navigation__item ">
<a href="#">Search for woods</a>
</li>
<li class="navigation__item ">
<a href="#">South East England</a>
</li>
<li class="navigation__item ">
<a href="#">Northern England</a>
</li>
<li class="navigation__item ">
<a href="#">Cumbria</a>
</li>
<li class="navigation__item ">
<a href="#">Central England</a>
</li>
<li class="navigation__item ">
<a href="#">East Anglia</a>
</li>
<li class="navigation__item ">
<a href="#">Devon</a>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-buy">Buying a wood</a>
<ul>
<li class="navigation__item ">
<a href="#">Why buy a wood?</a>
</li>
<li class="navigation__item ">
<a href="#">How to buy a woodland</a>
</li>
<li class="navigation__item ">
<a href="#">How we support owners</a>
</li>
<li class="navigation__item ">
<a href="#">Legal guide</a>
</li>
<li class="navigation__item ">
<a href="#">Finance guide</a>
</li>
<li class="navigation__item ">
<a href="#">Our covenant</a>
</li>
<li class="navigation__item ">
<a href="#">Recommended solicitors</a>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--has-sub ">
<button>Other land for sale</button>
<ul>
<li class="navigation__item ">
<a href="#">Tree planting land</a>
</li>
<li class="navigation__item ">
<a href="#">Lakes and rivers</a>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-sell">Sell your wood</a>
<ul>
<li class="navigation__item ">
<a href="#">Sell your wood to us</a>
</li>
<li class="navigation__item ">
<a href="#">Selling your wood through us</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-owning">Owning a wood</a>
<ul>
<li class="navigation__item ">
<a href="#">Planning legislation</a>
</li>
<li class="navigation__item ">
<a href="#">Trees & regulations</a>
</li>
<li class="navigation__item ">
<a href="#">Access & tracks</a>
</li>
<li class="navigation__item ">
<a href="#">Management insurance</a>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-videos-guides">Videos & guides</a>
<ul>
<li class="navigation__item ">
<a href="#">Woodlands TV</a>
</li>
<li class="navigation__item ">
<a href="#">Woodland activities</a>
</li>
<li class="navigation__item ">
<a href="#">Practical guides</a>
</li>
<li class="navigation__item ">
<a href="#">What do people do?</a>
</li>
<li class="navigation__item ">
<a href="#">Looking after your wood</a>
</li>
<li class="navigation__item ">
<a href="#">Tree identification</a>
</li>
<li class="navigation__item ">
<a href="#">Wildlife identification</a>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--has-sub ">
<a href="page-about">About us</a>
<ul>
<li class="navigation__item ">
<a href="#">Our team</a>
</li>
<li class="navigation__item ">
<a href="#">Press room</a>
</li>
<li class="navigation__item ">
<a href="#">Our research</a>
</li>
<li class="navigation__item ">
<a href="#">Contact us</a>
</li>
<li class="navigation__item ">
<a href="#">Meet us at woodfairs</a>
</li>
<li class="navigation__item ">
<a href="#">Community woodlands</a>
</li>
<li class="navigation__item ">
<a href="#">Woodland awards</a>
</li>
</ul>
</li>
<li class="navigation__item navigation__item--search"><a href="page-search" class="js--navigation-search">Search Woods</a></li>
</ul>
</nav>
<button class="hamburger hamburger--squeeze navigation__button js--navigation" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
</div>
<div class="form form--search form--search--alt" data-search="Show Search Filters">
<form action="/search" method="post">
<div class="form__inner">
<h4 class="form--search__title">Search for woodlands</h4>
<div class="form__field">
<label for="form__search_location" class="form__label"><span>Location</span></label>
<input type="text" class="form-input" id="form__search_location" name="location" placeholder="Enter location / postcode" />
</div>
<div class="form__field">
<label for="form__search_type" class="form__label"><span>Type</span></label>
<select class="form-select" id="form__search_type" name="type">
<option value="woodland">Woodland</option>
<option value="mixed deciduous">Mixed Deciduous</option>
<option value="coniferous">Coniferous</option>
<option value="coppice">Coppice</option>
<option value="ancient woodland">Ancient Woodland</option>
</select>
</div>
<div class="form__field form__field--switch form__field--switch--reverse">
<input type="checkbox" class="form-checkbox" id="form__search_sold" name="sold" />
<label for="form__search_sold" class="form__label"><i></i><span>Show Sold</span></label>
</div>
<button class="button button--red button--inline ">
<span>Search</span>
</button>
</div>
</form>
<button class="button button--green--dark button--full button--toggle ">
<span>Show search filters</span>
</button>
</div>
</header>
<main>
<section class="section section--bg-yellow section--short ">
<div class="section__inner">
<div class="hero">
<h1>Ea Aperiam Voluptatem <span class="hero__extra">£81,596</span></h1>
</div>
</div>
</section>
<section class="section section--shadow section--short ">
<div class="section__inner">
<div class="intro">
<ul class="list list--unstyled">
<li class="intro__item ">
<span>NR. Myrtis Place, Lake Othochester, Cambridgeshire</span>
</li>
<li class="intro__item ">
<span>About 3 ¼ acres</span>
</li>
<li class="intro__item ">
<span>2.6 miles away</span>
</li>
<li class="intro__item intro__item--link ">
<a href="#">Region Link</a>
</li>
</ul>
</div>
</div>
</section>
<section class="section section--bg-white pt-4">
<div class="section__inner">
<section id="" class="grid grid--2/3 grid--spaced grid--divider grid--woodland">
<div class="grid__inner">
<div class="grid__item grid__item--secondary">
<template id="photoswipe">
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<div class="pswp__bg"></div>
<div class="pswp__scroll-wrap">
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</template>
<div class="gallery gallery--carousel">
<ul class="gallery__list">
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Libero eos cum.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Natus perspiciatis ducimus quo cumque tenetur sed amet.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Eveniet explicabo in neque unde ea officiis rerum.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Voluptates nulla commodi et esse.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Provident ea rem et exercitationem qui corrupti.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Consequatur voluptatibus ad quia.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Perspiciatis quis expedita expedita non vero.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Mollitia eveniet soluta dolorum architecto illo ut voluptas.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Sed vel ea sunt quia.</p>
</li>
<li class="gallery__item" data-src="http://picsum.photos/1156/650" data-video="" data-width="1156" data-height="650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/1156/650" alt="" title="" />
</div>
</div>
<p class="gallery__description">Sunt libero voluptatem.</p>
</li>
<li class="gallery__item" data-src="http://www.youtube.com/embed/dP15zlyra3c?html5=1" data-video="http://www.youtube.com/embed/dP15zlyra3c?html5=1&enablejsapi=1" data-width="" data-height="">
<div class="media">
<div class="media__content">
<iframe src="http://www.youtube.com/embed/dP15zlyra3c?html5=1&enablejsapi=1"></iframe>
</div>
</div>
</li>
</ul>
<ul class="gallery__thumbnails">
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://picsum.photos/1156/650">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
<li class="gallery__item">
<a href="http://www.youtube.com/embed/dP15zlyra3c?html5=1">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="tab tab--2/3 tab--spaced tab--divider tab--woodland" data-tab="">
<div class="tab__navigation button-group">
<button class="button button--small button--inline button--green button--green--outline" data-tab-for=description>
<span>Description</span>
</button>
<button class="button button--small button--inline button--green button--green--outline" data-tab-for=maps>
<span>Maps</span>
</button>
<button class="button button--small button--inline button--green button--green--outline" data-tab-for=directions>
<span>Directions</span>
</button>
</div>
<div class="tab__items">
<div class="tab__item tab__item--description" data-tab-item="description">
<h3 class="tab__item__title">Description</h3>
Description
</div>
<div class="tab__item tab__item--maps" data-tab-item="maps">
<h3 class="tab__item__title">Maps</h3>
Maps
</div>
<div class="tab__item tab__item--directions" data-tab-item="directions">
<h3 class="tab__item__title">Directions</h3>
Directions
</div>
</div>
</div>
<section class="section section--bg-yellow ">
<div class="section__inner">
<div class="cta">
<h2 class="cta__title">Call to Action Listing</h2>
<div class="cta__items">
<div class="cta__item">
<h3 class="cta__item__title">quis alias qui</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">cum assumenda ipsam</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">doloremque ducimus dolores</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">sit non omnis</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="grid__item grid__item--primary">
<div class="sticky">
<div class="lede">
<p>Consequatur fuga et fuga doloremque blanditiis rerum cupiditate sit atque. Sint quas officiis. Neque necessitatibus et officiis itaque fugit ut aut. Enim vitae iste rerum ut. Ad eum et cupiditate. Quia reiciendis sapiente est ab repellat quas unde.</p>
</div>
<button class="button button--green" data-modal-open="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7">
<span>Visit this woodland</span>
</button>
<a href="#" class="button button--green--dark ">
<span>Download PDF Details</span>
</a>
<div class="managed-by">
<div class="managed-by__person">
<h3 class="managed-by__title">
Managed by <strong>Mrs. Kirsten Rowe</strong>
</h3>
<div class="managed-by__avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/javorszky/128.jpg" alt="Mrs. Kirsten Rowe" title="" />
</div>
</div>
<p class="managed-by__contact">Telephone: <a href="tel:(486) 438-6615 x62264">(486) 438-6615 x62264</a></p>
<p class="managed-by__contact">Email: <a href="mailto:Freddie.Funk@example.com">Freddie.Funk@example.com</a></p>
</div>
</div>
</div>
</div>
</section>
<div class="modal modal--small" aria-hidden="true" id="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7">
<div class="modal__container" data-modal-close="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--6880707c-e92d-48b1-b9f6-c23efbb62aa7">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--6880707c-e92d-48b1-b9f6-c23efbb62aa7">Visit ea aperiam voluptatem</h2>
<button type="button" data-modal-close="modal-6880707c-e92d-48b1-b9f6-c23efbb62aa7" aria-label="Close Modal">×</button>
</header>
<div class="modal__content text-center">
<p>Eveniet minus est sed repellendus perspiciatis facere aliquid rerum. Et culpa qui blanditiis et tempora. Quae sit officia molestiae est ab voluptatem. Quia iusto earum veritatis quis accusantium. Vel quibusdam nisi fugit aspernatur.
Consequuntur modi qui velit qui aut. Quo atque et odio error quis sint. Quidem dolore facilis aut voluptas ipsam dolorem odit. Qui similique nemo error. Doloremque qui non porro quam quos mollitia ut qui quaerat.</p>
<button class="button button--green ">
<span>Download PDF Details</span>
</button>
<button class="button button--green--dark ">
<span>Print PDF Details</span>
</button>
<p>Aut reiciendis esse voluptatibus soluta doloribus distinctio culpa. Et ex odit. Dolores vero in vero placeat.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section section--bg-gray ">
<div class="section__inner">
<h2 class="section__title">Other woodlands for sale</h2>
<section id="8a8b9c30-9b77-47dc-b356-0f7e2bf32782" class="grid">
<div class="grid__inner">
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Ipsa Sint Magnam</h3>
<p class="card__meta">NR. Jaqueline Valleys, Torpmouth, Cambridgeshire</p>
<div class="card__content">
Provident qui impedit perferendis optio quae minima aut eaque aut. Ea ipsum perferendis vel iusto pariatur facilis repellat. Eius sapiente quasi culpa quam soluta qui sit corporis et. Saepe dolor quisquam.
</div>
</div>
<div class="card__banner">
£34,319
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Optio Voluptatem Ut</h3>
<p class="card__meta">NR. Jackeline Isle, Port Sadie, Bedfordshire</p>
<div class="card__content">
Consequuntur dicta qui quam vel doloribus. Eos autem porro blanditiis ipsa voluptates repellendus aliquam. Quaerat alias id corrupti praesentium et. Provident animi adipisci eaque voluptas ipsam inventore alias alias.
</div>
</div>
<div class="card__banner">
£13,028
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">In Laudantium Est</h3>
<p class="card__meta">NR. Crawford Crest, Thielside, Bedfordshire</p>
<div class="card__content">
Non odio odit sit officiis fugit unde. Ipsam explicabo et. Et velit magnam et dignissimos recusandae recusandae eaque occaecati. Qui omnis consequuntur corporis quo et sit eligendi. Dolor architecto fuga omnis nihil blanditiis. Qui laudantium quis corporis suscipit necessitatibus ipsa nesciunt rerum.
</div>
</div>
<div class="card__banner">
£95,398
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Velit Autem At</h3>
<p class="card__meta">NR. Stoltenberg Corners, North Saulbury, Borders</p>
<div class="card__content">
Et voluptas quod. Cumque sint omnis consequatur. Natus voluptatem ullam totam. Quam aut praesentium quidem. Dolor ut id sunt voluptatum laborum quas nihil id aut. Veniam et accusantium.
</div>
</div>
<div class="card__banner">
£83,100
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Tempora Corrupti Esse</h3>
<p class="card__meta">NR. Ritchie Drive, North Baby, Avon</p>
<div class="card__content">
Ut quo debitis sint et. Numquam laboriosam nihil nesciunt aliquam ipsam aut quisquam. Sunt voluptates porro. Velit ut aut et minus mollitia.
</div>
</div>
<div class="card__banner">
£8,929
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Labore Non Consequatur</h3>
<p class="card__meta">NR. Swift Locks, Osinskiville, Avon</p>
<div class="card__content">
Ab atque culpa ut sunt nisi. Voluptas quia sit delectus alias delectus. Quia iusto aut. Repellat quidem nihil sit.
</div>
</div>
<div class="card__banner">
£39,362
</div>
</a>
</div>
</div>
</section>
<button class="button button--inline button--green button--green--outline button--transparent ">
<span>See more woodlands for sale</span>
</button>
</div>
</section>
<section class="section section--bg-green ">
<div class="section__inner">
<form action="" method="GET" class="form form--cta">
<div class="form--cta__container">
<label for="form--cta__field-id" class="form__label form__title">Subscribe to email updates</label>
<label for="form--cta__field-id" class="form__subtitle">Get an email when new woods come on to the market</label>
<div class="form__group">
<input type="text" id="form--cta__field-id" name="field" placeholder="Enter email address…" />
<button class="button button--green ">
<span>Sign up to mailing list</span>
</button>
</div>
</div>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="footer__inner">
<div class="listing listing--social">
<ul>
<li class="social social--medium social--instagram">
<a href="https://instagram.com" rel="external" title="Instagram">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Instagram icon</title>
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
</svg>
</a>
</li>
<li class="social social--medium social--youtube">
<a href="https://youtube.com" rel="external" title="YouTube">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<title>YouTube icon</title>
<path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" />
</svg>
</a>
</li>
<li class="social social--medium social--facebook">
<a href="https://www.facebook.com" rel="external" title="Facebook">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<title>Facebook icon</title>
<path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" />
</svg>
</a>
</li>
</ul>
</div>
<nav class="footer__navigation">
<ul>
<li class="footer__navigation__section">
<a href="page-buy">Buying a wood</a>
</li>
<li><a href="#">Why buy a wood?</a></li>
<li><a href="#">How to buy a woodland</a></li>
<li><a href="#">How we support owners</a></li>
<li><a href="#">Legal guide</a></li>
<li><a href="#">Finance guide</a></li>
<li><a href="#">Our covenant</a></li>
<li><a href="#">Recommended solicitors</a></li>
<li class="footer__navigation__section">
<a href="page-sell">Sell your wood</a>
</li>
<li><a href="#">Sell your wood to us</a></li>
<li><a href="#">Selling your wood through us</a></li>
<li class="footer__navigation__section">
<a href="page-owning">Owning a wood</a>
</li>
<li><a href="#">Planning legislation</a></li>
<li><a href="#">Trees & regulations</a></li>
<li><a href="#">Access & tracks</a></li>
<li><a href="#">Management insurance</a></li>
<li class="footer__navigation__section">
<a href="page-videos-guides">Videos & guides</a>
</li>
<li><a href="#">Woodlands TV</a></li>
<li><a href="#">Woodland activities</a></li>
<li><a href="#">Practical guides</a></li>
<li><a href="#">What do people do?</a></li>
<li><a href="#">Looking after your wood</a></li>
<li><a href="#">Tree identification</a></li>
<li><a href="#">Wildlife identification</a></li>
<li class="footer__navigation__section">
<a href="page-about">About us</a>
</li>
<li><a href="#">Our team</a></li>
<li><a href="#">Press room</a></li>
<li><a href="#">Our research</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Meet us at woodfairs</a></li>
<li><a href="#">Community woodlands</a></li>
<li><a href="#">Woodland awards</a></li>
</ul>
</nav>
<p class="footer__org">Woodlands.co.uk</p>
<p class="footer__copyright">Copyright © 2023</p>
<p class="footer__text">Woodland Investment Management Ltd</p>
<ul class="footer__links">
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</footer>
{{ render '@layout-header' header merge=true }}
<main>
{{#> @section modifiers='bg-yellow,short' }}
{{ render '@block--hero--woodland' hero }}
{{/ @section }}
{{#> @section modifiers='shadow,short' }}
{{ render '@block--intro' intro }}
{{/ @section }}
{{#> @section modifiers='bg-white' classes="pt-4" }}
{{ render '@components--woodland' woodland merge=true }}
{{/ @section }}
{{#> @section modifiers="bg-gray" }}
{{ render '@components--cards' woodlands merge=true }}
{{ render '@button' woodlands merge=true }}
{{/ @section }}
{{#> @section modifiers='bg-green' }}
{{ render '@block--cta-form--subscribe' }}
{{/ @section }}
</main>
{{ render '@layout-footer' }}