Example layout for the “Buy” 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" data-src="">
<h1>Choosing the right woodland for you and your family.</h1>
</div>
</div>
</section>
<section class="section section--search ">
<div class="section__inner">
<div class="form form--search form--search--page" 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--green--dark 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>
</div>
</section>
<section class="section ">
<div class="section__inner">
<div class="search-results search-results--inline search-results--green search-results--green--outline search-results--transparent">
<p>
<span class="search-results__count">28</span>
<span class="search-results__type">Woodlands</span>
found for sale in
<span class="search-results__location">South Wales and Herefordshire</span>.
</p>
<div class="button-group">
<button class="button button--small button--green button--green--outline button--active ">
<span>List View</span>
</button>
<button class="button button--small button--green button--green--outline ">
<span>Map View</span>
</button>
</div>
</div>
<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">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Dolorum Ad Itaque Expedita Vitae Totam Inventore Commodi.</h3>
<p class="card__meta">NR. Morissette Passage, Labadieborough, Borders</p>
<div class="card__content">
Aut iusto omnis commodi voluptatibus quia minus ut et reiciendis. Eaque quisquam cumque sapiente omnis praesentium qui facere dolore enim. Sit atque praesentium consequatur est quia incidunt ipsam.
</div>
</div>
<div class="card__banner">
£26,847
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Voluptate Enim Sed Eum Ut Et Voluptatibus Rerum Non.</h3>
<p class="card__meta">NR. Leannon Parkways, Deborahshire, Avon</p>
<div class="card__content">
Blanditiis sed eius aut omnis officia adipisci. Velit omnis eius voluptas illo. Laudantium consectetur blanditiis sed illo similique repudiandae.
</div>
</div>
<div class="card__banner">
£88,020
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Aliquid Quia Dolorum Enim Alias Voluptas Dignissimos Occaecati Incidunt.</h3>
<p class="card__meta">NR. Huel Mount, Berneicechester, Cambridgeshire</p>
<div class="card__content">
Eum voluptas qui facere soluta hic officia sapiente inventore mollitia. Et ut voluptas. Sunt porro sunt rerum molestias ut quibusdam qui saepe ea. Error quis omnis odit est.
</div>
</div>
<div class="card__banner">
£78,149
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Et Deleniti Nihil Explicabo Et Sit Odio.</h3>
<p class="card__meta">NR. Torphy Courts, South Marciamouth, Buckinghamshire</p>
<div class="card__content">
Quia tempore sed enim debitis fugit occaecati eius. Sunt natus porro voluptatem et doloremque ipsum error ab. Officia sed pariatur animi nisi.
</div>
</div>
<div class="card__banner">
£53,135
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Aliquid Eos Quasi.</h3>
<p class="card__meta">NR. Norberto View, West Queenieside, Borders</p>
<div class="card__content">
Blanditiis dolorem perferendis voluptas voluptas beatae. Voluptas in voluptates natus. Aut suscipit pariatur quos non. Rerum maxime error.
</div>
</div>
<div class="card__banner">
£71,587
</div>
</a>
</div>
<div class="card card--woodland ">
<a href="page-woodland" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Repellendus Temporibus Sit.</h3>
<p class="card__meta">NR. Clare Rapid, Bauchport, Cambridgeshire</p>
<div class="card__content">
Aperiam dolorem beatae cupiditate sed aspernatur inventore quam cupiditate corporis. Quam ut minus non quam et pariatur voluptas eum. Consequatur illum eos eius. Dolorum assumenda quaerat. In voluptatem maiores iste quia debitis et molestiae tenetur incidunt. Quis sed incidunt ipsum repellat labore.
</div>
</div>
<div class="card__banner">
£44,996
</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-yellow section--short ">
<div class="section__inner">
<div class="cta cta--help">
<div class="cta__inner">
<h2 class="cta__title">Can’t find what you’re looking for?</h2>
<p class="cta__text">We have other woods, some much larger, which will be available soon. Contact the manager for this region for more details.</p>
<hr />
<div class="managed-by managed-by--manager">
<div class="managed-by__avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/saschadroste/128.jpg" alt="Novella Gutmann" title="" />
</div>
<div class="managed-by__manager">
<h3 class="managed-by__title">Regional Managers</h3>
<p class="managed-by__contact">Novella Gutmann</p>
<p class="managed-by__contact"><a href="tel:(926) 876-0068 x04587">(926) 876-0068 x04587</a></p>
</div>
</div>
<hr />
<p class="cta__text cta__text--extra">Or visit <a href="http://forests.co.uk" rel="nofollow">forests.co.uk</a> for other woodlands for sale</p>
</div>
</div>
</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' hero }}
{{/ @section }}
{{#> @section modifiers='search' }}
{{ render '@block--search' search merge=true }}
{{/ @section }}
{{#> @section }}
{{ render '@block--search-results' woodlands merge=true }}
{{ render '@components--cards' woodlands merge=true }}
{{ render '@button' woodlands merge=true }}
{{/ @section }}
{{#> @section modifiers='bg-yellow,short' }}
{{ render '@block--cta--need-help' help merge=true }}
{{/ @section }}
{{#> @section modifiers='bg-green' }}
{{ render '@block--cta-form--subscribe' }}
{{/ @section }}
</main>
{{ render '@layout-footer' }}