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.
.sprk-c-Card--full Sets `max-width` to 100%, allowing card to fill entire width of it's container. Best used with base cards

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>
<SprkCard
 idString="card-1"
 additionalContentClasses="
    sprk-o-Stack
    sprk-o-Stack--large"
>
  </SprkCard>

Information

See below for available customization options:

Prop Type Description
additionalCardClasses string Expects a space-separated list of class names to be appended to the class attribute of SprkCard.
additionalContentClasses string Expects a space-separated list of class names to be appended to the class attribute of the card's content. Not configurable for Highlighted Header or Teaser.
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.
isStandout boolean Card style with a deeper shadow. Use this to help it standout compared to other elements.
variant string

Decides what kind of card this is. If no variant is provided, it defaults to base card style.

Expects one of the following:

  • highlightedHeader
  • teaser

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>
<SprkCard
 isStandout
 idString="card-20"
 additionalContentClasses="
    sprk-o-Stack
    sprk-o-Stack--medium"
>
  </SprkCard>

Information

All available proptypes for base card can apply to standout cards.

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>
<SprkCard
 idString="highlighted-header"
 variant="highlightedHeader"
 highlightedHeaderConfig={highlightedHeaderConfig}
/>

<script>
  const highlightedHeaderConfig = {
    bodyText: 'Lorem ipsum dolor sit amet, doctus invenire vix te. Facilisi perpetua an pri, errem commune mea at, mei prima tantas signiferumque at. Numquam.',
    title: 'Card Title',
    description: 'Description',
  };
</script>

Information

All available proptypes for base card can apply to highlighted header cards except for additionaContentClasses.

See below for available customization options:

Prop Type Description
highlightedHeaderConfig object Expects an object of configurations that populate the content of SprkCard with a highlighted Header. See below for highlightedHeaderConfig's object details

Here are the expected objects for highlightedHeaderConfig

Prop Type Description
bodyText string Expects a string that will populate the card's body text. Part of the Highlighted Header configuration.
description string Expects a string that will populate the card's description. Part of Highlighted Header configuration.
title string Expects a string that will populate the card's title. Part of Highlighted Header configuration.

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>
<SprkCard
 idString="card1"
 variant="teaser"
 teaserConfig={teaserConfig}
/>

<script>
  const teaserConfig = {
    bodyText: 'Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.',
    cta: {
      ctaAnalytics: 'test',
      text: 'Learn More',
      ctaVariant: 'link',
      href: 'https://sparkdesignsystem.com/',
    },
    media: {
      href: 'https://sparkdesignsystem.com/',
      mediaLinkElement: 'a',
      imgAlt: 'placeholder image',
      imgSrc: 'https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg',
      mediaAnalyticsString: 'Card:teaser-link',
      mediaVariant: 'img',
    },
    title: 'Teaser Card Title',
    titleFirst: false,
  };
</script>

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.

Information

All available proptypes for base card can apply to teaser cards except for additionaContentClasses.

See below for available customization options:

Input Type Description
teaserConfig object Expects an object of configurations that populate the content of SprkCard teaser. See below for teaserConfig's object details.

Here are the expected objects for teaserConfig

Input Type Description
teaserConfig object Expects an object of configurations that populate the content of SprkCard teaser. See below for teaser object details.
cta object

Expects an object that configures the call-to-action of a teaser card.

Expects the following items:

  • additionalCtaIconClasses
  • ctaAnalytics
  • ctaIcon
  • ctaLinkElement
  • ctaVariant
  • href
media object

Expects an object that configures the main media of a teaser card.

Expects the following items:

  • additionalMediaIconClasses
  • href
  • mediaLinkElement
  • iconName
  • imgAlt
  • imgSrc
  • mediaAnalyticsString
  • mediaVariant
title string Expects a string that will show up as the main headline of the teaserCard. This is a configuration of teaserConfig.
titleFirst boolean Expects a boolean that will determine if the teaser card's title is at the top or below the main media. This is a configuration of teaserConfig.

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>
          
<SprkCard
 idString="card1"
 variant="teaser"
 teaserConfig={teaserConfig}
/>

<script>
  const teaserConfig = {
    bodyText: 'Lorem ipsum dolor sit amet, doctus invenire vix te. Facilisi perpetua an pri, errem commune mea at, mei prima tantas signiferumque at. Numquam.',
    ctaAnalytics: 'Button: Spark',
    ctaText: 'Learn More',
    ctaType: 'button',
    imgAlt: 'Placeholder Image',
    imgSrc: 'https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg',
    href: 'https://sparkdesignsystem.com',
    mediaLinkAnalytics: 'Card:teaser link',
    mediaType: 'img',
    title: 'Teaser Card Title',
    titleFirst: true,
  };
</script>

Information

Teaser cards can become a title first configeration by adding titleFirst=true to TeaserConfig object.

All other available proptypes for teaser can apply.

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>
<section className="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@l">
  <SprkCard
   idString="card-1"
   variant="teaser"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@l"
   teaserConfig={teaserConfig}
  />
  <SprkCard
   idString="card-2"
   variant="teaser"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@l"
   teaserConfig={teaserConfig}
  />
</section>

<script>
  const teaserConfig = {
    bodyText: 'Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.',
    cta: {
      ctaAnalytics: 'test',
      text: 'Learn More',
      ctaVariant: 'link',
      href: 'https://sparkdesignsystem.com/',
    },
    media: {
      href: 'https://sparkdesignsystem.com/',
      mediaLinkElement: 'a',
      imgAlt: 'placeholder image',
      imgSrc: 'https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg',
      mediaAnalyticsString: 'Card:teaser-link',
      mediaVariant: 'img',
    },
    title: 'Teaser Card Title',
    titleFirst: false,
  };
</script>

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>
<section className="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@l">
  <SprkCard
   idString="card-1"
   variant="teaser"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@l"
   teaserConfig={teaserConfig}
  />
  <SprkCard
   idString="card-2"
   variant="teaser"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@l"
   teaserConfig={teaserConfig}
  />
  <SprkCard
   idString="card-3"
   variant="teaser"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@l"
   teaserConfig={teaserConfig}
  />
</section>

<script>
  const teaserConfig = {
    bodyText: 'Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.',
    cta: {
      ctaAnalytics: 'test',
      text: 'Learn More',
      ctaVariant: 'link',
      href: 'https://sparkdesignsystem.com/',
    },
    media: {
      additionalMediaIconClasses: 'sprk-c-Icon--xxl',
      href: 'https://sparkdesignsystem.com/',
      mediaLinkElement: 'a',
      iconName: 'call-team-member',
      mediaVariant: 'icon',
    },
    title: 'Teaser Card Title',
    titleFirst: false,
  };
</script>

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>
<section className="sprk-o-Stack sprk-o-Stack--large sprk-o-Stack--split@xl">
  <SprkCard
   idString="card-1"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@xl"
   teaserConfig={teaserConfig}
  />
  <SprkCard
   idString="card-2"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@xl"
   teaserConfig={teaserConfig}
  />
  <SprkCard
   idString="card-3"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@xl"
   teaserConfig={teaserConfig}
  />
  <SprkCard
   idString="card-4"
   additionalClasses="sprk-o-Stack__item sprk-o-Stack__item--flex@xl"
   teaserConfig={teaserConfig}
  />
</section>

<script>
  const teaserConfig = {
    bodyText: 'Lorem ipsum dolor sit amet, doctus invenirevix te. Facilisi perpetua.',
    cta: {
      ctaAnalytics: 'test',
      text: 'Learn More',
      ctaVariant: 'link',
      href: 'https://sparkdesignsystem.com/',
    },
    media: {
      href: 'https://sparkdesignsystem.com/',
      mediaLinkElement: 'a',
      imgAlt: 'placeholder image',
      imgSrc: 'https://sparkdesignsystem.com/assets/toolkit/images/desktop.jpg',
      mediaAnalyticsString: 'Card:teaser-link',
      mediaVariant: 'img',
    },
    title: 'Teaser Card Title',
    titleFirst: false,
  };
</script>

Information

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