Woodlands.co.uk Component Library

Cards Listing: Single

No notes defined.

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

  <section id="36e17b40-b942-48c0-980b-ff52d48936ab" 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">Sequi Quidem Repellat Iste Ea Expedita Est Vero Error Rerum.</h3>
                  <div class="card__content">
                      Mollitia ullam doloribus. Repudiandae corporis et optio voluptas. Molestiae aut quisquam temporibus praesentium pariatur. Aut itaque quia repellat ea harum fuga recusandae atque excepturi.
                  </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">Et Et Veritatis Autem Autem Nemo Aut Illum.</h3>
                  <div class="card__content">
                      Molestiae iusto et. Provident hic tempora vitae fugiat mollitia voluptatibus quaerat libero. Dolor iure debitis. Ut dolor natus.
                  </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">Ea Dolorum Dolores Molestias Nam Quidem Accusantium Vel Autem.</h3>
                  <div class="card__content">
                      Consequatur cupiditate facilis reprehenderit. Et eos voluptate. Et totam aliquam accusantium assumenda distinctio earum cum rerum. Voluptatem blanditiis aut praesentium cumque vero neque.
                  </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">Voluptas Fugiat Assumenda Voluptatem Laudantium Fugit Asperiores Id Temporibus Est.</h3>
                  <div class="card__content">
                      Laudantium quae rem ipsa in dolore delectus voluptates. Ipsum quas assumenda et sint adipisci quis unde harum ut. Officiis tempora nam nihil.
                  </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">Quod Dolores Excepturi Ut Ab Nam.</h3>
                  <div class="card__content">
                      Deserunt repellat quos sapiente tenetur non ut quibusdam et esse. Temporibus odit et quisquam quis fugiat est nisi corporis ut. Voluptatum consectetur nulla atque ea dolores dolor mollitia occaecati. Exercitationem quidem mollitia consequatur ex. Vero quis recusandae quidem dolor aut veniam sint sed. Vel earum 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">Unde Explicabo Sed Dignissimos Dolor Quia Consectetur.</h3>
                  <div class="card__content">
                      Ullam qui qui magnam. Sed natus placeat at voluptas illum sapiente ratione aperiam dolorem. Repellat quasi quidem et. Vero consequatur labore reprehenderit et in sint.
                  </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 }}