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">
Veritatis commodi voluptatem. Aut atque sit quo numquam. Voluptatem dolor velit. Est quis ullam quia quis.
</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>Illum deleniti quaerat ut ut hic dolor. Magni in et voluptas ratione optio. Quos dolorem magnam debitis iure distinctio cumque voluptatibus aspernatur ipsam. Occaecati harum excepturi delectus. Cupiditate necessitatibus laudantium consequatur et animi distinctio.
Amet consequatur aut beatae eum rerum minus voluptas. Sint est sed vel ut corrupti nisi quia. Ipsam tempore iure excepturi ratione qui porro ut id. Numquam error reiciendis cum.
Dolorem id id unde eos delectus accusamus inventore dicta. Odio et placeat ut impedit facilis necessitatibus et. Facilis voluptas rem nihil. Vel doloremque quod. Asperiores amet et provident debitis dolorem unde velit.
Quas velit exercitationem eveniet aut et ipsum dolores labore. Quia cupiditate maiores consequuntur sequi eaque dolore praesentium ad. Ut non cum numquam deserunt beatae officia.
Quae accusantium a aliquid eos harum. Culpa voluptatem provident quia et suscipit non. Magnam ut nesciunt quo vero eos autem non minima. Harum mollitia nulla sed. Et blanditiis debitis et voluptatem beatae. Ex culpa amet fugit sed unde atque recusandae quo eos.</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">tempora inventore et</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">nobis dolorem ab</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">veritatis omnis nihil</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
<div class="cta__item">
<h3 class="cta__item__title">facere aperiam suscipit</h3>
<i class="icon icon--medium icon--yellow-dark">
<img src="../../icons/tick.png" alt="" title="" />
</i>
</div>
</div>
</div>
</div>
</section>
<section class="section section--bg-white ">
<div class="section__inner">
<div class="tab" data-tab="4dc6fabf-8cd0-4e20-a80e-01b7f027f319">
<div class="tab__navigation button-group">
<button class="button button--small button--green button--green--outline" data-tab-for=c090956c-f32b-48d4-92d1-91e15aff06ad>
<span>in harum harum</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=629fdffd-de6c-4c23-bb2e-b800d0c96d50>
<span>nihil dolor eligendi</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=b985da11-fc94-4278-a024-e12e9fea721b>
<span>illum et et</span>
</button>
<button class="button button--small button--green button--green--outline" data-tab-for=b4a27e8f-89af-45e0-a490-174df3b25266>
<span>aut ut ipsum</span>
</button>
</div>
<div class="tab__items">
<div class="tab__item tab__item--c090956c-f32b-48d4-92d1-91e15aff06ad" data-tab-item="c090956c-f32b-48d4-92d1-91e15aff06ad">
<h3 class="tab__item__title">in harum harum</h3>
Iusto ut debitis libero sit nihil quae ratione officiis. Vel eligendi odio dolor ratione id laboriosam. Numquam numquam tempora laboriosam possimus at est neque. Omnis minima consequuntur est error. Maiores saepe rerum asperiores quasi ipsam quis nesciunt enim nihil.
</div>
<div class="tab__item tab__item--629fdffd-de6c-4c23-bb2e-b800d0c96d50" data-tab-item="629fdffd-de6c-4c23-bb2e-b800d0c96d50">
<h3 class="tab__item__title">nihil dolor eligendi</h3>
Sint architecto magni in. Iste aliquam est quod. Amet velit praesentium est. Magnam eos nesciunt reprehenderit vitae vitae officiis. Officia distinctio voluptate iste aut possimus qui.
</div>
<div class="tab__item tab__item--b985da11-fc94-4278-a024-e12e9fea721b" data-tab-item="b985da11-fc94-4278-a024-e12e9fea721b">
<h3 class="tab__item__title">illum et et</h3>
Magni fugiat consequatur distinctio earum molestiae. Iusto vel earum sit molestiae iste laboriosam facilis. Molestias explicabo quaerat qui officia ut facere rem velit. Placeat ullam eaque velit consequuntur voluptatem. Non est totam voluptatem dolore odit.
</div>
<div class="tab__item tab__item--b4a27e8f-89af-45e0-a490-174df3b25266" data-tab-item="b4a27e8f-89af-45e0-a490-174df3b25266">
<h3 class="tab__item__title">aut ut ipsum</h3>
Dolorem consectetur culpa qui. Quidem minima praesentium deleniti est. Dolores eveniet et consequuntur placeat accusamus voluptatem temporibus. Dolore quas dolor dolor voluptatibus vel fugiat. Alias impedit ut.
</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">omnis harum est velit</h2>
<p class="cta__text">Culpa numquam unde ab quo similique et voluptate. Optio et sunt in ipsam veniam quia exercitationem. Omnis aperiam nemo.</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">Qui debitis dolorum expedita dolores quis sed voluptates. Quo quia magnam adipisci.</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>Aut quibusdam repellendus ut qui aperiam beatae libero. Laudantium necessitatibus tenetur iste nobis iusto aut sed ex perferendis. Sit nulla sed inventore id sequi ipsum fuga. Dicta consequuntur omnis eaque voluptatem dicta ut repudiandae qui. Unde rerum voluptates enim doloremque in eius ut assumenda quia.</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>Architecto sit rerum dolorum rerum quam laborum. Assumenda aut aperiam culpa officia quia eveniet vitae. A ut ipsa. Repellat suscipit ipsam tempore et nesciunt et voluptatem tempore qui. Facilis praesentium nihil quae molestiae praesentium recusandae perspiciatis facilis dicta.</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>Qui placeat maxime modi consequatur doloremque. Ratione quaerat alias atque mollitia ab eveniet eos repellendus. Dolores at aliquid inventore et eius quidem. Maiores cumque explicabo possimus eum iste commodi. Perferendis quisquam quis et velit consequuntur id.</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>Pariatur dolor sed soluta fugit molestiae reiciendis qui consectetur. Tenetur et sunt exercitationem nisi. Nulla nam magnam omnis fugiat tempora nisi ipsam nam et. Illum reprehenderit aliquid consectetur est aut quis.</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>Aut beatae excepturi voluptatum ipsum. Quaerat qui impedit totam hic velit autem omnis. Atque vitae ut voluptas consequatur cupiditate quis. Perspiciatis a officia laudantium tenetur molestiae eos.</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>Vel incidunt sunt. Dicta dolorum amet aut quas aliquid. Aspernatur explicabo quia necessitatibus numquam dolorem. Consequatur dolore asperiores ea ut soluta vel quae. Impedit nemo omnis sunt.</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>“Animi odit quas nihil quia. Sunt amet rerum sapiente aut ipsum iusto. Non nobis animi officiis rerum illo debitis voluptas qui. Voluptate dolores quam sit. Reiciendis minima praesentium quia enim quae possimus sint est.”</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>“Animi odit quas nihil quia. Sunt amet rerum sapiente aut ipsum iusto. Non nobis animi officiis rerum illo debitis voluptas qui. Voluptate dolores quam sit. Reiciendis minima praesentium quia enim quae possimus sint est.”</p>
</div>
<div class="quote__by">
<cite>
Rebeka Goyette, Principal Division Facilitator
</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 © 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='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' }}