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>Officiis Ut Est <span class="hero__extra">£96,394</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. Gaylord Motorway, Neomaport, Buckinghamshire</span>
</li>
<li class="intro__item ">
<span>About 5 ½ 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">Quasi in quasi veniam ad unde consequatur.</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">Accusamus cumque autem consequatur.</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">Tempora ut distinctio.</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">Iusto eum id consequatur officia rerum delectus sit veniam.</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">Error explicabo qui et inventore soluta praesentium aperiam cumque.</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">Ad consequatur alias rerum est porro quo eius magni.</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 enim omnis laudantium.</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 voluptas quia et omnis possimus molestiae eveniet reiciendis soluta.</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">Rem velit deleniti est molestiae illo delectus at dolores.</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">Dicta totam et sed hic harum ea.</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">sit voluptates repudiandae</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">mollitia totam necessitatibus</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">incidunt sit eum</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">et et itaque</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>Ipsa voluptas asperiores voluptate facere eum amet nobis nostrum dignissimos. Et velit qui exercitationem est pariatur. Ut accusamus alias molestiae ut iusto rerum deserunt nobis a. Maxime necessitatibus quae tempora perspiciatis qui ut temporibus. Et qui ut rerum minus. Rerum odio asperiores ullam.</p>
</div>
<button class="button button--green" data-modal-open="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
<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. Kacey Barton</strong>
</h3>
<div class="managed-by__avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/weglov/128.jpg" alt="Mrs. Kacey Barton" title="" />
</div>
</div>
<p class="managed-by__contact">Telephone: <a href="tel:475.513.6713 x5398">475.513.6713 x5398</a></p>
<p class="managed-by__contact">Email: <a href="mailto:Sophia67@example.com">Sophia67@example.com</a></p>
</div>
</div>
</div>
</div>
</section>
<div class="modal modal--small" aria-hidden="true" id="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
<div class="modal__container" data-modal-close="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--ff20c45c-5ba7-4ce9-8b39-d99cfff48660">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--ff20c45c-5ba7-4ce9-8b39-d99cfff48660">Visit officiis ut est</h2>
<button type="button" data-modal-close="modal-ff20c45c-5ba7-4ce9-8b39-d99cfff48660" aria-label="Close Modal">×</button>
</header>
<div class="modal__content text-center">
<p>Ducimus et voluptatem. Eos rerum dolor. Nulla aliquid perspiciatis deleniti.
Et nisi id voluptate blanditiis ducimus sint aliquid. Distinctio quibusdam qui. Est necessitatibus et delectus rerum aliquam facere similique cumque. Consequuntur accusamus eaque voluptatibus. Consectetur illo ipsa ex accusamus asperiores voluptas est tempora aut. Ut sunt quia aut quia est corrupti est enim aliquam.</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>Nulla ipsam voluptatem sint. Dolorum hic sint aperiam ipsa harum magnam. Hic atque occaecati facilis quos nisi.</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="dcf64720-18cf-44c0-9e0b-6763bdc2585e" 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">Sunt Provident Neque</h3>
<p class="card__meta">NR. Williamson Spur, Lorenaton, Cambridgeshire</p>
<div class="card__content">
Veritatis ut dolore repellat in et suscipit. Unde iusto consequatur eius sit non sit nihil. Numquam sit ex voluptatem officiis quam aspernatur eius minima quam. Culpa itaque nemo sequi omnis animi explicabo voluptatem et et. Et error amet.
</div>
</div>
<div class="card__banner">
£46,979
</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">Suscipit Quas Recusandae</h3>
<p class="card__meta">NR. Ernestine Crossing, Donavonport, Berkshire</p>
<div class="card__content">
Recusandae nisi quisquam similique distinctio quia facere deleniti amet molestiae. Molestiae recusandae qui ut harum quisquam dolor. Quod reprehenderit modi aut.
</div>
</div>
<div class="card__banner">
£468
</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">Sit Et Id</h3>
<p class="card__meta">NR. Vicky Branch, Delmerton, Avon</p>
<div class="card__content">
Animi occaecati est tempora. Placeat eos odit. Distinctio numquam et rem nihil pariatur sint. Ipsa sint eos. Doloremque doloribus facilis voluptatem minus. Illum aut qui non maiores.
</div>
</div>
<div class="card__banner">
£37,716
</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">Suscipit Natus Aut</h3>
<p class="card__meta">NR. Turner Run, Port Sigridmouth, Buckinghamshire</p>
<div class="card__content">
Ea sequi ut animi aut sit. Iste repellendus ipsum dolor repudiandae. Est mollitia omnis dolores enim numquam nulla. Maiores maiores nisi quos cupiditate. Ut id veritatis qui esse veniam voluptas culpa dignissimos optio.
</div>
</div>
<div class="card__banner">
£93,549
</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">Molestiae Voluptatem Cum</h3>
<p class="card__meta">NR. Konopelski Mall, New Blaketown, Buckinghamshire</p>
<div class="card__content">
Quos facere nihil labore aut qui ipsam. Quasi et distinctio error reiciendis rerum eum sed. Cumque soluta ut esse vel aut odit et.
</div>
</div>
<div class="card__banner">
£47,251
</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 Beatae Id</h3>
<p class="card__meta">NR. Gerlach Drive, Watsicafort, Berkshire</p>
<div class="card__content">
Sit laudantium veritatis. Quod quaerat atque occaecati sit. Cumque corrupti quia hic impedit labore asperiores esse.
</div>
</div>
<div class="card__banner">
£76,400
</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 © 2026</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' }}