demo/templates/demo/cards.html
{% extends 'demo/base.html' %}
{% load static %}
{% load demo_tags %}
{% load directory_components %}
{% load code from demo_tags %}
{% block css_layout_class %}components{% endblock css_layout_class %}
{% block content %}
{% static 'images/card_image01.jpg' as card_image01 %}
{% static 'images/card_image02.jpg' as card_image02 %}
<div class="container">
{% breadcrumbs 'Cards' %}<a href="/">Home</a>{% endbreadcrumbs %}
</div>
<section class="underline-black">
<div class="container">
<div class="width-two-thirds">
<h1 class="heading-xlarge">Cards</h1>
<p>Cards stretch to fit their container. Grid columns collapse to one on smaller screens.</p>
<p>Load these template tags to use cards:</p>
</div>
{% code 'django' %}
{% load card labelled_card labelled_image_card from directory_components %}
{% endcode %}
<br>
<br>
<div class="width-two-thirds">
<p>A custom ID can be assigned to the card which also creates IDs for the link and image with the suffixes <code>-link</code> and <code>-image</code> respectively. See examples below.</p>
</div>
</div>
</section>
<section class="underline-black background-stone-30">
<div class="container">
<div class="width-two-thirds">
<h2 class="heading-large">CTA card</h2>
<p>An image with a call to action.</p>
</div>
<div class="flex-grid">
<div class="column-half">
{% cta_card image_url=card_image01 text="Read our market guide for Germany" %}
{% code 'django' %}
{% cta_card image_url=card_image01 text="Read our market guide for Germany" %}
{% endcode %}
</div>
<div class="column-half">
{% cta_card with_arrow=True image_url=card_image02 text="Tell us what help you need" %}
{% code 'django' %}
{% cta_card with_arrow=True image_url=card_image02 text="Tell us what help you need" %}
{% endcode %}
</div>
</div>
<h3 class="heading-medium">HTML markup</h3>
{% code 'html' %}
<div class="cta-card">
<img src="/static/images/card_image01.jpg" alt="">
<div class="link-container">
<a class="cta-link " href=""><span>Read our market guide for Germany</span></a>
</div>
</div>
{% endcode %}
</div>
</section>
<section class="underline-black background-stone-30">
<div class="container">
<h2 class="heading-medium">Image with caption</h2>
<div class="grid-row">
<div class="column-half">
{% image_with_caption image_url=card_image01 main_caption="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor." sub_caption="Quis nostrud exercitation ullamco laboris" %}
</div>
<div class="column-half">
{% code 'django' %}
{% image_with_caption image_url=card_image01 main_caption="Main image caption" sub_caption="Secondary image caption" %}
{% endcode %}
</div>
</div>
<div class="grid-row">
<div class="column-half">
<h2 class="heading-medium">Linked card with image and description</h2>
{% card card_id='card-example-image-description' img_src=card_image02 url='#' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' %}
{% code 'django' %}
{% card card_id="card-example-image-description" img_src=card_image02 url='#' description='Lorem ipsum dolor sit amet...' %}
{% endcode %}
</div>
<div class="column-half">
<h2 class="heading-medium">Linked card with image and title</h2>
{% static 'images/card_image01.jpg' as card_image01 %}
{% static 'images/card_image02.jpg' as card_image02 %}
{% card card_id="card-example-image-title" img_src=card_image02 url='#' heading='Lorem ipsum' %}
{% code 'django' %}
{% card card_id="card-example-image-title" img_src=card_image02 url='#' heading='Lorem ipsum' %}
{% endcode %}
</div>
</div>
<div class="grid-row">
<div class="column-half">
<h2 class="heading-medium">Unlinked card with image and html content</h2>
{% static 'images/card_image01.jpg' as card_image01 %}
{% static 'images/card_image02.jpg' as card_image02 %}
{% card img_src=card_image02 img_alt='Card image description' title='Card title' html_content='<h4>Card title</h4><p>Cards can also have html content</p><a href="#" class="button button-blue">Button</a>' %}
{% code 'django' %}
{% card img_src=card_image02 title='Card title' html_content='...' %}
{% endcode %}
</div>
<div class="column-half">
<h2 class="heading-medium">Linked card with title, description, no image</h2>
{% card url='#' title='Card title' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' %}
{% code 'django' %}
{% card url='#' title='Card title' description='Lorem ipsum...' %}
{% endcode %}
</div>
</div>
<div class="grid-row">
<div class="column-half">
<h2 class="heading-medium">Labelled linked card with image, title and description</h2>
{% labelled_card card_id="labelled-card-example-image-title-description" img_src=card_image02 img_alt='Card image description' url='#' title='Card title' description='Lorem ipsum dolor sit amet.' %}
{% code 'django' %}
{% labelled_card card_id="labelled-card-example-image-title-description" img_src=card_image02 img_alt='Card image description' url='#' title='Card title' description='Lorem ipsum dolor sit amet.' %}
{% endcode %}
</div>
<div class="column-half">
<h2 class="heading-medium">Labelled linked card with title and description</h2>
{% labelled_card url='#' title='Card title' description='Lorem ipsum dolor sit amet.' %}
{% code 'django' %}
{% labelled_card url='#' title='Card title' description='Lorem ipsum dolor sit amet.' %}
{% endcode %}
</div>
</div>
<div class="grid-row">
<div class="column-half">
<h2 class="heading-medium">Labelled linked card with image and title</h2>
{% labelled_image_card img_src=card_image02 img_alt='Card title' url='#' title='Card title' %}
{% code 'django' %}
{% labelled_image_card img_src=card_image02 img_alt='Card image description' url='#' title='Card title' %}
{% endcode %}
</div>
<div class="column-half">
<h2 class="heading-medium">Labelled linked card with title (if no image is set)</h2>
<p>This is so that if an image is missing the layout of card grids does not break.</p>
{% labelled_image_card url='#' title='Card title' %}
{% code 'django' %}
{% labelled_image_card url='#' title='Card title' %}
{% endcode %}
</div>
</div>
<div class="grid-row">
<div class="column-half">
<h2 class="heading-medium">Linked card with external link, opens in new window</h2>
{% card card_id='card-example-image-description' img_src=card_image02 url='#' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' external_link=True %}
{% code 'django' %}
{% card card_id="card-example-image-description" img_src=card_image02 url='#' description='Lorem ipsum dolor sit amet...' external_link=True %}
{% endcode %}
</div>
<div class="column-half">
<h2 class="heading-medium">Linked card with transparent background, subheading and no padding</h2>
{% card url='#' title='Card title' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.' subheading='Article' no_padding_card=True transparent_card=True %}
{% code 'django' %}
{% card url='#' title='Card title' description='Lorem ipsum...' subheading='Article' no_padding_card=True transparent_card=True %}
{% endcode %}
</div>
</div>
<h2 class="heading-medium">Flex grid</h2>
<p class="width-two-thirds">Use the <code>.flex-grid</code> class to align the heights of cards in a grid.</p>
<div class="flex-grid">
<div class="column-third">
{% card url='#' title='Card title' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' %}
</div>
<div class="column-two-thirds">
{% card img_src=card_image01 img_alt='Card image description' url='#' title='Card title' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' %}
</div>
</div>
<div class="flex-grid">
<div class="column-quarter">
{% labelled_image_card img_src=card_image02 img_alt='Card image description' url='#' title='Card title' %}
</div>
<div class="column-quarter">
{% labelled_image_card img_src=card_image02 img_alt='Card image description' url='#' title='Card title' %}
</div>
<div class="column-half">
{% card url='#' title='Card title' description='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' %}
</div>
</div>
</div>
</section>
{% endblock %}