Style guide for the website, including typography, icons, buttons and other common elements.
<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>Style Guide.</h1>
</div>
</div>
</section>
<section class="section section--bg-white ">
<div class="section__inner">
<div class="typography">
<h1>Typography</h1>
<p>A plugin that provides a <code>typography</code> class you can use to add sensible typographic defaults to any
vanilla HTML you don't control (like HTML rendered from Markdown, or pulled from a CMS).</p>
<p>What follows is just a big block of example content designed to dogfood the plugin.</p>
<p>It includes every sensible typographic element I could think of, like <strong>bold text</strong>, unordered
lists, ordered lists, code blocks, block quotes, <em>and even italics</em>.</p>
<p>It's important to cover all of these use cases for a few reasons:</p>
<ol>
<li>We want everything to look good out of the box.</li>
<li>Really just the first reason, that's the whole point of the plugin.</li>
</ol>
<p>Now we're going to try out a header style.</p>
<h2>Typography should be easy</h2>
<p>So that's a header for you — with any luck by the time I'm done writing this plugin that will look pretty
reasonable.</p>
<p>Something a wise person once told me about typography is:</p>
<blockquote>
<p>Typography is pretty important if you don't want your stuff to look like trash. Make it good then it won't be
bad.</p>
</blockquote>
<p>It's probably important that images look okay here by default as well:</p>
<p>
<img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="Someone paying for something at a check out counter" title="" />
</p>
<p>Now I'm going to show you an example of an unordered list to make sure that looks good, too:</p>
<ul>
<li>So here is the first item in this list.</li>
<li>In this example we're keeping the items short.</li>
<li>Later, we'll use longer, more complex list items.</li>
</ul>
<p>And that's the end of this section.</p>
<h2>What if we stack headings?</h2>
<h3>We should make sure that looks good, too.</h3>
<p>Sometimes you have headings directly underneath each other. In those cases you have to be careful not to use too
much margin, because typically the space you need between a heading and a paragraph is more than you want
between two headings.</p>
<h3>When a heading comes after a paragraph...</h3>
<p>When a heading comes after a paragraph, we need a bit more space, like I already mentioned above. Now let's see
what a more complex list would look like.</p>
<ul>
<li>
<p><strong>I often do this thing where list items have headings.</strong></p>
<p>For some reason I think this looks cool which is unfortunate because it's pretty annoying to get the
styles right.</p>
<p>I often have two or three paragraphs in these list items too, so the hard part is getting the spacing
between the paragraphs, list item heading, and separate list items to all make sense.</p>
<p>Pretty tough honestly.</p>
</li>
<li>
<p><strong>Since this is a list, I need at least two items.</strong></p>
<p>I explained what I'm doing already in the previous list item, but a list wouldn't be a list if it only
had one item, and we really want this to look realistic.</p>
<p>That's why I've added this second list item so I actually have something to look at when writing the
styles.</p>
</li>
<li>
<p><strong>It's not a bad idea to add a third item either.</strong></p>
<p>I think it probably would've been fine to just use two items but three is definitely not worse, and since
I seem to be having no trouble making up arbitrary things to type, I might as well include it.</p>
<p>With any luck this will make it even easier for me to get the styles right.</p>
</li>
</ul>
<p>After this sort of list I usually have a closing statement or paragraph, because it kinda looks weird jumping
right to a heading.</p>
<h3>What about nested lists?</h3>
<p>Nested lists basically always look bad which is why editors like Medium don't even let you do it, but I guess
since some of you goofballs are going to do it I have to carry the burden of at least making it work.</p>
<ol>
<li><strong>Nested lists are rarely a good idea.</strong>
<ul>
<li>You might feel like you are being really "organized" or something but you are just creating a gross
shape on the screen that is hard to read.</li>
<li>Nested navigation in UIs is a bad idea too, keep things as flat as possible.</li>
<li>Nesting tons of folders in your source code is also not helpful.</li>
</ul>
</li>
<li><strong>Since we need to have more items, here's another one.</strong>
<ul>
<li>I'm not sure if I'll bother styling more than two levels deep.</li>
<li>Two is already too much, three is guaranteed to be a bad idea.</li>
<li>If you nest four levels deep you belong in prison.</li>
</ul>
</li>
<li><strong>Two items isn't really a list, three is good though.</strong>
<ul>
<li>Again please don't nest lists if you want people to actually read your content.</li>
<li>Nobody wants to look at this.</li>
<li>I'm upset that I even have to bother styling this.</li>
</ul>
</li>
</ol>
<p>The most annoying thing about lists in Markdown is that <code><li></code> elements aren't given a child
<code><p></code> tag unless there are multiple paragraphs in the list item. That means I have to worry
about styling that annoying situation too.
</p>
<ul>
<li>
<p><strong>For example, here's another nested list.</strong></p>
<p>But this time with a second paragraph.</p>
<ul>
<li>These list items won't have <code><p></code> tags</li>
<li>Because they are only one line each</li>
</ul>
</li>
<li>
<p><strong>But in this second top-level list item, they will.</strong></p>
<p>This is especially annoying because of the spacing on this paragraph.</p>
<ul>
<li>
<p>As you can see here, because I've added a second line, this list item now has a
<code><p></code> tag.
</p>
<p>This is the second line I'm talking about by the way.</p>
</li>
<li>
<p>Finally here's another list item so it's more like a list.</p>
</li>
</ul>
</li>
<li>
<p>A closing list item, but with no nested list, because why not?</p>
</li>
</ul>
<p>And finally a sentence to close off this section.</p>
<h2>There are other elements we need to style</h2>
<p>I almost forgot to style links, like <a href="https://tailwindcss.com">this link to the Tailwind CSS website</a>.
How should those look by default, blue I guess? I dunno.</p>
<p>We also need to make sure inline code looks good, like if I wanted to talk about <code><span></code>
elements or tell you the good news about <code>@tailwindcss/typography</code>.</p>
<h4>We haven't used an <code>h4</code> yet</h4>
<p>But now we have. Please don't use <code>h5</code> or <code>h6</code> in your content, Medium only supports two
heading levels for a reason you animals.</p>
<h3>We still need to think about stacked headings though.</h3>
<h4>Let's make sure we don't screw that up with <code>h4</code> elements, either.</h4>
<p>Phew, with any luck we have styled the headings above this text and they look pretty good.</p>
<p>Let's add a closing paragraph here so things end with a decently sized block of text. I can't explain why I want
things to end that way but I have to assume it's because I think things will look weird or unbalanced if there
is a heading too close to the end of the document.</p>
<p>What I've written here is probably long enough, but adding this final sentence can't hurt.</p>
</div>
</div>
</section>
<section class="section section--bg-yellow ">
<div class="section__inner">
<div class="cta">
<h2 class="cta__title">Call to Action</h2>
<div class="cta__text">
Aut vel corrupti similique dolorem. Aut ipsum facere nobis eos. Ex est eius molestiae suscipit voluptatem libero.
</div>
<button class="button button--red button--inline ">
<span>Call to Action</span>
</button>
</div>
</div>
</section>
<section class="section section--bg-white ">
<div class="section__inner">
<div class="read-more" data-show="Read more " data-hide="Read less">
<div class="read-more__content">
<p>Consectetur corporis vel. Amet et exercitationem. Ut enim cum ea voluptates beatae facilis. Provident accusantium voluptas dolorem est sint.
Rerum aut eum dolorem beatae ad. Repellat et voluptate dolorum excepturi deserunt ea voluptatem. Veniam molestiae sunt vel autem ipsum tempore tempore consequatur.
Est et quidem ut distinctio quia corporis et quam illum. Velit provident cupiditate quaerat quia aut. Illum est ad reprehenderit impedit nesciunt. Laudantium expedita qui voluptatem pariatur delectus. Nesciunt quidem maiores et sed voluptatum doloribus temporibus.
Consequatur aut dicta numquam deleniti vitae. Maxime qui rerum molestiae illo aut enim repudiandae dolorum. Omnis ut natus veniam optio fuga soluta veniam maiores. Omnis et maiores maiores veniam et sequi earum. Aut consequatur quos culpa sunt ipsam et.
Quos est iusto. Asperiores molestiae voluptatibus est. Alias sit dolorem rem occaecati eaque culpa odio non vero. Magni voluptas fuga quibusdam. Recusandae adipisci tempora vero nobis soluta harum nesciunt velit quo.</p>
</div>
<div class="read-more__toggle">
<button class="button button--small ">
<span>Read more</span>
</button>
</div>
</div>
</div>
</section>
<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>
<section class="section section--bg-white ">
<div class="section__inner">
<div class="tab" data-tab="42ba5ce3-c4c5-4a4f-8b1d-31a4da85b559">
<div class="tab__navigation button-group">
<button class="button button--small button--green button--green--outline" data-tab-for=49207397-618f-4103-8033-8ba1522afc7f>
<span>ipsum expedita aut</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=702c00a1-9879-4d84-8ada-9c08739cec52>
<span>eaque ut libero</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=9f01f4c5-d091-4a8a-ab4a-8f1ac2a26225>
<span>quia necessitatibus est</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=c3192444-f8cc-4b3c-b4ec-aeb4fadb6954>
<span>ut odit dolores</span>
</button>
</div>
<div class="tab__items">
<div class="tab__item tab__item--49207397-618f-4103-8033-8ba1522afc7f" data-tab-item="49207397-618f-4103-8033-8ba1522afc7f">
<h3 class="tab__item__title">ipsum expedita aut</h3>
Impedit nemo quo error eum eius adipisci exercitationem similique. Qui officia eum minus sunt autem. Architecto magni dolores sed optio quisquam ad omnis est minus. Molestiae soluta libero quia. Cupiditate aut vero laboriosam voluptates itaque.
</div>
<div class="tab__item tab__item--702c00a1-9879-4d84-8ada-9c08739cec52" data-tab-item="702c00a1-9879-4d84-8ada-9c08739cec52">
<h3 class="tab__item__title">eaque ut libero</h3>
Nulla velit voluptatem corporis. Ipsam numquam molestiae expedita libero illo dolorem sed hic unde. Voluptatem ut eos aut. Pariatur illo quos fuga aut recusandae occaecati. Est nihil velit ea dignissimos.
</div>
<div class="tab__item tab__item--9f01f4c5-d091-4a8a-ab4a-8f1ac2a26225" data-tab-item="9f01f4c5-d091-4a8a-ab4a-8f1ac2a26225">
<h3 class="tab__item__title">quia necessitatibus est</h3>
In unde alias officiis. Consequatur minima voluptatum omnis consequatur. Aspernatur vero quod repudiandae sint illo officiis. Maxime sint illum exercitationem beatae minima voluptatem. Animi excepturi officia laboriosam aut qui harum consequuntur placeat sit.
</div>
<div class="tab__item tab__item--c3192444-f8cc-4b3c-b4ec-aeb4fadb6954" data-tab-item="c3192444-f8cc-4b3c-b4ec-aeb4fadb6954">
<h3 class="tab__item__title">ut odit dolores</h3>
Molestiae ab cumque. Dignissimos voluptas esse. Voluptatem beatae dolor quia tempore non reiciendis tenetur. Natus amet est delectus aut aperiam officia perferendis molestias quod. Animi culpa nulla sunt dolorem itaque.
</div>
</div>
</div>
</div>
</section>
<section class="section section--bg-yellow ">
<div class="section__inner">
<div class="cta cta--help">
<div class="cta__inner">
<h2 class="cta__title">assumenda aut ut soluta</h2>
<p class="cta__text">Voluptatem neque sed quam consectetur aspernatur eum facere. Dignissimos expedita quas et ea tempore soluta. Eaque perspiciatis enim iure quia officia maiores. Consequatur tempore est reiciendis rerum voluptas maiores.</p>
<hr />
<div class="managed-by managed-by--manager">
<div class="managed-by__avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/weglov/128.jpg" alt="Mrs. Kacey Barton" title="" />
</div>
<div class="managed-by__manager">
<h3 class="managed-by__title">Regional Managers</h3>
<p class="managed-by__contact">Mrs. Kacey Barton</p>
<p class="managed-by__contact"><a href="tel:475.513.6713 x5398">475.513.6713 x5398</a></p>
</div>
</div>
<hr />
<p class="cta__text cta__text--extra">Officia saepe nesciunt aliquam unde maiores ab ut dolores molestiae. Molestiae nobis harum reprehenderit.</p>
</div>
</div>
</div>
</section>
<section class="section section--bg-white ">
<div class="section__inner">
<div class="accordion">
<div class="accordion__item">
<h2 class="accordion__item__title" tabindex="0">Accordion #1</h2>
<div class="accordion__item__content">
<div>
<p>Odit iste maiores mollitia amet nisi possimus. Dolorem harum qui deserunt. Et nihil numquam optio illo distinctio suscipit laboriosam autem. Dolorem eos occaecati non.</p>
</div>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__item__title" tabindex="0">Accordion #2</h2>
<div class="accordion__item__content">
<div>
<p>Quo qui voluptatem rerum deleniti. Ducimus voluptatem sit fugiat est. Quos aliquid consequuntur iste in voluptas consequatur quisquam. Eum consequuntur asperiores.</p>
</div>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__item__title" tabindex="0">Accordion #3</h2>
<div class="accordion__item__content">
<div>
<p>Doloremque fugit sit. Dolore aliquam molestias nihil nisi enim. Fugiat quod suscipit facilis sint vel vel suscipit omnis.</p>
</div>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__item__title" tabindex="0">Accordion #4</h2>
<div class="accordion__item__content">
<div>
<p>Ullam recusandae ipsam odit ab quaerat eum. Ea voluptatem quibusdam optio possimus modi eos occaecati. A ea quis vel. Est eligendi consectetur quae reiciendis. Laborum blanditiis dolorum sint ex. Sequi voluptatem voluptatum hic inventore reprehenderit id quasi accusamus.</p>
</div>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__item__title" tabindex="0">Accordion #5</h2>
<div class="accordion__item__content">
<div>
<p>Adipisci at quasi quod qui molestias nam recusandae repellat nemo. Quia vero voluptatem qui et nisi accusantium nemo qui provident. Molestiae et enim et tempora eum aspernatur.</p>
</div>
</div>
</div>
<div class="accordion__item">
<h2 class="accordion__item__title" tabindex="0">Accordion #6</h2>
<div class="accordion__item__content">
<div>
<p>Doloribus tempora quos placeat eius et qui odit nostrum rerum. Molestiae hic velit tenetur at eaque officia. Vero quae sed corrupti.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section section--bg-yellow ">
<div class="section__inner">
<blockquote class="quote">
<div class="quote__content">
<p>“Fugit facere adipisci quae odit animi et dicta. Aut expedita molestiae ipsam consectetur. Debitis natus aut distinctio consequatur atque modi excepturi ullam. Et dignissimos earum. At esse ad consequatur. In nobis excepturi itaque commodi exercitationem.”</p>
</div>
<div class="quote__image">
<img src="../../images/drawings/badger.png" alt="Badger" title="" class="drawing " />
</div>
</blockquote>
</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">Woodlands for sale for conservation and enjoyment</label>
<div class="form__group">
<input type="text" id="form--cta__field-id" name="field" placeholder="Enter locations eg. Suffolk" />
<button class="button button--green ">
<span>Search woodlands for sale</span>
</button>
</div>
</div>
</form>
</div>
</section>
<section class="section section--bg-yellow ">
<div class="section__inner">
<blockquote class="quote">
<div class="quote__content">
<p>“Fugit facere adipisci quae odit animi et dicta. Aut expedita molestiae ipsam consectetur. Debitis natus aut distinctio consequatur atque modi excepturi ullam. Et dignissimos earum. At esse ad consequatur. In nobis excepturi itaque commodi exercitationem.”</p>
</div>
<div class="quote__by">
<cite>
Devan Schulist, Customer Security Architect
</cite>
</div>
<p class="quote__link">
<a href="#">Read blog post</a>
</p>
<div class="quote__image">
<img src="../../images/drawings/badger.png" alt="Badger" title="" class="drawing " />
</div>
</blockquote>
</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' hero }}
{{/ @section }}
{{#> @section modifiers='bg-white' }}
{{ render '@typography-text' }}
{{/ @section }}
{{#> @section modifiers='bg-yellow' }}
{{ render '@block--cta' }}
{{/ @section }}
{{#> @section modifiers='bg-white' }}
{{ render '@block--read-more' }}
{{/ @section }}
{{#> @section modifiers='bg-yellow' }}
{{ render '@block--cta--listing' }}
{{/ @section }}
{{#> @section modifiers='bg-white' }}
{{ render '@block--tabs' }}
{{/ @section }}
{{#> @section modifiers='bg-yellow' }}
{{ render '@block--cta--need-help' }}
{{/ @section }}
{{#> @section modifiers='bg-white' }}
{{ render '@block--accordion' }}
{{/ @section }}
{{#> @section modifiers='bg-yellow' }}
{{ render '@block--quote' }}
{{/ @section }}
{{#> @section modifiers='bg-green' }}
{{ render '@block--cta-form' }}
{{/ @section }}
{{#> @section modifiers='bg-yellow' }}
{{ render '@block--quote--full' }}
{{/ @section }}
{{#> @section modifiers='bg-green' }}
{{ render '@block--cta-form--subscribe' }}
{{/ @section }}
</main>
{{ render '@layout-footer' }}