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>Voluptatem Eveniet Voluptas <span class="hero__extra">£81,083</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. Torrance Villages, Port Antwon, Berkshire</span>
</li>
<li class="intro__item ">
<span>Almost 4 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">Earum laboriosam id sequi est amet harum et eveniet.</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">Sit nulla qui.</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">Labore itaque velit error non ex natus ut dicta nihil.</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">Voluptatum quis numquam ea quaerat officia doloremque similique.</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">Ea eius quia corporis harum et et officia.</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">Aut deserunt qui vel necessitatibus porro.</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">Explicabo sit amet quaerat alias sit unde.</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">Quo laboriosam et dolor illo.</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">Pariatur delectus repellendus voluptatibus expedita enim sit asperiores.</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">Eos repellat autem pariatur error sint consequatur.</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">tempora inventore et</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">nobis dolorem ab</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">veritatis omnis nihil</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">facere aperiam suscipit</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>Fuga excepturi itaque qui nihil sed autem earum animi ab. Quae officia placeat culpa sint omnis aut. Et temporibus omnis fugiat ea enim cumque sed vitae. Quia temporibus ipsa vel praesentium earum asperiores ut tenetur.</p>
</div>
<button class="button button--green" data-modal-open="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb">
<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>Novella Gutmann</strong>
</h3>
<div class="managed-by__avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/saschadroste/128.jpg" alt="Novella Gutmann" title="" />
</div>
</div>
<p class="managed-by__contact">Telephone: <a href="tel:(926) 876-0068 x04587">(926) 876-0068 x04587</a></p>
<p class="managed-by__contact">Email: <a href="mailto:Lawrence31@example.com">Lawrence31@example.com</a></p>
</div>
</div>
</div>
</div>
</section>
<div class="modal modal--small" aria-hidden="true" id="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb">
<div class="modal__container" data-modal-close="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--eb6c987c-2dd9-4894-905a-80ede53dc5bb">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--eb6c987c-2dd9-4894-905a-80ede53dc5bb">Visit voluptatem eveniet voluptas</h2>
<button type="button" data-modal-close="modal-eb6c987c-2dd9-4894-905a-80ede53dc5bb" aria-label="Close Modal">×</button>
</header>
<div class="modal__content text-center">
<p>Placeat tempora dolorem sapiente cupiditate consequatur eos ut molestias pariatur. Sed non vitae. Nisi et aut occaecati nihil consectetur. Nostrum itaque sed et laboriosam dicta aut quaerat.
Qui quia voluptatem enim eos aut nobis qui perferendis. Error quaerat molestiae praesentium. Magni aliquam sit et occaecati. Rem laborum nobis. Voluptatibus sunt cupiditate maxime ipsum maxime accusamus et.</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>Accusamus odit mollitia quia. Perspiciatis itaque voluptatem et quo excepturi voluptatem odit beatae. Dicta eveniet nihil.</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="36e17b40-b942-48c0-980b-ff52d48936ab" 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">Ut Ut Incidunt</h3>
<p class="card__meta">NR. Loren Trace, Lake Chelseaberg, Berkshire</p>
<div class="card__content">
Veritatis quis tenetur. Sit et quidem. Saepe accusantium dicta odio sed. Asperiores tempore tempora consequatur ea ipsam deleniti ad ipsam. Deleniti rerum ipsum cumque ea est blanditiis maiores.
</div>
</div>
<div class="card__banner">
£53,040
</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">Sed Nisi Fuga</h3>
<p class="card__meta">NR. Zackery Isle, West Tellyview, Buckinghamshire</p>
<div class="card__content">
Dolores sint tempora consequuntur vel. Deserunt recusandae nostrum doloribus voluptatem quis voluptatem. Aut et quae laboriosam modi aperiam debitis eos. Accusamus nemo est. Architecto voluptates enim.
</div>
</div>
<div class="card__banner">
£27,501
</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">Natus Occaecati Et</h3>
<p class="card__meta">NR. Tyrique Knoll, Hansenfort, Berkshire</p>
<div class="card__content">
Tenetur rerum temporibus. Voluptatibus vel cupiditate eum rerum dicta harum. Velit molestiae qui ipsam et veritatis omnis voluptatem. Sed qui nulla dolor. Et quasi aut ducimus minima in qui facere est.
</div>
</div>
<div class="card__banner">
£5,087
</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">Laboriosam Et Fuga</h3>
<p class="card__meta">NR. Bednar Forest, New Lexiton, Borders</p>
<div class="card__content">
Earum reprehenderit necessitatibus doloribus rerum a ut id. Corrupti molestiae quod dolore dignissimos pariatur numquam reiciendis. Corporis tempora et eos.
</div>
</div>
<div class="card__banner">
£65,865
</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">Qui Perferendis Sint</h3>
<p class="card__meta">NR. Bashirian Lock, Simonisbury, Borders</p>
<div class="card__content">
Molestiae et est provident illo. Deleniti totam neque accusamus voluptatem corrupti et temporibus. Officiis ut quo excepturi sunt accusamus quisquam autem. Aut et rerum minus sit hic earum maiores dolorem in. Voluptas qui quae enim.
</div>
</div>
<div class="card__banner">
£25,619
</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">Perferendis Expedita In</h3>
<p class="card__meta">NR. Ryann Trail, Mollychester, Buckinghamshire</p>
<div class="card__content">
Nulla reprehenderit et quisquam. Quae sed eos dicta quae. Fugit recusandae aspernatur. Autem ut blanditiis eaque doloremque voluptas magnam blanditiis qui. Voluptatem ad dolor. Nisi impedit voluptas cum pariatur vitae itaque magnam totam.
</div>
</div>
<div class="card__banner">
£30,085
</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 © 2025</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' }}