<article class="Card Card--tiny-lesson">
    <div class="Bar"></div>
    <div class="Card-primary">
        <header>
            <a href="#">
                <h3 class="Card-title">Article Title Goes here</h3>
            </a>
        </header>
        <div class="Card-category">Tiny Lesson</div>
        <div class="Card-meta">2 weeks ago</div>
        <p class="Card-description">In my previous article, I wrote about some of the misconceptions with “agile” that I see in organisations.</p>
    </div>
    <!--/.Card-primary-->
</article>
<!--/.Card-->
<article class="Card {% if cardModifiers %}Card{{ cardModifiers|join(' Card') }}{% endif %}"{% if cardMiscStyles %} style="{{ cardMiscStyles }}"{% endif %}>
    {% if cardBar %}
        <div class="Bar"{% if cardBarColour %} style="color:{{ cardBarColour }}"{% endif %}></div>
    {% endif %}
    {% if cardLogoAlt %}
        {% if cardLogoSrc %}
        <img src="{{ cardLogoSrc }}" alt="{{ cardLogoAlt }}">
        {% else %}
        <h3 class="Heading Heading--context">{{ cardLogoAlt }}</h3>
        {% endif %}
    {% endif %}
    <div class="Card-primary">
        <header>
            {% if cardUrl %}
            <a href="{{ cardUrl }}">
                <h3 class="Card-title"{% if cardHeaderColour %} style="color:{{ cardHeaderColour }}"{% endif %}>{{ cardTitle }}</h3>
            </a>
            {% else %}
            <h3 class="Card-title"{% if cardHeaderColour %} style="color:{{ cardHeaderColour }}"{% endif %}>{{ cardTitle }}</h3>
            {% endif %}
        </header>
        {% if cardCategory %}<div class="Card-category">{{ cardCategory }}</div>{% endif %}
        {% if cardMeta %}<div class="Card-meta">{{ cardMeta }}</div>{% endif %}
        {% if cardDescription %}<p class="Card-description">{{ cardDescription }}</p>{% endif %}
        {% if cardLink %}
            <a href="{{ cardUrl }}">Read the case study</a>
        {% endif %}
        {% if authorImage or authorName %}
        <div class="Card-author">
            {% include '@author' %}
        </div><!--/.Card-author-->
        {% endif %}
    </div><!--/.Card-primary-->
</article><!--/.Card-->
{
  "cardBar": true,
  "cardTitle": "Article Title Goes here",
  "cardCategory": "Tiny Lesson",
  "cardMeta": "2 weeks ago",
  "cardDescription": "In my previous article, I wrote about some of the misconceptions with “agile” that I see in organisations.",
  "cardUrl": "#",
  "cardModifiers": [
    "--tiny-lesson"
  ]
}

Cards are a type of content block for displaying small chunks of information. They can hold more information than an IndexCard. They are flexible and their width will expand to fit their container. Cards are usually displayed in groups (e.g. on the blog page).