Card

The card component is used as a single or group of components to call out details about a project.

Small icon cards
Analytics Report

Dolor Pharetra Aenean

Nulla vitae elit libero, a pharetra augue.

Audience

Ridiculus Mollis Vulputate

Maecenas sed diam eget risus varius blandit sit amet non magna.

Competitive Strategy

Vestibulum Nullam

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Large icon cards
Analytics Report

Dolor Pharetra Aenean

Nulla vitae elit libero, a pharetra augue.

Audience

Ridiculus Mollis Vulputate

Maecenas sed diam eget risus varius blandit sit amet non magna.

Competitive Strategy

Vestibulum Nullam

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Parameters

N/A

Liquid Example

          {% assign cards = site.data.styleguide.card[0].field_cards %}
{% for card in cards %}
  {% assign card_cta_text = card.field_cta.title %}
  {% assign card_cta_url = card.field_cta.uri %}
  {% assign card_title = card.field_title %}
  {% assign card_icon = card.field_icon[0].name %}
  {% assign card_text = card.field_intro[0].value %}
  {% assign card_image = card.field_media[0].markup %}
  {%
    include components/card/card.html
    cardClass = 'breaker__card'
    image = card_image
    icon = card_icon
    title = card_title
    teaser = card_text
    cta_url = card_cta_url
    cta_text = card_cta_text
  %}
{% endfor %}

        

HTML

            
Small icon cards
Analytics Report

Dolor Pharetra Aenean

Nulla vitae elit libero, a pharetra augue.

Audience

Ridiculus Mollis Vulputate

Maecenas sed diam eget risus varius blandit sit amet non magna.

Competitive Strategy

Vestibulum Nullam

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Large icon cards
Analytics Report

Dolor Pharetra Aenean

Nulla vitae elit libero, a pharetra augue.

Audience

Ridiculus Mollis Vulputate

Maecenas sed diam eget risus varius blandit sit amet non magna.

Competitive Strategy

Vestibulum Nullam

Morbi leo risus, porta ac consectetur ac, vestibulum at eros.