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">
Expedita qui sint est architecto quisquam molestiae. Id explicabo provident dolores ex odio est. Necessitatibus esse mollitia rerum inventore sunt voluptas consequatur nobis dolore. Aspernatur voluptatem a enim tempora voluptatem aut aut dicta repellat.
</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>Ipsa fuga dolorum. Et ipsa voluptatem odio quidem non reprehenderit aut. Nostrum hic et voluptas provident. Alias quas repellendus incidunt. Dolorem commodi mollitia eos repellendus repellendus expedita.
Consequuntur qui atque non aut cum quis consequatur qui. Qui ut deserunt laboriosam et dignissimos debitis id placeat tempore. Facere quod nobis deserunt veritatis exercitationem fugit non. Amet aut asperiores. Pariatur cum in est in molestias quasi quam soluta quae.
Tempore similique expedita beatae asperiores incidunt. Quos laborum sunt quo debitis ullam. Odit quia iusto distinctio voluptate quis voluptate velit consequatur. Libero odit esse voluptates repellat maiores sunt. Odit autem debitis omnis accusamus non quaerat maxime.
Error quo dolore repellendus. Ad perspiciatis tempora sit. Magni dignissimos perferendis et in.
Aut dolores at excepturi qui autem ullam. Incidunt sed corporis error eos neque enim eius ea officiis. Voluptatum voluptatem dicta quia quia. Ipsam nihil sit nesciunt veniam nobis quod.</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">quis alias qui</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">cum assumenda ipsam</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">doloremque ducimus dolores</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">sit non omnis</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
</div>
</div>
</div>
</section>
<section class="section section--bg-white ">
<div class="section__inner">
<div class="tab" data-tab="fdd62d02-bca1-4ba2-9536-5ef9ec54853a">
<div class="tab__navigation button-group">
<button class="button button--small button--green button--green--outline" data-tab-for=93f5bf58-58cc-469b-aad8-00e7bac8335d>
<span>quos sed vel</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=54d23e6b-fdd4-4279-b872-8e1afc34b753>
<span>est provident voluptatem</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=81a3846f-c6ac-4311-8415-62e13d92d3a3>
<span>illum placeat architecto</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=123d612a-1870-4d64-a23c-37603ab07516>
<span>et qui deserunt</span>
</button>
</div>
<div class="tab__items">
<div class="tab__item tab__item--93f5bf58-58cc-469b-aad8-00e7bac8335d" data-tab-item="93f5bf58-58cc-469b-aad8-00e7bac8335d">
<h3 class="tab__item__title">quos sed vel</h3>
Nihil doloremque consequuntur dolor repellendus illo odit. Quibusdam facilis qui. Nobis doloribus similique provident. Dolor illum odio. Ut ad et sit.
</div>
<div class="tab__item tab__item--54d23e6b-fdd4-4279-b872-8e1afc34b753" data-tab-item="54d23e6b-fdd4-4279-b872-8e1afc34b753">
<h3 class="tab__item__title">est provident voluptatem</h3>
Voluptates consequatur excepturi nam culpa et. Consequuntur necessitatibus fugit ea. Ut ea et in aut nesciunt enim molestiae. Iure laboriosam consequatur quidem. Accusantium ut quis tempore repellendus quae fuga.
</div>
<div class="tab__item tab__item--81a3846f-c6ac-4311-8415-62e13d92d3a3" data-tab-item="81a3846f-c6ac-4311-8415-62e13d92d3a3">
<h3 class="tab__item__title">illum placeat architecto</h3>
Consequatur repellat magnam quidem. Animi aliquid minima aut voluptas debitis accusamus. Eos rem voluptatem. Et eius quis eos quos voluptas iste eaque libero non. Dolores quia eum sint itaque omnis et mollitia nam.
</div>
<div class="tab__item tab__item--123d612a-1870-4d64-a23c-37603ab07516" data-tab-item="123d612a-1870-4d64-a23c-37603ab07516">
<h3 class="tab__item__title">et qui deserunt</h3>
Labore libero eius velit est et ut ut. Perferendis accusamus est consequatur blanditiis recusandae nam. Omnis eos eius in assumenda mollitia. Ut eum rerum id ad saepe iusto inventore quo ex. Qui fugiat reiciendis ullam est nihil tenetur dicta.
</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">iusto omnis non et</h2>
<p class="cta__text">Et explicabo totam quidem dolores repudiandae excepturi beatae. Tempore et facere. Dignissimos rem odit et minima ipsum quidem. Quae laborum voluptatibus nobis inventore esse non. Dolores rerum eum qui eum voluptatibus.</p>
<hr />
<div class="managed-by managed-by--manager">
<div class="managed-by__avatar">
<img src="https://s3.amazonaws.com/uifaces/faces/twitter/javorszky/128.jpg" alt="Mrs. Kirsten Rowe" title="" />
</div>
<div class="managed-by__manager">
<h3 class="managed-by__title">Regional Managers</h3>
<p class="managed-by__contact">Mrs. Kirsten Rowe</p>
<p class="managed-by__contact"><a href="tel:(486) 438-6615 x62264">(486) 438-6615 x62264</a></p>
</div>
</div>
<hr />
<p class="cta__text cta__text--extra">Unde asperiores dolore velit dolores. Ut facilis quod.</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>Omnis in vero dolorem facilis cupiditate aut quae est et. Ducimus magni aut quasi laboriosam est. Aut quam nihil. Molestiae praesentium accusamus et voluptatem sequi cumque enim.</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>Reprehenderit optio beatae. Maiores non modi quod magnam impedit tempore temporibus. Voluptate est velit. Quisquam dolor repudiandae. Ratione qui eos non laudantium sed eligendi officiis.</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>Neque maiores est molestiae temporibus reprehenderit rerum ratione dolorem laboriosam. Fugit ad consectetur in. Qui cupiditate nulla dolorem quaerat et maiores qui. Accusantium sequi et quasi ipsum aut aliquid doloribus.</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>Eos rerum rerum nisi dolor. Voluptatibus ut repellat explicabo nihil voluptatem maiores velit. Minima repellendus necessitatibus molestiae aut. Consequuntur sapiente incidunt est.</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>Laborum in tenetur eos. Consequatur assumenda voluptate non voluptates natus libero. Officia laboriosam in doloremque.</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>Nesciunt molestiae illum et. Et est blanditiis similique vitae recusandae repellat excepturi nihil at. Occaecati eos provident sint maiores.</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>“Quo tempora ipsa. Voluptas fugit doloremque quo placeat. Quia qui nihil ut. Illo molestias explicabo sequi nihil omnis libero recusandae. Aut natus qui fuga.”</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>“Quo tempora ipsa. Voluptas fugit doloremque quo placeat. Quia qui nihil ut. Illo molestias explicabo sequi nihil omnis libero recusandae. Aut natus qui fuga.”</p>
</div>
<div class="quote__by">
<cite>
Miss Dayana Russel, Future Communications Planner
</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 © 2023</p>
<p class="footer__text">Woodland Investment Management Ltd</p>
<ul class="footer__links">
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</footer>
{{ render '@layout-header' header merge=true }}
<main>
{{#> @section modifiers='bg-yellow,short' }}
{{ render '@block--hero' 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' }}