---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, tags, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: simpleCard
layout: subsection
wd_wcptag: simpleCard
---

<a id="section_N10021_N1001E_N10001"></a>
Displays a simple card.

Define the card in a Page Configuration Card. See [Add Page Configuration Cards](/wcp_docs/GUID-77bab23d-5938-4ffe-92e2-2dd96a72444a-enHYPHENus.html).

In the Page Configuration Card, specify `simpleCard` as the `body` type.

## <a id="section_ud4_pnl_rtb"></a>Example

This sample `.card` file contains a simple card definition:

In this sample <i>simpleStatusCard</i> Page Configuration Card, the `body` type is `simpleCard`.

```
{
  "id": "simpleStatusCard",
  "parameters": ["title", "subtitle", "icon", "indicatorLabel", "indicatorColor", "body"],
  "header": {
    "title": "<% title %>",
    "subtitle": "<% subtitle %>",
    "icon": "<% icon %>",
    "indicator": {
      "label": "<% indicatorLabel %>",
      "color": "<% indicatorColor %>"
    }
  },
  "body": {
    "type": "simpleCard",
    "value": "<% body %>"
  },
  "footer": [
    {
      "label": "Home",
      "taskReference": {
        "taskId": "home"
      }
    }
  ]
}
```

This sample `cardContainer` references the <i>simpleStatusCard</i> Page Configuration Card and passes data to it.

```
{
  "type": "cardContainer",
  "layout": "grid",
  "cards": [
    {
      "type": "card",
      "cardId": "simpleStatusCard",
      "parameters": "<% {
          'title': 'Good news!',
          'subtitle': date:getTodaysDate(date:getDateTimeZone(userTimeZone)),
          'icon': 'wd-accent-fun',
          'indicatorLabel': 'Success',
          'indicatorColor': 'Green',
          'body': 'You have successfully submitted a reimbursement request.'
      }%>"
    }
  ]
}
```

## <a id="section-mobile-support"></a>Mobile Support

Android, iOS

## <a id="section_jdf_2rl_rtb"></a>Attributes

-   <b>id</b>

    Data type: string

    (Required) Unique identifier used to reference the card in PMDs. The `id` must match the card file name.

-   <b>parameters</b>

    Data type: string array

    Contains parameter names used for passing variable data to the card. Because different PMDs can call the same card in various contexts, use `parameters` to pass dynamic values to the card.

-   <b>header</b>

    Data type: object

    Contains these attributes:

    -   <b>title</b>

        Data type: stringScript

        Bold text that displays at the top of the card.

    -   <b>subtitle</b>

        Data type: stringScript

        Additional text that displays below the `title`.

    -   <a id="d25e411"></a><b>icon</b>

        Data type: string

        The name of the icon that displays on the left of the `title` and `subtitle`. For valid values, see the icons prefixed with `wd-accent` in [Reference: Icons](/wcp_docs/pyw1636491346913.html).

    -   <a id="d25e435"></a><b>indicator</b>

        Data type: object

        A small text element that you can use to convey the status of a card.

        Contains these attributes:

        -   <b>label</b>

            Data type: stringScript

            The text of the indicator.

        -   <b>color</b>

            Data type: stringScript

            The color of the indicator. Valid values:

            -   `blue`
            -   `gray`
            -   `green`
            -   `orange`
            -   `red`
            -   `transparent`



-   <b>body</b>

    Data type: object

    (Required) The body of the card.

    Contains these attributes:

    -   <b>type</b>

        Data type: string

        (Required) The card type. For simple cards, set `type` as "simpleCard".

    -   <b>value</b>

        Data type: stringScript

        (Required) The content of a simple card body.


-   <b>footer</b>

    Data type: TaskButton array

    A list of links at the bottom of each card. You can include up to 5 links in the footer.

    Each link object contains these attributes:

    -   <b>label</b>

        Data type: stringScript

        (Required) The text of the link.

    -   <a id="d25e1288"></a><b>taskReference</b>

        Data type: `taskReference`

        The page to navigate to when a user clicks the link. Specify the [taskReference](/wcp_docs/cgt1531499518059.html#) tag.

        You must specify either `taskReference`, `url`, or `workdayTaskReference`. `taskReference`, `url` and `workdayTaskReference` are mutually exclusive.

        Example:

        ```
        "footer": [
          {
            "label": "Home",
            "taskReference": {
            "taskId": "home"
            }
          }
        ```

        ]

    -   <a id="d25e1334"></a><b>workdayTaskReference</b>

        Data type: workdayTaskReference object

        Contains the `wid` of a Workday-delivered task or report to navigate to.

        To determine the `wid` value, get the Integration ID of the Workday-delivered task or report. For details, see [Navigate to Workday Tasks and Reports](/wcp_docs/GUID-65dc8eb6-a52b-4bf5-b05a-32160abb1f08-enHYPHENus.html)

        You must specify either `taskReference`, `url`, or `workdayTaskReference`. `taskReference`, `url` and `workdayTaskReference` are mutually exclusive.

        This sample `footer` navigates to the <b>My Timesheets</b> report in Workday:

        ```
        "footer": [
          {
            "label": "My Timesheets",
            "workdayTaskReference": {
              "wid": "c4936fdad7d110001d9c005c57510000"
            }
          }
        ]
        ```

    -   <b>url</b>

        Data type: dynamicBinding-String

        The destination URL for an external link.

        You must specify either `taskReference`, `url`, or `workdayTaskReference`. `taskReference`, `url` and `workdayTaskReference` are mutually exclusive.

        Example:

        ```
        "footer": [
          {
            "label": "External Link",
            "url": "https://www.example.com"
          }
        ]
        ```




### Related Information

[cardContainer](/wcp_docs/iyt1652393015539.html)