<article class="Card Card--logo" aria-labelledby="card-04-heading">
    <img class="Card-logo" src="https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png" alt="Royal Borough of Kensington and Chelsea">
    <div class="Card-primary">
        <header>
            <a href="#">
                <h2 class="Card-title" id="card-04-heading">Royal Borough of Kensington and Chelsea</h2>

            </a>
        </header>
        <div class="Card-category">Opinion</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 class="Card-author">
            <div class="Author">
                <img class="Author-image" src="/assets/img/authors/sm/edv.png" alt="Ellen DeVries">
                <div class="Author-name">Ellen DeVries</div>
            </div>
            <!--/.Author-->
        </div>
        <!--/.Card-author-->
    </div>
    <!--/.Card-primary-->
</article>
<!--/.Card-->
{% set cardHeadingId = cardId|default('card') ~ '-heading' %}
{% set cardHeading %}
<h2 class="Card-title"{% if cardHeaderColour %} 
    style="color:{{ cardHeaderColour }}"{% endif %}
    id="{{cardHeadingId}}"
    >{{ cardTitle }}</h2>
{% endset %}

<article class="Card {% if cardModifiers %}Card{{ cardModifiers|join(' Card') }}{% endif %}"
    {% if cardMiscStyles %} style="{{ cardMiscStyles }}"{% endif %}
    aria-labelledby="{{cardHeadingId}}"
    >
    {% if cardBar %}
        <div class="Bar"{% if cardBarColour %} style="color:{{ cardBarColour }}"{% endif %}></div>
    {% endif %}
    {% if cardLogoAlt %}
        {% if cardLogoSrc %}
        <img class="Card-logo" src="{{ cardLogoSrc }}" alt="{{ cardLogoAlt }}">
        {% else %}
        <h3 class="Heading Heading--context">{{ cardLogoAlt }}</h3>
        {% endif %}
    {% endif %}
    <div class="Card-primary">
        <header>
            {% if cardUrl %}
            <a href="{{ cardUrl }}">
                {{cardHeading}}
            </a>
            {% else %}
            {{cardHeading}}
            {% 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 cardLinkText %}
            <a href="{{ cardUrl }}"{% if cardLinkLabel %} aria-label="{{ cardLinkLabel }}"{% endif %}>{{cardLinkText}}</a>
        {% endif %}
        {% if authorImage or authorName %}
        <div class="Card-author">
            {% include '@author' %}
        </div><!--/.Card-author-->
        {% endif %}
    </div><!--/.Card-primary-->
</article><!--/.Card-->
{
  "cardBar": null,
  "cardTitle": "Royal Borough of Kensington and Chelsea",
  "cardCategory": "Opinion",
  "cardMeta": "2 weeks ago",
  "cardDescription": "In my previous article, I wrote about some of the misconceptions with “agile” that I see in organisations.",
  "cardUrl": "#",
  "cardId": "card-04",
  "cardModifiers": [
    "--logo"
  ],
  "cardLogoSrc": "https://clearleft-v5.s3.amazonaws.com/uploads/rb-kensington-chelsea-2x.png",
  "cardLogoAlt": "Royal Borough of Kensington and Chelsea",
  "authorImage": "/assets/img/authors/sm/edv.png",
  "authorName": "Ellen DeVries"
}

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).