Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Card

Code Examples

Spark-Extras

Cards present related content. They provide an easy way to get information quickly and are typically used in groups.

Information

  • Cards use the Stack Layout Object.
  • The breakpoint when the Cards split horizontally can be changed by adjusting the Stack--split responsive suffix modifier.

Links

Base

Base Cards have a maximum width and the standard Card styles. They are meant to be filled with related content such as a heading and paragraph. 

<div class="sprk-c-Card sprk-o-Stack">

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

  </div>
</div>
          
<sprk-card cardType="base"></sprk-card>

Teaser

Teaser Cards include an image or illustration and a call to action that can be a button or a link.

Restrictions

  • Has an image or illustration.
  • Has a call to action button or link.
Spark placeholder image.

Card Component

This is an example of the Card component. Here, you could write some paragraph text related to the card image.

Learn More 
<div class="sprk-c-Card sprk-o-Stack">
  <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

    <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Card Component
    </h3>

    <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      This is an example of the Card component. Here, you could write some paragraph text related to the card image.
    </p>

    <div class="sprk-o-Stack__item">
      <a href="#" class="sprk-c-Button">
      Learn More
      </a>
    </div>

  </div>
</div>
          
<sprk-card media="img" cardType="teaser" title="Card Component" body="This is an example of the Card component. Here, you could write some paragraph text related to the card image." imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="button" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Button: Spark">
</sprk-card>

Information

See below for available customization options:

Input Type Description
additionalClasses string Expects a space-separated list of class names to be appended to the class attribute of sprk-card.
additionalClassesIcon string If the media input is set to 'icon', expects a space-separated list of class names to be appended to the class attribute of the icon.
additionalCtaClasses string Expects a space-separated list of class names to be applied to the CTA.
body string The text that will be the main content of the card. Placed between the title and CTA.
cardType string Determines the variant of sprk-card to render. The available values are 'base', 'teaser', and 'teaserHeading'.
ctaAnalytics string The text that will be applied to the data-analytics attribute of the CTA.
ctaHref string The text that will be applied to the href attribute of the CTA.
ctaText string The text content of the CTA.
ctaType string Determines which type of cta is rendered. The available values are 'link' and 'button'.
iconHref string If the media input is set to 'icon', the text that will be applied to the href attribute of the icon.
iconLinkAnalytics string If the media input is set to 'icon', the text that will be applied to the data-analytics attribute of the link surrounding the icon.
iconType string If the media input is set to 'icon', the value that is passed to the internal sprk-icon. Determines which icon is used.
imgAlt string If the media input is set to 'image', the text that is applied to the alt attribute of the image.
imgHref string If the media input is set to 'image', the text that will be applied to the href attribute of the image.
imgLinkAnalytics string If the media input is set to 'image', the text that will be applied to the data-analytics attribute of the image.
imgSrc string If the media input is set to 'image', the text that will be applied to the src attribute of the image.
media string Determines which type of media will be rendered. The available values are 'image' and 'icon'.
title string The text that will be set to the title of the card.

Teaser With Different Element Order

Elements inside a Card can be reordered.

Angular

The Teaser with different element order variant has no implementation in Angular. You can use the base card instead and fill it with your content.

Card Component

Spark placeholder image

This is an example of the Card component. Here, you could write some paragraph text related to the card image.

Learn More 
<div class="sprk-c-Card sprk-o-Stack">
  <h3 class="sprk-o-Stack__item sprk-c-Card__content sprk-b-TypeDisplayFive">
    Card Component
  </h3>

  <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image"
      src="../../assets/toolkit/images/spark-placeholder.jpg" />
  </a>

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">
    <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      This is an example of the Card component. Here, you could write some paragraph text related to the card image.
    </p>

    <div class="sprk-o-Stack__item">
      <a href="#" class="sprk-c-Button">
        Learn More
      </a>
    </div>
  </div>
</div>

Card Layout - Two Up

Cards should typically be used in a group of at least two Cards. They should be related to one another.

Angular

The two-up variant is implemented using a combination of two angular components:

  • sprk-stack
  • sprk-card

The stack object provides the layout, while the cards are the content.

Spark placeholder image.

Card

This is an example of the Card component.

Learn More
Spark placeholder image.

Card

This is an example of the Card component.

Learn More 
<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@l">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Card
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        This is an example of the Card component.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Card
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        This is an example of the Card component.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

</div>
          
<sprk-stack splitAt="medium" itemSpacing="medium" additionalClasses="sprk-o-Stack--center-row">
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
</sprk-stack>

Information

See the sprk-stack component for available customization options for sprk-stack. See the appropriate card variant you're using for customization options.

Layout - Three Up

Three Cards that stack on small viewports and align horizontally on larger viewports. Use three Cards in a grouping when you would like to show related content.

Angular

The three-up variant is implemented using a combination of two angular components:

  • sprk-stack
  • sprk-card

The stack object provides the layout, while the cards are the content.

Icons

A useful piece of a Design System.

Learn More

Icons

A useful piece of a Design System.

Learn More

Icons

A useful piece of a Design System.

Learn More 
<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@l">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#bell" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icons
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        A useful piece of a Design System.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#bell" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icons
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        A useful piece of a Design System.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#bell" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icons
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        A useful piece of a Design System.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--standalone">
      Learn More
    </a>
    </div>
  </div>

</div>
          
<sprk-stack splitAt="medium" itemSpacing="medium" additionalClasses="sprk-o-Stack--center-row">
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
</sprk-stack>

Information

See the sprk-stack component for available customization options for sprk-stack. See the appropriate card variant you're using for customization options.

Card Layout - Four Up

You may group Cards together in a set of four. The Cards should share some relation to one another.

Angular

The four-up variant is implemented using a combination of two angular components:

  • sprk-stack
  • sprk-card

The stack object provides the layout, while the cards are the content.

Spark placeholder image.

Card Title

Card content placeholder.

More
Spark placeholder image.

Card Title

Card content placeholder.

More
Spark placeholder image.

Card Title

Card content placeholder.

More
Spark placeholder image.

Card Title

Card content placeholder.

More 
<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xl">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Card Title
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Card content placeholder.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Card Title
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Card content placeholder.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Card Title
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Card content placeholder.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--equal@l sprk-c-Card sprk-o-Stack">
    <a href="#" class="sprk-o-Stack__item">
    <img
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/spark-placeholder.jpg">
  </a>

    <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium">

      <h4 class="sprk-b-TypeDisplaySix sprk-o-Stack__item">
      Card Title
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Card content placeholder.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
      More
      </a>
      </div>

    </div>
  </div>

</div>
          
<sprk-stack splitAt="medium" itemSpacing="medium" additionalClasses="sprk-o-Stack--center-row">
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--equal@m" cardType="teaser" title="Card" body="This is an example of the Card component" imgSrc="https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg" imgAlt="Placeholder Image" imgHref="www.sparkdesignsystem.com" ctaType="link" ctaText="Learn More" ctaHref="www.sparkdesignsystem.com" ctaAnalytics="Link: Spark">
  </sprk-card>
</sprk-stack>

Information

See the sprk-stack component for available customization options for sprk-stack. See the appropriate card variant you're using for customization options.

sparkdesignsystem@quickenloans.com