<div class="listing__content">
    <div class="cell blog-listing__card-wrapper">
        <link media="all" rel="stylesheet" href="/assets/themes/default/css/blog-default-card.css?cb=">

        <div class="blog-card" data-module="card">
            <div class="blog-card__image-wrapper">
                <a href="#">
                    <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
                        <picture>
                            <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                        </picture>
                    </div>
                </a>
            </div>

            <div class="blog-card__info">
                <a href="#">
                    <p class="blog-card__category">
                        Category
                    </p>
                    <p class="blog-card__date">
                        20/02/2019
                    </p>
                    <p class="blog-card__title">
                        Lorem Ipsum
                    </p>
                    <p class="blog-card__subline">
                        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    </p>
                </a>
            </div>

            <a href="#" data-module="cta" class="cta blog-card__cta">
                Click here
            </a>
        </div>
    </div>
    <div class="cell blog-listing__card-wrapper">

        <div class="blog-card" data-module="card">
            <div class="blog-card__image-wrapper">
                <a href="#">
                    <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
                        <picture>
                            <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                        </picture>
                    </div>
                </a>
            </div>

            <div class="blog-card__info">
                <a href="#">
                    <p class="blog-card__category">
                        Category
                    </p>
                    <p class="blog-card__date">
                        20/02/2019
                    </p>
                    <p class="blog-card__title">
                        Lorem Ipsum
                    </p>
                    <p class="blog-card__subline">
                        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    </p>
                </a>
            </div>

            <a href="#" data-module="cta" class="cta blog-card__cta">
                Click here
            </a>
        </div>
    </div>
    <div class="cell blog-listing__card-wrapper">

        <div class="blog-card" data-module="card">
            <div class="blog-card__image-wrapper">
                <a href="#">
                    <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
                        <picture>
                            <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                        </picture>
                    </div>
                </a>
            </div>

            <div class="blog-card__info">
                <a href="#">
                    <p class="blog-card__category">
                        Category
                    </p>
                    <p class="blog-card__date">
                        20/02/2019
                    </p>
                    <p class="blog-card__title">
                        Lorem Ipsum
                    </p>
                    <p class="blog-card__subline">
                        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    </p>
                </a>
            </div>

            <a href="#" data-module="cta" class="cta blog-card__cta">
                Click here
            </a>
        </div>
    </div>
    <div class="cell blog-listing__card-wrapper">

        <div class="blog-card" data-module="card">
            <div class="blog-card__image-wrapper">
                <a href="#">
                    <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
                        <picture>
                            <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                        </picture>
                    </div>
                </a>
            </div>

            <div class="blog-card__info">
                <a href="#">
                    <p class="blog-card__category">
                        Category
                    </p>
                    <p class="blog-card__date">
                        20/02/2019
                    </p>
                    <p class="blog-card__title">
                        Lorem Ipsum
                    </p>
                    <p class="blog-card__subline">
                        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    </p>
                </a>
            </div>

            <a href="#" data-module="cta" class="cta blog-card__cta">
                Click here
            </a>
        </div>
    </div>
    <div class="cell blog-listing__card-wrapper">

        <div class="blog-card" data-module="card">
            <div class="blog-card__image-wrapper">
                <a href="#">
                    <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
                        <picture>
                            <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                        </picture>
                    </div>
                </a>
            </div>

            <div class="blog-card__info">
                <a href="#">
                    <p class="blog-card__category">
                        Category
                    </p>
                    <p class="blog-card__date">
                        20/02/2019
                    </p>
                    <p class="blog-card__title">
                        Lorem Ipsum
                    </p>
                    <p class="blog-card__subline">
                        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    </p>
                </a>
            </div>

            <a href="#" data-module="cta" class="cta blog-card__cta">
                Click here
            </a>
        </div>
    </div>
    <div class="cell blog-listing__card-wrapper">

        <div class="blog-card" data-module="card">
            <div class="blog-card__image-wrapper">
                <a href="#">
                    <div class="blog-card__image lazy-load-image" data-module="imageLazyLoad">
                        <picture>
                            <source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
                            <img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
                        </picture>
                    </div>
                </a>
            </div>

            <div class="blog-card__info">
                <a href="#">
                    <p class="blog-card__category">
                        Category
                    </p>
                    <p class="blog-card__date">
                        20/02/2019
                    </p>
                    <p class="blog-card__title">
                        Lorem Ipsum
                    </p>
                    <p class="blog-card__subline">
                        Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
                    </p>
                </a>
            </div>

            <a href="#" data-module="cta" class="cta blog-card__cta">
                Click here
            </a>
        </div>
    </div>
</div>
<div class="listing__content">
  {{#if data}}
  {{#each data}}
  <div class="cell blog-listing__card-wrapper">
    {{> @blog-card theme=../theme }}
  </div>
  {{/each}}
  {{else}}
  <p class="blog-listing__no-results">{{noResultsText}}</p>
  {{/if}}
</div>
{
  "theme": "default",
  "firstInstance": true,
  "data": [
    {
      "firstInstance": true,
      "image": {
        "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
        "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
          }
        ]
      },
      "categories": [
        "Category"
      ],
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "image": {
        "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
        "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
          }
        ]
      },
      "categories": [
        "Category"
      ],
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "image": {
        "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
        "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
          }
        ]
      },
      "categories": [
        "Category"
      ],
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "image": {
        "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
        "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
          }
        ]
      },
      "categories": [
        "Category"
      ],
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "image": {
        "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
        "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
          }
        ]
      },
      "categories": [
        "Category"
      ],
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    },
    {
      "image": {
        "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
        "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
        "sources": [
          {
            "type": "image/jpeg",
            "desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
          }
        ]
      },
      "categories": [
        "Category"
      ],
      "date": "20/02/2019",
      "title": "Lorem Ipsum",
      "subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
      "cta": {
        "url": "#",
        "text": "Click here"
      }
    }
  ]
}
  • Handle: @blog-listing-api-result
  • Preview:
  • Filesystem Path: source/patterns/03-components/listings/_blog-listing/blog-listing-api-result.hbs
  • References (1): @blog-card

No notes defined.