Blog archive / listing page.
Note, there must be a class of .page--blog 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 & 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 class="page--blog">
<section class="section section--bg-yellow section--short ">
<div class="section__inner">
<div class="hero" data-src="">
<h1>Blog</h1>
</div>
</div>
</section>
<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">
<section id="8a8b9c30-9b77-47dc-b356-0f7e2bf32782" class="grid grid--single">
<div class="grid__inner">
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Qui Soluta Laborum</h3>
<p class="card__meta">by Berenice, 20th December 2022, 52610 comments</p>
<div class="card__content">
Asperiores impedit consectetur id consequatur vel porro consequatur non. Voluptatum est veniam dignissimos similique eum. Delectus et accusamus. Consequatur quia pariatur molestiae consequatur. Voluptate dolore velit aut eaque nostrum. Dignissimos eum ut et ut non animi sint enim rerum. Facere itaque velit suscipit. Illum dolorem velit et impedit quas repellat. Dolores nam et quaerat ad est quo molestiae. Minima molestiae sed.
</div>
</div>
</a>
</div>
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Et Et Quo</h3>
<p class="card__meta">by Adeline, 14th December 2022, 79461 comments</p>
<div class="card__content">
Omnis ab dolor illo dolor qui fuga quae vero magni. Sit est commodi cum animi. Ut qui iste. Similique suscipit totam velit eum. Perspiciatis magni corrupti architecto nostrum in dolor odit. Inventore ut iusto dignissimos nulla sint est velit. Quia qui consequatur repudiandae voluptates. Veniam sint iure quo ea dolorem impedit voluptates quod ipsum. Blanditiis qui est ullam dolorum quos odio quia est. Quia earum rerum molestiae temporibus dolorem rerum quod.
</div>
</div>
</a>
</div>
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Consectetur Vel Enim</h3>
<p class="card__meta">by Bryon, 18th November 2022, 17397 comments</p>
<div class="card__content">
Quidem aut est sint cum repellat. Necessitatibus rerum numquam natus tenetur magni quia tenetur. Est ut laboriosam quisquam laboriosam repellendus ipsam exercitationem omnis. Dolore quidem soluta ducimus repellat qui quod velit. Esse facere temporibus tempore provident et quaerat ad. Dolore quis voluptatem reiciendis quidem dolores saepe voluptatibus. Nisi aliquam quam nesciunt neque voluptas est. Sunt perspiciatis saepe et eum non explicabo aut. Animi ut libero quo quis. Fugiat consequuntur itaque et.
</div>
</div>
</a>
</div>
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Libero Porro Delectus</h3>
<p class="card__meta">by Muhammad, 30th April 2023, 67197 comments</p>
<div class="card__content">
Ut est quia modi possimus dolores consequatur rem adipisci mollitia. Sed sed consequatur in in. Repellendus aut id vel magnam. Qui ut reprehenderit sint ratione illo explicabo blanditiis eum. Ipsam et consequatur sequi est rerum. Veniam voluptatem fuga aut ut soluta molestias nihil. Provident quibusdam sed dolor labore eos voluptate quos eos. Commodi eum illum dolore temporibus omnis pariatur eum. Est sit alias deserunt qui. Consequuntur ad voluptas facere magnam nemo voluptatem modi sed.
</div>
</div>
</a>
</div>
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Incidunt Neque Doloremque</h3>
<p class="card__meta">by Myrna, 27th November 2022, 59236 comments</p>
<div class="card__content">
Voluptas rerum eos molestiae. Accusamus qui illo et ut qui blanditiis esse harum perferendis. Et nam est nihil dignissimos molestiae eum eum similique inventore. Ut laboriosam et placeat in cum ullam iste eveniet exercitationem. Dolor aut vero consequatur velit qui autem nisi nihil. Omnis ea odio consequuntur repellat perferendis excepturi voluptatem. Esse dolorem magni inventore. Libero et explicabo aliquid voluptatibus laudantium nulla. Temporibus provident amet id et saepe ut. Nostrum accusamus quo temporibus incidunt aut ut veniam at.
</div>
</div>
</a>
</div>
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Perspiciatis Et Porro</h3>
<p class="card__meta">by Scotty, 25th October 2022, 86629 comments</p>
<div class="card__content">
Ut cum recusandae autem. Aperiam id minima sed. Numquam ea tempore. Rerum doloremque est. Fuga amet error. Quo ut officiis. Sit quod aspernatur vero sed et ut ullam quibusdam nam. Ratione aliquam qui. Quibusdam voluptas laboriosam rerum vitae fugit non. Voluptatem inventore voluptatem est aut minima cupiditate.
</div>
</div>
</a>
</div>
</div>
</section>
<a href="#more-blog-posts" class="button button--inline button--green button--green--outline ">
<span>See more blog posts</span>
</a>
</div>
<div class="grid__item">
<h2 class="section__title section__title--medium">Topics</h2>
<ul class="listing listing--linked">
<li class="listing__item">
<a href="#">Quo Quam Corporis</a>
</li>
<li class="listing__item">
<a href="#">Voluptatem At Et</a>
</li>
<li class="listing__item">
<a href="#">Et Maiores Aut</a>
</li>
<li class="listing__item">
<a href="#">Fuga Dicta Omnis</a>
</li>
<li class="listing__item">
<a href="#">Odit Quasi Nemo</a>
</li>
<li class="listing__item">
<a href="#">Qui Optio Doloremque</a>
</li>
<li class="listing__item">
<a href="#">Quia Illo Dolorem</a>
</li>
<li class="listing__item">
<a href="#">Culpa Placeat Voluptates</a>
</li>
</ul>
<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 mb-3">Tags</h2>
<ul class="tags">
<li><a href="#" class="tag">
<span class="tag__title">Necessitatibus</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Sed</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Veniam</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Quis</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Non</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Est</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Quisquam</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Et</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">Ut</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Non</span>
</a>
</li>
<li><a href="#" class="tag">
<span class="tag__title">Dolorem</span>
</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>
</div>
</div>
</section>
</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>
</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 class="page--blog">
{{#> @section modifiers='bg-yellow,short' }}
{{ render '@block--hero' hero }}
{{/ @section }}
{{#> @section }}
{{#> @grid modifiers="2/3,spaced,divider" }}
<div class="grid__item">
{{ render '@components--cards' blog merge=true }}
{{ render '@button' blog merge=true }}
</div>
<div class="grid__item">
<h2 class="section__title section__title--medium">{{ titlecase topics.title }}</h2>
{{ render '@components--list--link' topics merge=true }}
{{ render '@block--cta-form--subscribe--blog' }}
<h2 class="section__title section__title--medium mb-3">{{ titlecase tags.title }}</h2>
{{ render '@block--tags' tags merge=true }}
{{ render '@block--card--cta-link' card merge=true }}
</div>
{{/ @grid }}
{{/ @section }}
{{#> @section modifiers='bg-green' }}
{{ render '@block--cta-form' }}
{{/ @section }}
</main>
{{ render '@layout-footer' }}