<ul class="grav-c-list-cards-basic">
    <li>
        <div class="grav-c-card-basic">

            <img src="../../images/img-random-1.png" alt="Brief description of this fascinating image">

            <h3 class="grav-c-card-basic__title">Some fascinating, attention-grabbing headling</h3>

            <p>Ideally, with a click-baity tagline that entices to you to visit!</p>
        </div>
    </li>
    <li>
        <div class="grav-c-card-basic">

            <img src="../../images/img-random-1.png" alt="Phasellus tempus, orci non mattis">

            <h3 class="grav-c-card-basic__title">Labore et dolore magna aliqua</h3>

            <p>Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.</p>
        </div>
    </li>
    <li>
        <div class="grav-c-card-basic">
            <a href="#">
                <img src="../../images/img-random-1.png" alt="lolcat says hi">
                <svg role="img" aria-label="See more" width="" height="">
                    <use xlink:href="#ui-arrow-right"></use>
                </svg>
                <h3 class="grav-c-card-basic__title">Can has linkburger?</h3>
            </a>
            <p>I can has!</p>
        </div>
    </li>
    <li>
        <div class="grav-c-card-basic">

            <img src="../../images/img-random-1.png" alt="Bring to the table win-win survival strategies">

            <h3 class="grav-c-card-basic__title">Nanotechnology immersion along the information highway</h3>

            <p>Leverage agile frameworks to provide a robust synopsis for high level overviews.</p>
        </div>
    </li>
    <li>
        <div class="grav-c-card-basic">

            <img src="../../images/img-random-1.png" alt="Altizzle ma image, yo">

            <h3 class="grav-c-card-basic__title">Ma nizzle eget ipsum izzle est ullamcorpizzle yo.</h3>

            <p>That&#39;s the shizzle nizzle mi non get down get down posuere bibendum. Aliquizzle dope viverra get down get down.</p>
        </div>
    </li>
    <li>
        <div class="grav-c-card-basic">

            <img src="../../images/img-random-1.png" alt="Yarrrrr">

            <h3 class="grav-c-card-basic__title">Bounty black spot landlubber</h3>

            <p>Plate Fleet yawl careen Pirate Round jolly boat league Admiral of the Black topsail holystone me.</p>
        </div>
    </li>
    <li>
        <div class="grav-c-card-basic">
            <a href="#">
                <img src="../../images/img-random-1.png" alt="Out of scope">
                <svg role="img" aria-label="See more" width="" height="">
                    <use xlink:href="#ui-arrow-right"></use>
                </svg>
                <h3 class="grav-c-card-basic__title">Out of scope back of the net shelfware</h3>
            </a>
            <p>Paddle on both sides. We need distributors to evangelize the new line to local markets, or I have zero cycles for this, but we need to leverage our synergies.</p>
        </div>
    </li>
</ul>
{%- extends '@unordered-list' -%}

{%- from '@image' import image -%}

{%- from '@card-basic' import cardBasic -%}

{#
  Extend the unordered-list's unorderedListItem block
  to insert a card
#}
{%- block unorderedListItem -%}
  <li>
    {{ cardBasic(item.title, item.image, item.content, item.href) | safe }}
  </li>
{% endblock -%}


{# Reusable macro for other templates to import: #}
{%- macro listCardsBasic(cardsBasic) -%}
  {{ unorderedList(cardsBasic, "grav-c-list-cards-basic") | safe }}
{%- endmacro -%}

{# Example rendering: #}
{%- block example -%}
  {{ listCardsBasic(cardsBasic) | safe }}
{%- endblock -%}
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ]
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ]
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  },
  "cardsBasic": [
    {
      "title": "Some fascinating, attention-grabbing headling",
      "content": "Ideally, with a click-baity tagline that entices to you to visit!",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "Brief description of this fascinating image"
      }
    },
    {
      "title": "Labore et dolore magna aliqua",
      "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "Phasellus tempus, orci non mattis"
      }
    },
    {
      "title": "Can has linkburger?",
      "content": "I can has!",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "lolcat says hi"
      },
      "href": "#"
    },
    {
      "title": "Nanotechnology immersion along the information highway",
      "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "Bring to the table win-win survival strategies"
      }
    },
    {
      "title": "Ma nizzle eget ipsum izzle est ullamcorpizzle yo.",
      "content": "That's the shizzle nizzle mi non get down get down posuere bibendum. Aliquizzle dope viverra get down get down.",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "Altizzle ma image, yo"
      }
    },
    {
      "title": "Bounty black spot landlubber",
      "content": "Plate Fleet yawl careen Pirate Round jolly boat league Admiral of the Black topsail holystone me.",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "Yarrrrr"
      }
    },
    {
      "title": "Out of scope back of the net shelfware",
      "content": "Paddle on both sides. We need distributors to evangelize the new line to local markets, or I have zero cycles for this, but we need to leverage our synergies.",
      "image": {
        "src": "../../images/img-random-1.png",
        "alt": "Out of scope"
      },
      "href": "#"
    }
  ]
}

Purpose

This is a generic list of basic cards.