Card

Code Examples

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.

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" idString="card-1"></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.

Title

Lorem ipsum dolor sit amet, doctus invenire vix te. Facilisi perpetua an pri, errem commune mea at, mei prima tantas signiferumque at. Numquam.

<div class="sprk-c-Card sprk-o-Stack" data-id="card-1">
  <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">
      Title
    </h3>

    <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
      Lorem ipsum dolor sit amet, doctus invenire vix te. Facilisi perpetua an pri, errem commune mea at, mei prima tantas signiferumque at. Numquam.
    </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" idString="card-2">
</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.
idString string The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page.

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.

Title

Spark placeholder image

Lorem ipsum dolor sit amet, doctus invenire vix te. Facilisi perpetua an pri, errem commune mea at, mei prima tantas signiferumque at. Numquam.

<div class="sprk-c-Card sprk-o-Stack" data-id="card-2">
  <h3 class="sprk-o-Stack__item sprk-c-Card__content sprk-b-TypeDisplayFive">
    Title
  </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">
      Lorem ipsum dolor sit amet, doctus invenire vix te. Facilisi perpetua an pri, errem commune mea at, mei prima tantas signiferumque at. Numquam.
    </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.

Title

Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua an pri, errem communemea at, mei prima tantas signiferumque at. Numquam.

Learn More
Spark placeholder image.

Title

Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua an pri, errem communemea at, mei prima tantas signiferumque at. Numquam.

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--flex@l sprk-c-Card sprk-o-Stack" data-id="card-3">
    <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">
      Title
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua an pri, errem communemea at, mei prima tantas signiferumque at. Numquam.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--plain">
      Learn More
      <svg class="sprk-c-Icon" viewBox="0 0 64 64">
        <use xlink:href="#chevron-right" />
      </svg>
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@l sprk-c-Card sprk-o-Stack" data-id="card-4">
    <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">
      Title
    </h3>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua an pri, errem communemea at, mei prima tantas signiferumque at. Numquam.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--plain">
      Learn More
      <svg class="sprk-c-Icon" viewBox="0 0 64 64">
        <use xlink:href="#chevron-right" />
      </svg>
    </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--flex@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" idString="card-3">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--flex@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" idString="card-4">
  </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--flex@l sprk-c-Card sprk-o-Stack" data-id="card-5">

    <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 class="sprk-c-Icon sprk-c-Icon--xl" 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--plain">
      Learn More
      <svg class="sprk-c-Icon" viewBox="0 0 64 64">
        <use xlink:href="#chevron-right" />
      </svg>
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@l sprk-c-Card sprk-o-Stack" data-id="card-6">

    <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 class="sprk-c-Icon sprk-c-Icon--xl" 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--plain">
      Learn More
      <svg class="sprk-c-Icon" viewBox="0 0 64 64">
        <use xlink:href="#chevron-right" />
      </svg>
    </a>
    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@l sprk-c-Card sprk-o-Stack" data-id="card-7">

    <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 class="sprk-c-Icon sprk-c-Icon--xl" 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--plain">
      Learn More
      <svg class="sprk-c-Icon" viewBox="0 0 64 64">
        <use xlink:href="#chevron-right" />
      </svg>
    </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--flex@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" idString="card-5">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--flex@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" idString="card-6">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--flex@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" idString="card-7">
  </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.

Title!

Placeholder text.

Spark placeholder image.

Title!

Placeholder text.

Spark placeholder image.

Title!

Placeholder text.

Spark placeholder image.

Title!

Placeholder text.

<div class="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xl">
  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xl sprk-c-Card sprk-o-Stack" data-id="card-8">
    <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">
      Title!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Placeholder text.
      </p>

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

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xl sprk-c-Card sprk-o-Stack" data-id="card-9">
    <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">
      Title!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Placeholder text.
      </p>

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

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xl sprk-c-Card sprk-o-Stack" data-id="card-10">
    <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">
      Title!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Placeholder text.
      </p>

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

    </div>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack__item--flex@xl sprk-c-Card sprk-o-Stack" data-id="card-11">
    <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">
      Title!
    </h4>

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Placeholder text.
      </p>

      <div class="sprk-o-Stack__item">
        <a href="#" class="sprk-c-Button">
        Button
      </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--flex@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" idString="card-8">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--flex@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" idString="card-9">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--flex@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" idString="card-10">
  </sprk-card>
  <sprk-card sprkStackItem additionalClasses="sprk-o-Stack sprk-o-Stack__item--flex@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" idString="card-11">
  </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.