Skip to main content

Raven Design System

Card Component

RDS cards group related content and actions about a single subject. Cards serve as a linked entry point to more detailed information, while providing a quick preview of the content they link to.

Base Card

<article class="c-card" itemscope itemtype="http://schema.org/Article">
    <a href="https://bit.ly/2kaI1Ll" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-1.jpg" alt="Read more about White-necked Raven" loading="lazy">
        </figure>
        <header>
            <h3 itemprop="name">White-necked Raven</h3>
        </header>
    </a>
</article>

Card with title and description

<article class="c-card" itemscope itemtype="http://schema.org/Article">
    <a href="https://bit.ly/2kaI1Ll" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-2.jpg" alt="Read more about White-necked Raven" loading="lazy">
        </figure>
        <header>
            <h3 itemprop="name">White-necked Raven</h3>
            <p itemprop="description">The white-necked raven is smaller than the common raven, the thick-billed raven.</p>
        </header>
    </a>
</article>

News variant with date

<article class="c-card" itemscope itemtype="http://schema.org/NewsArticle">
    <a href="https://bit.ly/2E6yTwZ" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-3.jpg" alt="Read more about We knew ravens are smart. But not this smart" loading="lazy">
        </figure>
        <header>
            <time datetime="2018-03-11" itemprop="datePublished" content="2018-03-11">Sunday, March 11th</time>
            <h3 itemprop="headline">We knew ravens are smart. But not this smart</h3>
        </header>
    </a>
</article>

News variant with date and description

<article class="c-card" itemscope itemtype="http://schema.org/NewsArticle">
    <a href="https://bit.ly/2E6yTwZ" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-4.jpg" alt="Read more about We knew ravens are smart." loading="lazy">
        </figure>
        <header>
            <time datetime="2018-03-11" itemprop="datePublished" content="2018-03-11">Sunday, March 11th</time>
            <h3 itemprop="headline">We knew ravens are smart.</h3>
            <p itemprop="description">The birds are surprisingly skilled at planning how to get food in the future.</p>
        </header>
    </a>
</article>

Video variant

<article class="c-card c-card--video" itemscope itemtype="http://schema.org/VideoObject">
    <a href="https://www.youtube.com/watch?v=lrYPm6DD44M" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://cu-raven.s3.amazonaws.com/assets/img/raven/img-2.jpg" alt="Read more about Amazing Raven intelligence" loading="lazy">
            <span class="u-icon u-icon--circle" aria-hidden="true">
                <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M5.61 22.994h.001c-1.178.752-2.611.08-2.611-1.4v-1.197h.013V4.66H3V1.729C3 .251 4.433-.447 5.611.306l14.964 9.867c1.18.752 1.154 1.975-.011 2.714L5.61 22.996z"/></svg>
            </span>
        </figure>
        <header>
            <h3 itemprop="name">Amazing Raven intelligence</h3>
        </header>
    </a>
</article>

People variant

<article class="c-card c-card--people" itemscope itemtype="http://schema.org/Person">
    <a href="https://en.wikipedia.org/wiki/Bill_Murray" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://www.fillmurray.com/500/500" alt="Read more about Bill Murray" loading="lazy">
        </figure>
        <header>
            <h3 itemprop="name">Bill Murray</h3>
            <p itemprop="description">Actor and Writer</p>
        </header>
    </a>
</article>

Figure variant

As per the first result when googling "definition of figure", this block is generally used for "a number, especially one which forms part of official statistics. Use this component to display number based facts or stats. The component includes an optional link and a required caption defining the number/stat.

<article class="c-card c-card--figure" itemscope itemtype="http://schema.org/QuantitativeValue">
    <a href="https://goravens.ca" itemprop="url">
        <figure>
            <figcaption>U-Sports Titles</figcaption>
            <p itemprop="value">15</p>
        </figure>
    </a>
</article>

This is the first card example where a linked URL is optional.

U-Sports Titles

15

<article class="c-card c-card--figure" itemscope itemtype="http://schema.org/QuantitativeValue">
        <figure>
            <figcaption>U-Sports Titles</figcaption>
            <p itemprop="value">15</p>
        </figure>
</article>

Drop shadows and cards

Notice how there is no drop shadow present on the unlinked card above. By design, cards with drop shadows indicate they are clickable/touchable.

Max-width variant

<article class="c-card" itemscope itemtype="http://schema.org/Article">
    <a href="https://news.nationalgeographic.com/2017/07/ravens-problem-solving-smart-birds/" itemprop="url">
        <figure itemscope itemtype="http://schema.org/ImageObject">
            <img src="https://dummyimage.com/768x300/eee/222.gif" alt="Read more about Max-width card" loading="lazy">
        </figure>
        <header>
            <h3 itemprop="name">Max-width card</h3>
            <p itemprop="description">Usually, cards are used in 3 and 4 column grid blocks to control their size. You can use them outside a grid, but they need to be in a small width block and their image dimensions need to be 768x300px.</p>
        </header>
    </a>
</article>

Twig/Nunjucks Macro example


{% macro card(data) %}
<article class="c-card{% if data.variant == "figure" %} c-card--figure{% elseif data.variant == "video" %} c-card--video{% elseif data.variant == "people" %} c-card--people{% endif %}{% if data.utility %} {{ data.utility }}{% endif %}" itemscope itemtype="{% if data.variant == "news" %}http://schema.org/NewsArticle{% elseif data.variant == "people" %}http://schema.org/Person{% elseif data.variant == "video" %}http://schema.org/VideoObject{% elseif data.variant == "figure" %}http://schema.org/QuantitativeValue{% else %}http://schema.org/Article{% endif %}">
{% if data.url %}
    <a href="{{ data.url }}" itemprop="url">
{% endif %}
    {% if data.img %}
        <figure itemscope itemtype="http://schema.org/ImageObject">
        {% if data.imgWebp %}
            <picture>
                <source type="image/webp" srcset="{{ data.webp }}">
                <img src="{{ data.img }}" alt="{% if data.alt %}{{ data.alt }}{% else %}Read more about {{ data.title }}{% endif  %}" loading="lazy">
            </picture>
        {% else %}
            <img src="{{ data.img }}" alt="{% if data.alt %}{{ data.imgAlt }}{% else %}Read more about {{ data.title }}{% endif  %}" loading="lazy">
        {% endif %}
        {% if data.variant == "video" %}
            <span class="u-icon u-icon--circle">
                {% include '/icons/play.svg' %}
            </span>
        {% endif %}
        </figure>
    {% endif %}
{% if data.variant == "figure" %}
        <figure>
            <figcaption>{{ data.caption }}</figcaption>
            <p itemprop="value">{{ data.value }}</p>
        </figure>
{% else %}
        <header>
        {% if data.variant == "news" %}
            <time datetime="{{ data.date }}" itemprop="datePublished" content="{{ data.date }}">{{ data.date|date("l, F jS") }}</time>
        {% endif %}
            <h3 itemprop="{% if data.variant == "news" %}headline{% else %}name{% endif %}">{{ data.title }}</h3>
        {% if data.text %}
            <p itemprop="description">{{ item.text|length > 105 ? item.text|slice(0, 105) ~ '...' : data.text  }}</p>
        {% endif %}
        </header>
{% endif %}
{% if data.url %}
    </a>
{% endif %}
</article>
{% endmacro %}

Implementation Notes

  1. Use the Card Grid block to group multiple cards.

  2. Cards components are best displayed on top of a non-white background colour, if possible.

Found in

The Card component is used in the following blocks:

References