Blog Post

Blog Post

Example layout for a specific blog post.

Note, there must be a class of .page--blog-single on the above the grid.

<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 &amp; regulations</a>

                                </li>

                                <li class="navigation__item  ">
                                    <a href="#">Access &amp; 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 &amp; 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 class="page--blog-single">
    <section class="section ">
        <div class="section__inner">
            <section id="" class="grid grid--2/3 grid--spaced grid--divider">
                <div class="grid__inner">
                    <div class="grid__item">
                        <div class="blog-post">
                            <h1 class="blog-post__title">20 20 Vision For 2020 – Is Even 20% Tree Coverage Enough?</h1>

                            <div class="blog-post__meta">
                                <p class="blog-post__by">By <span>Laurel</span></p>
                                <p class="blog-post__date"><span>16th April 2023</span></p>
                                <p class="blog-post__comment-count"><a href="#discussion">91327 comments</a></p>
                                <p class="blog-post__topic"><a href="#topic">magnam</a></p>
                                <div class="social">
                                    <div class="fb-like" data-href="xxx" data-width="" data-layout="button" data-action="like" data-size="small" data-share="false"></div>

                                    <div id="fb-root"></div>
                                    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v8.0&appId=211175705609609" nonce="wawGv3W2"></script>

                                    <a class="twitter-share-button" href="https://twitter.com/intent/tweet" data-size="small">Tweet</a>

                                    <script>
                                        window.twttr = (function(d, s, id) {
                                            var js, fjs = d.getElementsByTagName(s)[0],
                                                t = window.twttr || {};
                                            if (d.getElementById(id)) return t;
                                            js = d.createElement(s);
                                            js.id = id;
                                            js.src = "https://platform.twitter.com/widgets.js";
                                            fjs.parentNode.insertBefore(js, fjs);
                                            t._e = [];
                                            t.ready = function(f) {
                                                t._e.push(f);
                                            };
                                            return t;
                                        }(document, "script", "twitter-wjs"));
                                    </script>

                                </div>
                            </div>

                            <div class="blog-post__content typography">
                                <p>A omnis tempore harum. Suscipit et et quasi esse architecto voluptatum reprehenderit incidunt. Dolores suscipit excepturi error officia. Reprehenderit et et. Mollitia aut ab totam provident optio. Sint atque aut unde.</p>
                                <p>Et illum blanditiis quibusdam iste. Fuga voluptas expedita molestiae eum voluptatem nulla temporibus hic quisquam. Mollitia repudiandae doloremque minima repellat aut consequatur eligendi. Incidunt recusandae consequuntur doloremque maiores.</p>
                                <p>Necessitatibus illum ipsum. Distinctio quibusdam rerum eaque fuga consequatur numquam ad. Voluptate esse pariatur reprehenderit voluptatem dolor velit.</p>
                                <p>Consequatur quisquam temporibus aliquam similique. Laborum repudiandae commodi eos perspiciatis. Laborum eum quaerat placeat. Quasi ipsum perferendis id dicta occaecati repellendus quisquam aut. Ipsa quia possimus. Aperiam ipsum est atque deleniti nemo animi delectus est vel.</p>
                                <p>Laboriosam sint qui. Explicabo necessitatibus natus illum. Perferendis voluptatem exercitationem enim dolor praesentium non aut. Error perferendis quae ut quaerat vero cum. Dolores ratione ducimus harum sequi dolorum quaerat temporibus.</p>

                            </div>
                        </div>

                        <hr class="mt-4 mb-8" id="discussion" />

                        <div class="section section--short">
                            <h2 class="section__title text-left">Discussion</h2>

                            <div class="listing listing--comments">
                                <div class="blog-comment">
                                    <div class="blog-comment__content typography">
                                        <p>Molestias soluta dolorum corrupti tempore labore. Explicabo aut deserunt nemo rem veniam veritatis laboriosam enim qui. Omnis nihil eligendi. Quidem accusamus magnam eligendi aperiam odio et aliquid est quam. Illo dolorem corporis rerum. Enim aut a.</p>
                                        <p>Fugiat voluptatem sint dolorum ut et ab. Labore amet suscipit. Modi expedita sunt consequatur neque accusantium corporis. Impedit sint similique ratione sed.</p>

                                    </div>

                                    <div class="blog-comment__meta">
                                        <p class="blog-comment__author"><span>Jensen</span></p>
                                        <p class="blog-comment__date"><span>1st December 2022</span></p>
                                    </div>
                                </div>

                                <div class="blog-comment">
                                    <div class="blog-comment__content typography">
                                        <p>Quos soluta ut. Dolorem qui minima accusamus vel dolor. Eum accusamus error saepe.</p>
                                        <p>Enim eveniet quia iure sit ullam deleniti illum animi omnis. Ut qui aut. Eaque magnam natus atque sit soluta quas iste veniam.</p>

                                    </div>

                                    <div class="blog-comment__meta">
                                        <p class="blog-comment__author"><span>Fredrick</span></p>
                                        <p class="blog-comment__date"><span>3rd June 2023</span></p>
                                    </div>
                                </div>

                                <div class="blog-comment">
                                    <div class="blog-comment__content typography">
                                        <p>Dolorem doloribus ut. Id sequi sit tenetur minima iste nihil doloribus. Illum sequi ut eos quidem illum cupiditate magnam explicabo.</p>
                                        <p>Eum quibusdam cumque rerum quia ut quod repellat aut. Maxime delectus veniam animi quo dolores quis sed. Sit aut quia facere odit voluptatem veniam aut. Et voluptate laboriosam tempora at.</p>

                                    </div>

                                    <div class="blog-comment__meta">
                                        <p class="blog-comment__author"><span>Jana</span></p>
                                        <p class="blog-comment__date"><span>29th July 2023</span></p>
                                    </div>
                                </div>

                                <div class="blog-comment">
                                    <div class="blog-comment__content typography">
                                        <p>Recusandae ipsam fuga asperiores mollitia eum ullam modi autem. Distinctio eum eum quisquam dolore sit quasi tenetur eaque voluptas. Eum ipsa tempora cupiditate magni commodi sint. Eaque qui ullam maxime. Eos vero ut. Voluptas non quia.</p>
                                        <p>Facilis consequatur velit fuga. Incidunt est suscipit earum ut sit explicabo. Sapiente saepe vero autem. Occaecati et saepe aperiam. Eum aut aut eveniet dolores magni. Tempore id excepturi excepturi.</p>

                                    </div>

                                    <div class="blog-comment__meta">
                                        <p class="blog-comment__author"><span>Dolores</span></p>
                                        <p class="blog-comment__date"><span>20th January 2023</span></p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <hr class="mt-8 mb-8" />

                        <h2 class="section__title text-left">Leave a comment</h2>

                        <form action="" method="post" class="grid grid--2 form form--blog-comment">
                            <div class="grid__inner">
                                <div class="grid__item form__field">
                                    <label for="form__comment__name" class="form__label">Name <small>(required)</small></label>
                                    <input type="text" class="form-input" id="form__comment__name" name="name" placeholder="Enter your name…" />
                                </div>

                                <div class="grid__item form__field">
                                    <label for="form__comment__email" class="form__label">Email <small>(required, will not be published)</small></label>
                                    <input type="email" class="form-input" id="form__comment__email" name="email" placeholder="Enter your email address…" />
                                </div>
                            </div>

                            <div class="form__field">
                                <label for="form__comment__comment" class="form__label">Comment <small>(required)</small></label>
                                <textarea class="form-textarea" id="form__comment__comment" name="comment" placeholder="Enter your comment…"></textarea>
                            </div>

                            <button class="button button--green button--inline ">
                                <span>Submit Comment</span>
                            </button>

                        </form>

                    </div>

                    <div class="grid__item">
                        <form action="" method="GET" class="form form--cta form--cta--alt form--cta--blog form--cta--box">

                            <div class="form--cta__container">
                                <label for="form--cta__field-id" class="form__label form__title">Subscribe to our blog</label>

                                <label for="form--cta__field-id" class="form__subtitle">We’ll email you with every new article</label>

                                <div class="form__group">
                                    <input type="text" id="form--cta__field-id" name="field" placeholder="Enter email address…" />
                                    <button class="button button--green button--green--dark ">
                                        <span>Subscribe</span>
                                    </button>

                                </div>
                            </div>
                        </form>

                        <h2 class="section__title section__title--medium">Related Articles</h2>
                        <ul class="listing listing--linked">
                            <li class="listing__item">
                                <a href="#">Expedita Aut Itaque Laborum Nihil Distinctio Est Quas.</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Sunt Aliquid Ex Rerum Voluptates Et Autem Magni Aut.</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Sunt Sit Dolorem Neque Doloremque.</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Nisi Nesciunt Cum Natus.</a>
                            </li>
                        </ul>

                        <div class="card card--cta card--link ">
                            <div class="card__body">
                                <h3 class="card__title">Wild Flower Guide</h3>
                                <img src="../../images/drawings/badger.png" alt="Badger" title="" class="drawing " />

                                <div class="card__content">
                                    <a href="#">Read our guide to wild flowers of woodland and hedgerow</a>
                                </div>
                            </div>
                        </div>

                        <h2 class="section__title section__title--medium">Topics</h2>
                        <ul class="listing listing--linked listing--linked--alt">
                            <li class="listing__item">
                                <a href="#">Natus In Porro</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Omnis Et Et</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Est Illo Quam</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Debitis Et Non</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Tempora Neque Quia</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Enim Nobis Sunt</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Architecto Corrupti Beatae</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Fugit Est Porro</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Molestiae Atque Itaque</a>
                            </li>
                            <li class="listing__item">
                                <a href="#">Laborum Aut Aliquam</a>
                            </li>
                        </ul>

                        <h2 class="section__title section__title--medium mb-3">Tags</h2>
                        <ul class="tags">
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Reiciendis</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Voluptatem</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Ut</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Quod</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Repellat</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Distinctio</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Illo</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Sequi</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Eveniet</span>
                                </a>
                            </li>
                            <li><a href="#" class="tag">
                                    <span class="tag__title">Iusto</span>
                                </a>
                            </li>
                        </ul>

                    </div>
                </div>
            </section>
        </div>
    </section>

    <section class="section section--bg-gray ">
        <div class="section__inner">
            <h2 class="section__title">More from inside the woodlands</h2>

            <section id="8a8b9c30-9b77-47dc-b356-0f7e2bf32782" class="grid">
                <div class="grid__inner">
                    <div class="card card--link ">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/400/225" alt="" title="" />
                            </div>
                        </div>

                        <div class="card__body">
                            <h3 class="card__title">Beatae Magni Adipisci Molestiae Ut Sint Sint Velit.</h3>
                            <div class="card__content">
                                Odio nobis vitae modi vel accusantium in est. Vel dolorem ea deserunt quia nam corrupti. Dolorem consectetur facilis rem rerum ut. Rerum sit beatae hic illo commodi consequatur consequatur doloremque asperiores.
                            </div>
                        </div>
                        <div class="card__banner">
                            Blog
                        </div>
                    </div>

                    <div class="card card--link ">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/400/225" alt="" title="" />
                            </div>
                        </div>

                        <div class="card__body">
                            <h3 class="card__title">Aperiam Qui Exercitationem Eum Qui Sit.</h3>
                            <div class="card__content">
                                Officiis ea quia iusto. Doloribus placeat sunt. Similique quam velit est hic eligendi ratione.
                            </div>
                        </div>
                        <div class="card__banner">
                            Blog
                        </div>
                    </div>

                    <div class="card card--link ">
                        <div class="media">
                            <div class="media__content">
                                <img src="http://picsum.photos/400/225" alt="" title="" />
                            </div>
                        </div>

                        <div class="card__body">
                            <h3 class="card__title">Quo Animi Quia Reprehenderit Officiis Totam.</h3>
                            <div class="card__content">
                                Eius mollitia maiores ut aperiam sed ullam ipsum et. Doloribus ut ipsum. Sequi amet ratione illum blanditiis. Non assumenda animi sunt. Nesciunt ut sint placeat architecto aut rerum dignissimos voluptas.
                            </div>
                        </div>
                        <div class="card__banner">
                            Blog
                        </div>
                    </div>

                </div>
            </section>

            <button class="button button--inline button--green button--green--outline button--transparent ">
                <span>More from inside the woodlands</span>
            </button>

        </div>
    </section>

    <section class="section section--bg-green ">
        <div class="section__inner">
            <form action="" method="GET" class="form form--cta">

                <div class="form--cta__container">
                    <label for="form--cta__field-id" class="form__label form__title">Subscribe to email updates</label>

                    <label for="form--cta__field-id" class="form__subtitle">Get an email when new woods come on to the market</label>

                    <div class="form__group">
                        <input type="text" id="form--cta__field-id" name="field" placeholder="Enter email address…" />
                        <button class="button button--green ">
                            <span>Sign up to mailing list</span>
                        </button>

                    </div>
                </div>
            </form>

        </div>
    </section>
</main>

<footer class="footer">
    <div class="footer__inner">
        <div class="listing listing--social">
            <ul>
                <li class="social social--medium social--instagram">
                    <a href="https://instagram.com" rel="external" title="Instagram">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <title>Instagram icon</title>
                            <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
                        </svg>
                    </a>
                </li>
                <li class="social social--medium social--youtube">
                    <a href="https://youtube.com" rel="external" title="YouTube">
                        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <title>YouTube icon</title>
                            <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z" />
                        </svg>
                    </a>
                </li>
                <li class="social social--medium social--facebook">
                    <a href="https://www.facebook.com" rel="external" title="Facebook">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <title>Facebook icon</title>
                            <path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z" />
                        </svg>
                    </a>
                </li>
            </ul>
        </div>

        <nav class="footer__navigation">
            <ul>
                <li class="footer__navigation__section">
                    <a href="page-buy">Buying a wood</a>
                </li>
                <li><a href="#">Why buy a wood?</a></li>
                <li><a href="#">How to buy a woodland</a></li>
                <li><a href="#">How we support owners</a></li>
                <li><a href="#">Legal guide</a></li>
                <li><a href="#">Finance guide</a></li>
                <li><a href="#">Our covenant</a></li>
                <li><a href="#">Recommended solicitors</a></li>
                <li class="footer__navigation__section">
                    <a href="page-sell">Sell your wood</a>
                </li>
                <li><a href="#">Sell your wood to us</a></li>
                <li><a href="#">Selling your wood through us</a></li>
                <li class="footer__navigation__section">
                    <a href="page-owning">Owning a wood</a>
                </li>
                <li><a href="#">Planning legislation</a></li>
                <li><a href="#">Trees &amp; regulations</a></li>
                <li><a href="#">Access &amp; tracks</a></li>
                <li><a href="#">Management insurance</a></li>
                <li class="footer__navigation__section">
                    <a href="page-videos-guides">Videos &amp; 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 class="page--blog-single">
    {{#> @section }}
        {{#> @grid modifiers="2/3,spaced,divider" }}
            <div class="grid__item">
                {{ render '@components--blog-post' post merge=true }}

                <hr class="mt-4 mb-8" id="discussion" />

                {{ render '@components--blog-comments' comments merge=true }}

                <hr class="mt-8 mb-8" />

                <h2 class="section__title text-left">{{ comments.form.title }}</h2>

                {{ render '@block--blog-comment-form' }}
            </div>

            <div class="grid__item">
                {{ render '@block--cta-form--subscribe--blog' }}

                <h2 class="section__title section__title--medium">{{ titlecase related.title }}</h2>
                {{ render '@components--list--link' related merge=true }}

                {{ render '@block--card--cta-link' card merge=true }}

                <h2 class="section__title section__title--medium">{{ titlecase topics.title }}</h2>
                {{ render '@components--list--link' topics merge=true }}

                <h2 class="section__title section__title--medium mb-3">{{ titlecase tags.title }}</h2>
                {{ render '@block--tags' tags merge=true }}
            </div>
        {{/ @grid }}
    {{/ @section }}

    {{#> @section modifiers='bg-gray' }}
        {{ render '@components--cards' blog merge=true }}
        {{ render '@button' blog merge=true }}
    {{/ @section }}

    {{#> @section modifiers='bg-green' }}
        {{ render '@block--cta-form--subscribe' }}
    {{/ @section }}
</main>

{{ render '@layout-footer' }}