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.

Configurable Variables

Variable Default Description
$sprk-card-border 1px solid rgba(0, 0, 0, 0.15) Sets the border surrounding the card.
$sprk-card-breakpoint $sprk-split-breakpoint-s The breakpoint at which the card styles change.
$sprk-card-max-width 26.5625rem Sets the maximum width of the card.
$sprk-card-shadow 0 3px 10px 1px rgba(0, 0, 0, 0.08) Sets the box-shadow of the card on small viewports.
$sprk-card-shadow-wide-viewport 0 3px 18px 1px rgba(0, 0, 0, 0.08) Sets the box-shadow of the card on wide viewports.
$sprk-card-shadow-standout 0 4px 20px 2px rgba(0, 0, 0, 0.1) Sets the box-shadow of the standout card variant on small viewports.
$sprk-card-shadow-standout-wide-viewport 0 4px 40px 2px rgba(0, 0, 0, 0.1) The shadow on the standout variant on wide viewports.
$sprk-card-content-padding $sprk-space-misc-a Sets the padding of the card content.
$sprk-card-header-bg-color $sprk-green The background color of the header area for the highlighted header card variant.
$sprk-card-header-text-color $sprk-white The color of the text in the highlighted header card variant.

Class Modifiers

Class Description
.sprk-c-Card--standout Use on cards that you would like to standout from the rest.

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--large">

  </div>
</div>
          
<sprk-card cardType="base" idString="card-1">
  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium"></div>
</sprk-card>

Standout

Use this Card variant to standout in comparison to other elements. It makes use of a deeper shadow.

<div class="sprk-c-Card sprk-c-Card--standout sprk-o-Stack" data-id="card-12">
  <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-20" additionalClasses="sprk-c-Card--standout">
  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--medium"></div>
</sprk-card>

Highlighted Header

Use this Card variant to draw focus to the header.

Description

Card 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-c-Card--standout sprk-o-Stack" data-id="card-12">
  <div class="sprk-o-Stack__item sprk-c-Card__header sprk-o-Stack sprk-o-Stack--medium">
    <h3 class="sprk-b-TypeDisplaySeven sprk-o-Stack__item sprk-u-Color--white">
      Description
    </h3>

    <h4 class="sprk-b-TypeDisplayFive sprk-o-Stack__item sprk-u-Color--white">
      Card Title
    </h4>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-c-Card__content">
    <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>
</div>
          
<sprk-card cardType="base" idString="card-12" additionalClasses="sprk-c-Card--standout">
  <div class="sprk-o-Stack__item sprk-c-Card__header sprk-o-Stack sprk-o-Stack--medium">
    <h3 class="sprk-b-TypeDisplaySeven sprk-o-Stack__item sprk-u-Color--white">
      Description
    </h3>

    <h4 class="sprk-b-TypeDisplayFive sprk-o-Stack__item sprk-u-Color--white">
      Card Title
    </h4>
  </div>

  <div class="sprk-o-Stack__item sprk-o-Stack sprk-o-Stack--medium sprk-c-Card__content">
    <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>
</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
      class="sprk-c-Card__media"
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/desktop.jpg">
  </a>

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

    <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/desktop.jpg" />
  </a>

  <div class="sprk-o-Stack__item sprk-c-Card__content sprk-o-Stack sprk-o-Stack--large">
    <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
      class="sprk-c-Card__media"
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/desktop.jpg">
  </a>

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

      <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--simple sprk-b-Link--has-icon">
      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
      class="sprk-c-Card__media"
      alt="Spark placeholder image."
      src="../../assets/toolkit/images/desktop.jpg">
  </a>

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

      <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--simple sprk-b-Link--has-icon">
      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.

Icon Title

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

Learn More

Icon Title

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

Learn More

Icon Title

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

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--large sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg class="sprk-c-Icon sprk-c-Icon--xxl" height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#call-team-member" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icon 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.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--simple sprk-b-Link--has-icon">
      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--large sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg class="sprk-c-Icon sprk-c-Icon--xxl" height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#call-team-member" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icon 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.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--simple sprk-b-Link--has-icon">
      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--large sprk-u-TextAlign--center">
      <a href="#" class="sprk-u-AbsoluteCenter sprk-o-Stack__item">
      <svg class="sprk-c-Icon sprk-c-Icon--xxl" height="75" viewBox="0 0 220.63 197.62">
        <use xlink:href="#call-team-member" />
      </svg>
    </a>

      <h3 class="sprk-b-TypeDisplayFive sprk-o-Stack__item">
      Icon 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.
      </p>

      <a href="#" class="sprk-o-Stack__item sprk-b-Link sprk-b-Link--simple sprk-b-Link--has-icon">
      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.

Card Title

Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.

Card Title

Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.

Card Title

Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.

Card Title

Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.

<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">

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

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

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.
      </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">

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

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

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.
      </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">

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

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

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.
      </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">

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

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

      <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
        Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.
      </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.