---
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: pillCard
layout: subsection
wd_wcptag: pillCard
---
Displays a group of buttons 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 `pillCard` as the `body` type.
## Example
This sample `.card` file contains a pill card definition:
In this sample pillCardExample Page Configuration Card, the `body` type is `pillCard`.
```
{
"id": "pillCardExample",
"header": {
"title": "Suggested Tasks"
},
"body": {
"type": "pillCard",
"pills": [
{
"label": "Create charity",
"taskReference": {
"taskId": "createCharity"
}
},
{
"label": "Donate",
"taskReference": {
"taskId": "donate"
}
},
{
"label": "View donations",
"taskReference": {
"taskId": "donations"
}
}
]
}
}
```
This sample `card` tag references the `.card` definition in a PMD:
```
{
"type": "card",
"cardId": "pill"
}
```
This sample `cardContainer` references the pillCardExample Page Configuration Card.
```
{
"type": "cardContainer",
"layout": "grid",
"cards": [
{
"type": "card",
"cardId": "pill"
}
]
}
```
The sample `tasks` array in the AMD:
```
{
"tasks" : [
{
"id" : "createCharity",
"routingPattern" : "/charities/create",
"page" : {
"id" : "createCharity"
}
},
{
"id" : "donate",
"routingPattern" : "/donate/{charityId}",
"page" : {
"id" : "donate"
}
},
{
"id" : "donations",
"routingPattern" : "/donations/{workerId}",
"page" : {
"id" : "donations"
}
}
]
}
```
## Mobile Support
Android, iOS
## Attributes
- id
Data type: string
(Required) Unique identifier used to reference the card in PMDs. The `id` must match the card file name.
- parameters
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.
- header
Data type: object
Contains these attributes:
- title
Data type: stringScript
Bold text that displays at the top of the card.
- subtitle
Data type: stringScript
Additional text that displays below the `title`.
- icon
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).
- indicator
Data type: object
A small text element that you can use to convey the status of a card.
Contains these attributes:
- label
Data type: stringScript
The text of the indicator.
- color
Data type: stringScript
The color of the indicator. Valid values:
- `blue`
- `gray`
- `green`
- `orange`
- `red`
- `transparent`
- body
Data type: object
(Required) The body of the card.
Contains these attributes:
- type
Data type: string
(Required) The card type. For pill cards, set `type` as "pillCard".
- pills
Data type: TaskButton array
(Required) The list of buttons to display on the card. You can specify up to 10 pills on a card. Each `pill` contains these attributes:
- label
Data type: stringScript
(Required) The text of the `pill`.
- taskReference
Data type: `taskReference`
(Required) The page to navigate to when a user clicks the `pill`. Specify the [taskReference](/wcp_docs/cgt1531499518059.html#) tag.
- footer
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:
- label
Data type: stringScript
(Required) The text of the link.
- taskReference
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"
}
}
```
]
- workdayTaskReference
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 My Timesheets report in Workday:
```
"footer": [
{
"label": "My Timesheets",
"workdayTaskReference": {
"wid": "c4936fdad7d110001d9c005c57510000"
}
}
]
```
- url
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)