---
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: imageCard
layout: subsection
wd_wcptag: imageCard
---

<a id="section_N10021_N1001E_N10001"></a>
Displays an image on a 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 `imageCard` as the `body` type.

## <a id="section_1"></a>Image Size Guidelines

We recommend these guidelines for an optimal display of images on the `imageCard`:

-   Aspect ratio - 16:9
-   Image size - 600 x 338
-   File size - 300 KB or lower


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

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

```
{
  "id": "imageCardExample",
  "parameters": ["title", "subtitle"],
  "header": {
    "title": "<% title %>",
    "subtitle": "<% subtitle %>"
  },

  "body": {
    "type": "imageCard",
    "endPoint": {
      "name": "imageEndPointName",
      "url":   "https://api.workday.com/common/v1/workerRawPhotoData/0db6a6fc8d4344fdb1b90870b4bcda80"
    }
  },

  "footer": [
    {
      "label": "Open Career Hub",
      "taskReference": {
        "taskId": "careerHub"
      }
    }
  ]
}
```

The image endpoint URL is from the `workerPhotos/href` property in the response of this request:

```
GET https://api.workday.com/common/v1/workers?view=workerPhotoWIDView
```

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

```
{
  "type": "cardContainer",
  "layout": "grid",
  "cards": [        
    {
      "type": "card",
      "cardId": "imageCardExample",
      "parameters":"<%{
        'title': 'Discover New Career Opportunities',
        'subtitle': 'Grow your skillset and experience.'
      }%>"
    }
  ]
}
```

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

Android, iOS

## <a id="section_zwc_xnj_ytb"></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.

-   <a id="dlentry_cardfile_header"></a><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.

        `title` displays a maximum of 2 lines of text, or approximately 60 characters, including spaces. The remainder of the text is truncated with ellipses.

    -   <b>subtitle</b>

        Data type: stringScript

        Additional text that displays below the `title`.

        `subtitle` displays a maximum of 3 lines of text, or approximately 120 characters, including spaces. The remainder of the text is truncated with ellipses.

    -   <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 image cards, set `type` as "imageCard".

    -   <b>endPoint</b>

        Data type: `endPoint`

        A REST endpoint that returns and displays an image.

        Example:

        ```
        {
        "endPoint": {
        "name": "charities",
        "url": "<% 'charityImages/' + charity.image.id %>",
        "baseUrlType": "app",
        "authType": "sso"
        }
        ```

        <b>Note:</b> The `endPoint` and `url` attributes for the image card `body` are mutually exclusive. You must define either `endPoint` or `url`, but not both.

        For a complete list of `endPoint` attributes, see the <i>Attributes</i> section in [endPoints](/wcp_docs/ujr1530565661647.html).

    -   <b>url</b>

        Data type: stringScript

        URL of the image you want to display. You can specify either:

        -   An absolute url.
        -   A base64-encoded image string.

        If you use the `url` attribute with a base64-encoded image string, the PMD becomes non-functional if the serialized PMD exceeds the limit. Instead of using a base64-encoded image string, Workday recommends that you upload the image asset on a server and point to it using the `url` attribute.

        <b>Note:</b> The `endPoint` and `url` attributes for the image card `body` are mutually exclusive. You must define either `endPoint` or `url`, but not both.


-   <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="d23e1288"></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="d23e1334"></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)

[App Catalog: Charitable Donations](/app-catalog/charitableDonations)