Cards

Purpose

A card is a visual component that is typically used to represent a piece of content or contain a small amount of information. Cards are displayed on a Surface and this pattern is used in a number of features in Seismic. When a card is given enough details, it displays the elements in a nicely arranged and visually pleasing element.
Common use cases include:

• Training content being displayed in Seismic
• Custom content coming over from the Search extension point
• Content that is displayed in a carousel on the Homepage

Card Prerequisites

Each surface has different requirements for the cards it contains. Please refer to your specific extension point documentation.

How it works

When passing over a JSON payload for a card, Seismic's Extension Platform translates and builds the HTML that creates the card.

A card can have an accessory item and a collection of elements. It must also have a externalId (a unique identifier for the object) and a type. For example, in the case of Lessonly, the externalId would be the id of the lesson or path and the type would be lesson or path. A card can also have an Type which would be the external system’s type. For example for Lessonly this would be “Lesson”, “Path”, or “Certification”.

Depending on the surface, some elements of the card are expected and other elements are optional
thumbnail (required on some surfaces, optional on others)
Accessories
url (to go to if the card is selected)
footer
buttons (as an element and/or as an accessory)

Elements may be of types
header
markdown
buttons (as an element and/or as an accessory)
modal (triggered by a button)

📘

Missing field supression

Depending upon the card, if an element is omitted from all cards in the collection returned to the surface, then the card will respond to that and suppress the space for that element or accessory. For example, thumbnail, footer, or description.

High Level Fields

Accessories

Url
The string of the URL to browse to if the card is selected.

"cards": [
{
  "externalId": "UniqueIDValueForCard",
  "type": "lesson",
  "accessories" : {
    "url" : "https://NotAURL.Example.com"
  },
  "elements": [
    {
      ...
    }
  ] 
}]

Thumbnail

The thumbnail is required on the search page, but optional on the Content Blade. The display of the thumbnail depends on the page in which it is displayed. Different pages will cause the thumbnail to be displayed slightly differently and may require different sizes of thumbnail.

🚧

Cards not Rendering without a Thumbnail

There have been several instances where cards do not render without a valid thumbnail. We will be working to resolve this issue but do not have an ETA at this time. Please ensure to include valid image URLs for your cards

"cards": [
{
  "externalId": "UniqueIDValueForCard",
  "accessories" : {
    "thumbnail" : {
      "image_url": "",
      "alt_text": "",
      "label": "Overdue"    // Or with alignment tags <left>seismic.com</left><right>Yesterday</right>",
      "label_type": "Error"  // Overlay
    }
  },
  "elements": [
    {
      ...
    }
  ] 
}]

Footer

The footer is the section at the bottom of the card that contains text and an optional thumbnail.

Elements

General Pattern

Header Element

"cards": [
{
  "externalId": "UniqueIDValueForCard",
  "type": "lesson",
  "elements": [
    {
      "type": "header",
      "text": ""
    }
  ] 
}]

"cards": [
{
  "externalId": "UniqueIDValueForCard",
  "externalType": "lesson",
  "elements": [
    {
      "type": "markdown",
      "text": ""
    }
  ] // end of outer element array
}]

Markdown Element

"cards": [
{
  "externalId": "UniqueIDValueForCard",
  "type": "lesson",
  "elements": [
    {
      "type": "markdown",
      "text": "<Bell/> Bell Icon"
    }
  ] // end of outer element array
}]

Troubleshooting

• Make sure you are passing in all required fields
• Validate your JSON structure

Related Documentation

Extension points v2

• link to other stuff