---
schema_version: "1"
id: a3673a492a535a6fa48e6fbed5a263d07a6349bf51b2c63a0363318bae844de1
title: Vlocity Cards LWC ReadMe Reference (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_vlocity_cards_lwc_readme_reference.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_vlocity_cards_lwc_readme_reference.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: acbb3a1bfd55c135e86ede8ae42c1b9020aa98c4053e87ecab24053ca24fd0b2
description: For the managed package runtime, this page lists the Lightning web component ReadMes available for LWC Cards. For details about the layout for each card and card layout component, see Base LWC Card and Layout Templates.
products:
  - Omnistudio
release: "264"
---
# Vlocity Cards LWC ReadMe Reference (Managed Package)

For the managed package runtime, this page lists the Lightning web component ReadMes available for LWC Cards. For details about the layout for each card and card layout component, see Base LWC Card and Layout Templates.

![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).

## Card Template ReadMes

<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="d340005e50">
              <p style="margin-bottom:0;">Component</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340005e56">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_action_grid_state_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the Action Grid State LWC Card Template ReadMe for each Vlocity release.">ActionGridState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">Displays a vertical list of actions as icons followed by labels, and an
                optional title at the top.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_cardactivestate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the CardActiveState ReadMe for each Vlocity release.">CardActiveState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A card state template with a header</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_cardminiactive_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the CardMiniActive LWC Card Template ReadMe for each Vlocity release.">CardMiniActive</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A card state template without a header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_cardopenstate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the CardOpenState LWC Card Template ReadMe for each Vlocity release.">CardOpenState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A simplified card state with a centered linked image and additional links
                below as actions.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_leftaccountinfostate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the LeftAccountInfoState LWC Card Template ReadMe for each Vlocity release.">LeftAccountInfoState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A console card template displaying simplified account data.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_leftprofilestate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the LeftProfileState LWC Card Template ReadMe for each Vlocity release.">LeftProfileState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A console card template that displays acccount information with a google
                map as a background header and limited data fields and actions.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_profilecardstate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the ProfileCardState LWC Card Template ReadMe for each Vlocity release.">ProfileCardState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A console card template that displays account information with no limit
                on data and actions.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_storyeditstateflyout_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the StoryEditStateFlyout LWC Card Template ReadMe for each Vlocity release.">StoryEditStateFlyout</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">Customery story console card template displays as a flyout.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_storynormalstate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the StoryNormalState LWC Card Template ReadMe for each Vlocity release.">StoryNormalState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">Customer story console card that displays story data as a card's default
                state.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_storyongoingstate_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the StoryOngoingState LWC Card Template ReadMe for each Vlocity release.">StoryOngoingState</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">Customer story console card that displays story data.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_widecard_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the WideCard LWC Card Template ReadMe for each Vlocity release.">WideCard</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A card template with a wide layout for one-column layouts with a
                header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_widecardslim_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the WideCardSlim LWC Card Template ReadMe for each Vlocity release.">WideCardSlim</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A card template with a wide layout for one-column layouts without a
                header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e50 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_widecardsmart_lwc_card_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the WideCardSmart ReadMe for each Vlocity release.">WideCardSmart</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e56 ">
              <p style="margin-bottom:0;">A card template with a wide layout for one-column layouts that work with
                Smart Actions.</p>
            </td>

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

## Layout Template ReadMes

<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="d340005e373">
              <p style="margin-bottom:0;">Component</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d340005e379">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e373 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_cardcanvas1x_lwc_layout_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the CardCanvas1x LWC Layout Template ReadMe for each Vlocity release.">CardCanvas1x</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e379 ">
              <p style="margin-bottom:0;">A one-column layout without a header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e373 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_cardcanvaslayout_lwc_layout_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the CardCanvasLayout LWC Layout Template ReadMe for each Vlocity release.">CardCanvasLayout</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e379 ">
              <p style="margin-bottom:0;">A one-column layout with a header.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Component" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e373 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_storycardcanvas_lwc_layout_template.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, this page contains the StoryCardCanvas LWC Layout Template ReadMe for each Vlocity release.">StoryCardCanvas</a>
              </p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d340005e379 ">
              <p style="margin-bottom:0;">A one-column console layout for customer story cards.</p>
            </td>

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

- **[Action Grid State LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_action_grid_state_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the Action Grid State LWC Card Template ReadMe for each Vlocity release.
- **[CardActiveState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_cardactivestate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the CardActiveState ReadMe for each Vlocity release.
- **[CardCanvas1x LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_cardcanvas1x_lwc_layout_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the CardCanvas1x LWC Layout Template ReadMe for each Vlocity release.
- **[CardCanvasLayout LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_cardcanvaslayout_lwc_layout_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the CardCanvasLayout LWC Layout Template ReadMe for each Vlocity release.
- **[CardMiniActive LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_cardminiactive_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the CardMiniActive LWC Card Template ReadMe for each Vlocity release.
- **[CardOpenState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_cardopenstate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the CardOpenState LWC Card Template ReadMe for each Vlocity release.
- **[LeftAccountInfoState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_leftaccountinfostate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the LeftAccountInfoState LWC Card Template ReadMe for each Vlocity release.
- **[LeftProfileState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_leftprofilestate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the LeftProfileState LWC Card Template ReadMe for each Vlocity release.
- **[ProfileCardState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_profilecardstate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the ProfileCardState LWC Card Template ReadMe for each Vlocity release.
- **[StoryCardCanvas LWC Layout Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_storycardcanvas_lwc_layout_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the StoryCardCanvas LWC Layout Template ReadMe for each Vlocity release.
- **[StoryOngoingState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_storyongoingstate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the StoryOngoingState LWC Card Template ReadMe for each Vlocity release.
- **[StoryNormalState LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_storynormalstate_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the StoryNormalState LWC Card Template ReadMe for each Vlocity release.
- **[StoryEditStateFlyout LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_storyeditstateflyout_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the StoryEditStateFlyout LWC Card Template ReadMe for each Vlocity release.
- **[WideCard LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_widecard_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the WideCard LWC Card Template ReadMe for each Vlocity release.
- **[WideCardSlim LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_widecardslim_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the WideCardSlim LWC Card Template ReadMe for each Vlocity release.
- **[WideCardSmart LWC Card Template (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_widecardsmart_lwc_card_template.htm&release=264.0.0&type=5)**  
    For the managed package runtime, this page contains the WideCardSmart ReadMe for each Vlocity release.