---
schema_version: "1"
id: b7a9c30dad0d8e421ceb691d54efc70cb4c216ae4377d04163792cd77b978473
title: Console Card and Layout Templates (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_console_card_layout_templates.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_console_card_layout_templates.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 4f7fdf1e8de58a05988f3fce8f77bb67f0bffd6117e4f3de30a4cc25834f2a5e
description: For the managed package runtime, console card and layout templates enable multiple records to be accessible and actionable all from the same view. Apply console cards and layouts to service Vlocity Service Console apps.
products:
  - Omnistudio
release: "264"
---
# Console Card and Layout Templates (Managed Package)

For the managed package runtime, console card and layout templates enable multiple records to be accessible and actionable all from the same view. Apply console cards and layouts to service Vlocity Service Console apps.

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

## Console Card Layout Template

Console card layout templates are containers for console cards and control how console cards display.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e58">
              <p style="margin-bottom:0;">Card Layout Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e64">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e70">
              <p style="margin-bottom:0;">Template Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e76">
              <p style="margin-bottom:0;">Compatible Card Templates</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e58 ">
              <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="d102152e64 ">
              <p style="margin-bottom:0;">Displays story cards inside a one-column container that has a header,
                which includes a title and a search box.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e70 ">
              <div><img style="width:100px;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/customer_story_lwc_card.png" alt="Vlocity Customer Story LWC Card"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e76 ">
              <p style="margin-bottom:0;">storyNormalState, storyOngoingState</p>
            </td>

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

## Console Card Templates

Console card templates control how information on a console card displays.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e147">
              <p style="margin-bottom:0;">Card Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e153">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e159">
              <p style="margin-bottom:0;">Template Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d102152e165">
              <p style="margin-bottom:0;">Compatible Card Templates</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e147 ">
              <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="d102152e153 ">
              <p style="margin-bottom:0;">Displays account data listed in rows.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e159 ">
              <div><img style="width:100px;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/leftprofileaccountinfostate.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e165 ">
              <p style="margin-bottom:0;">Any</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e147 ">
              <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="d102152e153 ">
              <p style="margin-bottom:0;">Displays account information as a static google map, up to three data
                fields, and up to three actions.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e159 ">
              <div><img style="width:100px;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/leftprofilestate.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e165 ">
              <p style="margin-bottom:0;">Any</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e147 ">
              <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="d102152e153 ">
              <p style="margin-bottom:0;">Displays profile information as a static google map, data fields, and
                actions.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e159 ">
              <div><img style="width:100px;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/profile_card_state_lwc_ins108.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e165 ">
              <p style="margin-bottom:0;">Any</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e147 ">
              <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="d102152e153 ">
              <p style="margin-bottom:0;">Displays a story item as an image in the first column, and the title and
                data fields in the second column.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e159 ">
              <div><img style="width:100px;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/storycardcanvas___storynormalstate.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e165 ">
              <p style="margin-bottom:0;">storyCardCanvas</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e147 ">
              <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="d102152e153 ">
              <p style="margin-bottom:0;">Displays a story item as an image in the first column, and the title,
                subtitle, and fields in the second column.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e159 ">
              <div><img style="width:100px;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/omnistudio_for_managed_packages/images/storyongoingstate_updated_layout.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d102152e165 ">
              <p style="margin-bottom:0;">storyCardCanvas</p>
            </td>

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