<article class="Card Card--springboard" aria-labelledby="card-01-heading">
    <div class="Card-primary">
        <header>
            <h2 class="Card-title" id="card-01-heading">Article Title Goes here</h2>

        </header>
        <p class="Card-description">
            <p>The first phase in any design process is research. Our experienced researchers help you understand your customers, challenge assumptions, and nurture innovation ideas. They excel in</p>
            <ul>
                <li>Stakeholder research</li>
                <li>Generative user research</li>
                <li>Usability testing and heuristic analysis</li>
                <li>Emerging trend, behaviour & market analysis</li>
                <li>Behavioural segmentation and persona creation</li>
            </ul>
            <p>The first phase in any design process is research. Our experienced researchers help you understand your customers, challenge assumptions, and nurture innovation ideas. They excel in</p>
        </p>
        <div class="Card-link">
            <a href="#" class="MegaLink MegaLink--springboard">
                A link to somewhere
            </a>
        </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) or ('--springboard' not in cardModifiers) %}
        <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 %}
        {% if megaLinkURL and megaLinkText %}
        <div class="Card-link">
            {% include '@mega-link' with {megaLinkModifier: '--springboard'} %}
        </div><!--/.Card-author-->
        {% endif %}
    </div><!--/.Card-primary-->
</article><!--/.Card-->
{
  "cardBar": null,
  "cardTitle": "Article Title Goes here",
  "cardCategory": null,
  "cardMeta": null,
  "cardDescription": "<p>The first phase in any design process is research. Our experienced researchers help you understand your customers, challenge assumptions, and nurture innovation ideas. They excel in</p><ul><li>Stakeholder research</li><li>Generative user research</li><li>Usability testing and heuristic analysis</li><li>Emerging trend, behaviour & market analysis</li><li>Behavioural segmentation and persona creation</li></ul><p>The first phase in any design process is research. Our experienced researchers help you understand your customers, challenge assumptions, and nurture innovation ideas. They excel in</p>",
  "cardUrl": null,
  "cardId": "card-01",
  "cardModifiers": [
    "--springboard"
  ],
  "megaLinkURL": "#",
  "megaLinkText": "A link to somewhere"
}

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

home variant name may need to be revisited as it may be used elsewhere