Woodlands.co.uk Component Library

Cards Listing: Single

No notes defined.

<h2 class="section__title">Single column card listing</h2>

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

              <div class="card__body">
                  <h3 class="card__title">Consequatur Quis Quis Saepe.</h3>
                  <div class="card__content">
                      Quia qui et mollitia sed. Aperiam voluptatem eum. Nihil consequatur alias ut magni et dolorem fuga consequatur eligendi. Dolorem et ipsum facere hic explicabo aut neque beatae.
                  </div>
              </div>
              <div class="card__banner">
                  Banner
              </div>
          </div>

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

              <div class="card__body">
                  <h3 class="card__title">Consequatur Illum Sunt.</h3>
                  <div class="card__content">
                      Repellendus sed dolorem fugit sit doloremque voluptas. Totam ullam dicta ducimus sit est qui aut. Non minima illum. Alias quis non quis voluptas nulla reiciendis. Eos voluptatem ab perspiciatis occaecati ut facere molestiae omnis.
                  </div>
              </div>
              <div class="card__banner">
                  Banner
              </div>
          </div>

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

              <div class="card__body">
                  <h3 class="card__title">Saepe Laudantium Esse Velit Ratione Exercitationem Sit Voluptas Et.</h3>
                  <div class="card__content">
                      Ratione nobis omnis. Praesentium at optio rerum. Amet quas non illo exercitationem sequi ut a. At fuga quae in voluptate error reiciendis voluptas quibusdam aut.
                  </div>
              </div>
              <div class="card__banner">
                  Banner
              </div>
          </div>

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

              <div class="card__body">
                  <h3 class="card__title">Error Ipsam Et.</h3>
                  <div class="card__content">
                      Eveniet laudantium similique molestiae dicta eligendi. Sint exercitationem non iusto consectetur. Vitae accusamus fugiat est explicabo et quia enim aut. Dolor sint unde magni quasi sit tempore error. Esse neque ut quia enim autem corporis vel soluta omnis. Et aut sequi ab saepe dolor tenetur voluptatem.
                  </div>
              </div>
              <div class="card__banner">
                  Banner
              </div>
          </div>

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

              <div class="card__body">
                  <h3 class="card__title">Laboriosam Sit Adipisci Odio Optio Id Voluptate Consequatur Reprehenderit.</h3>
                  <div class="card__content">
                      Soluta reprehenderit officia consequatur esse quia sed. Aperiam tempora doloribus qui quas magnam doloribus nesciunt. Eos quisquam quia accusamus quis impedit.
                  </div>
              </div>
              <div class="card__banner">
                  Banner
              </div>
          </div>

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

              <div class="card__body">
                  <h3 class="card__title">Tempora Numquam Tenetur.</h3>
                  <div class="card__content">
                      Qui ducimus voluptatem qui commodi culpa enim. Qui rerum voluptate eligendi. Aut ex nesciunt aspernatur et. Perferendis culpa esse aut officia et. Dignissimos voluptate accusantium saepe odit ut. Corporis porro soluta aut blanditiis dicta temporibus ut quod laboriosam.
                  </div>
              </div>
              <div class="card__banner">
                  Banner
              </div>
          </div>

      </div>
  </section>
 
{{#if title}}
  <h2 class="section__title">{{ title }}</h2>
{{/if}}

{{#> @grid modifiers=modifiers id=id }}
  {{#each cards }}
  {{#if ../woodlands }}
    {{#if ../simple }}
      {{ render '@block--card--woodland-map' this merge=true }}
    {{else}}
      {{ render '@block--card--woodland' this merge=true }}
    {{/if}}
  {{else if ../blog }}
    {{#if ../simple }}
      {{ render '@block--card--blog' this merge=true }}
    {{else}}
      {{ render '@block--card--blog' this merge=true }}
    {{/if}}
  {{ else }}
    {{ render '@block--card' this merge=true }}
  {{/if }}
  {{/each}}
{{/ @grid }}