<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'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": "© 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": "#"
}
]
}
This is a generic list of basic cards.