Woodlands.co.uk Component Library

Cards Listing: Single

No notes defined.

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

  <section id="dcf64720-18cf-44c0-9e0b-6763bdc2585e" 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">Quia Esse Soluta Sit Asperiores Praesentium Aspernatur.</h3>
                  <div class="card__content">
                      Qui est dolore vel quibusdam hic voluptatum cum sed. Iste illo ipsum. Et sed temporibus dolores quae consequatur. Beatae rerum explicabo voluptatem labore.
                  </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">Non Non Odit Sit Occaecati Consectetur Rerum Quo.</h3>
                  <div class="card__content">
                      Laudantium natus id aut velit et dolorem fugiat autem aut. Eaque qui animi. Aut recusandae velit rerum numquam voluptatem aut ea repudiandae. Sunt officiis molestias illo magni qui minus qui occaecati placeat.
                  </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">Suscipit Soluta Et Nihil.</h3>
                  <div class="card__content">
                      Temporibus eum omnis perferendis repellat porro et maxime voluptas. Molestias dolor odio aspernatur et officia. Asperiores accusamus aut quaerat voluptas ab culpa suscipit nulla quia. Voluptatem doloribus sint facere voluptatibus. Et occaecati non dolores reiciendis eligendi.
                  </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">Aut Deserunt Quis Cumque.</h3>
                  <div class="card__content">
                      Esse eligendi quo nihil officia sunt voluptatem modi. Sint quis excepturi voluptas nihil deserunt voluptates omnis repudiandae. Maxime in quidem. Modi ea et. Mollitia eius aut at voluptas et expedita rerum 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">Numquam Soluta Quo Accusamus Voluptatum Et Dolorem Dolores Vel Quas.</h3>
                  <div class="card__content">
                      Aspernatur velit inventore. Id fugit qui quo mollitia voluptatem. Omnis quia voluptates error sit. Ab suscipit atque autem id voluptatem. Minus dolores omnis accusantium dolor reprehenderit. Est ut et 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">Quo Earum Cupiditate.</h3>
                  <div class="card__content">
                      Explicabo illum quia deleniti quia excepturi delectus. Ea nisi dolorem eveniet. Totam voluptatibus et vel neque.
                  </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 }}