---
schema_version: "1"
id: 4f1807dbb94c53523375583df777636d996ef5766f4d4ade3cb8e081b389d087
title: CardActiveState LWC Card Template (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_cardactivestate_lwc_card_template.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_cardactivestate_lwc_card_template.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 9a95d7d26e0f32071237205c059d64a3c139e22252a569c07c99ee3b592baeef
description: For the managed package runtime, this page contains the CardActiveState ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# CardActiveState LWC Card Template (Managed Package)

For the managed package runtime, this page contains the CardActiveState ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _CardActiveState LWC Card Template_ displays a card state template for a card active state. The layout includes a header with image and title, has flyout functionality, and field tracking capability. The body is a two-column section, where data fields display as block elements in the first column and actions display as block elements in the second column.

## Available CardActiveState Features

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d342877e62">
              <p style="margin-bottom:0;">Feature</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d342877e68">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">Specifies which theme to use, slds or nds.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">header icon</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">Displays an icon in the header. By default, displays the sObject type icon.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">header title</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">Displays the title of the card. By default, the title of the card is the first field configured.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">Lists the data fields configured. Data fields display in the first column.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">actions</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">Lists the actions configured. Actions display in the second column.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">tracking</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">On focus, each field displays an eye icon that triggers tracking when clicked.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Feature" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e62 ">
              <p style="margin-bottom:0;">flyout</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d342877e68 ">
              <p style="margin-bottom:0;">By default, this template has a flyout. When a user clicks the expand icon, the configured flyout displays in a modal.</p>
            </td>

          </tr>
        </tbody>
      </table>