---
schema_version: "1"
id: 5fa40a0746fd405e45e25da26de34b62e48c36b2991bf94b285fb8ff4579867f
title: CardMiniActive 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_cardminiactive_lwc_card_template.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_cardminiactive_lwc_card_template.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 098b09a5329a2e6df51c433e1900d627760e67624c713707717fd4c9df2aadb5
description: For the managed package runtime, this page contains the CardMiniActive LWC Card Template ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# CardMiniActive LWC Card Template (Managed Package)

For the managed package runtime, this page contains the CardMiniActive LWC Card Template 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 Spring '20

The _CardMiniActive LWC Card Template_ displays a card state template with two columns. An icon or image displays in one column, while the data fields and actions display in the other column. The component has a max-height of 132px and truncates descriptive text to two lines. The user can configure multiple images with session variables. However, one image is recommended.

## Available CardMiniActive 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="d184154e62">
              <p style="margin-bottom:0;">Feature</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d184154e68">
              <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="d184154e62 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e68 ">
              <p style="margin-bottom:0;">By default, actions display below fields. Only two actions are visible at anypoint based on the order added.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e68 ">
              <p style="margin-bottom:0;">Specifies session variables to add to the card. See Available <em>session</em> Variables on this page.</p>
            </td>

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

## Available session Variables

<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="d184154e145">
              <p style="margin-bottom:0;">Variable</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d184154e151">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e145 ">
              <p style="margin-bottom:0;">leftImage</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e151 ">
              <p style="margin-bottom:0;">Sets the left image URL. For example, <code>/image-url.jpg</code>. URL can be relative or absolute.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e151 ">
              <p style="margin-bottom:0;">Sets the left icon. For example, <code>standard:icon</code>
              </p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e151 ">
              <p style="margin-bottom:0;">Sets the left image URL. For example, <code>/image-url.jpg</code>. URL can be relative or absolute.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e151 ">
              <p style="margin-bottom:0;">Sets the right icon. For example, <code>standard:icon</code>
              </p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e151 ">
              <p style="margin-bottom:0;">Sets the css style for both left and right images. For example, <code>height: 100px; border: 1px;</code>
              </p>
            </td>

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

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

The _CardMiniActive LWC Card Template_ displays a card state template with two columns. An icon or image displays in one column, while the data fields and actions display in the other column. The user can configure multiple images with session variables. However, one image is recommended.

## Available CardMiniActive 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="d184154e282">
              <p style="margin-bottom:0;">Feature</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d184154e288">
              <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="d184154e282 ">
              <p style="margin-bottom:0;">fields</p>
            </td>

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

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e288 ">
              <p style="margin-bottom:0;">By default, all actions display below the fields.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e288 ">
              <p style="margin-bottom:0;">Specifies session variables to add to the card. See Available <em>session</em> Variables on this page.</p>
            </td>

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

## Available session Variables

<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="d184154e366">
              <p style="margin-bottom:0;">Variable</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d184154e372">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Variable" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e366 ">
              <p style="margin-bottom:0;">leftImage</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e372 ">
              <p style="margin-bottom:0;">Sets the left image URL. For example, <code>/image-url.jpg</code>. URL can be relative or absolute.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e372 ">
              <p style="margin-bottom:0;">Sets the left icon. For example, <code>standard:icon</code>
              </p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e372 ">
              <p style="margin-bottom:0;">Sets the left image URL. For example, <code>/image-url.jpg</code>. URL can be relative or absolute.</p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e372 ">
              <p style="margin-bottom:0;">Sets the right icon. For example, <code>standard:icon</code>
              </p>
            </td>

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

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d184154e372 ">
              <p style="margin-bottom:0;">Sets the css style for both left and right images. For example, <code>height: 100px; border: 1px;</code>
              </p>
            </td>

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