---
schema_version: "1"
id: 7b2664c8367ef93c843ef2780b9c2c2bcae807e383f9eed755c5f9fe250b6f4b
title: LWC 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_lwc_card_layout_templates.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_lwc_card_layout_templates.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 19872c7e8c1a4092b73ced1f245e4988fd3280408326832ca558ab6b611bb6c9
description: For the managed package runtime, apply card and layout templates to a Vlocity LWC enabled card to control the information and actions available to a user.
products:
  - Omnistudio
release: "264"
---
# LWC Card and Layout Templates (Managed Package)

For the managed package runtime, apply card and layout templates to a Vlocity LWC enabled card to control the information and actions available to a user.

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

## LWC Card Layout Templates

LWC layout templates are containers for card templates and control how the cards display.

See [Vlocity Layouts (Managed Package)](https://help.salesforce.com/s/articleView?id=xcloud.os_vlocity_layouts.htm&release=264.0.0&type=5 "For the managed package runtime, Vlocity layouts consist of rectangular canvases that act as containers for cards. Cards display information and clickable actions to support efficient navigation through complex CRM interactions.").

1. In the Layout pane of a Vlocity Card, ensure the **Type** is set to **Layout**.
2. Enter a layout name in the **Layout LWC** field.
    
    ![image](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/base_lwc_card_templates_tempalte_field.png)
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
              <colgroup>
                <col style="width:25%">
                <col style="width:25%">
                <col style="width:25%">
                <col style="width:25%">
              </colgroup>
              <thead class="slds-text-title_caps ">
                <tr class="">
                  <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e122">Card Layout Template</th>
                  <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e125">Description</th>
                  <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e128">Card Layout Preview</th>
                  <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e131">Compatible Card Templates</th>
                </tr>
              </thead>
              <tbody>
                <tr class="">
                  <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e122 ">
                    <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 LWC Layout Template (Managed Package)</a>
                  </td>

                  <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e125 ">Displays a one-column container.</td>

                  <td data-label="Card Layout Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e128 ">
                    <div style="text-align:left;" id="task_nfl_tl1_ldc__fig_tfl_tl1_ldc"><a name="task_nfl_tl1_ldc__fig_tfl_tl1_ldc"><!-- --></a>
                      <a name="task_nfl_tl1_ldc__image_ufl_tl1_ldc"><!-- --></a><img id="task_nfl_tl1_ldc__image_ufl_tl1_ldc" 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/os_classic_cards_cardcanvas1x.png" alt="CardCanvas1x template">
                    </div>
                  </td>

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

                </tr>
                <tr class="">
                  <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e122 ">
                    <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 LWC Layout Template (Managed Package)</a>
                  </td>

                  <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e125 ">Displays a one-column container with a header that includes a
                    search box and room for an optional title before the search
                    box.</td>

                  <td data-label="Card Layout Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e128 ">
                    <div style="text-align:left;" id="task_nfl_tl1_ldc__fig_vfl_tl1_ldc"><a name="task_nfl_tl1_ldc__fig_vfl_tl1_ldc"><!-- --></a>
                      <a name="task_nfl_tl1_ldc__image_wfl_tl1_ldc"><!-- --></a><img id="task_nfl_tl1_ldc__image_wfl_tl1_ldc" 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/os_classic_cards_cardcanvaslayout.png" alt="CardCanvasLayout template">
                    </div>
                  </td>

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

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

### LWC Card Templates

LWC card templates control how card information displays on a card.

1. In the Cards pane of a Vlocity Card, ensure your card is not active.
2. In the States pane of a Vlocity Card, enter a card template name in the **State LWC** field.
    
    ![image](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/base_lwc_card_templates_state_lwc.png)
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
                <colgroup>
                  <col style="width:25%">
                  <col style="width:25%">
                  <col style="width:25%">
                  <col style="width:25%">
                </colgroup>
                <thead class="slds-text-title_caps ">
                  <tr class="">
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e261">Card Template</th>
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e264">Description</th>
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e267">Template Preview</th>
                    <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d75520e270">Compatible Card Layout Templates</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

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

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_agl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_agl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_bgl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_bgl_tl1_ldc" 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/os_classic_cards_actiongridstate.png" alt="Screenshot of actionGridState template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

                  </tr>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e264 ">Displays a card with an image and title in a header, and a
                      two-column body with a list of fields in the first column and a
                      list of actions in the second column. Has flyout
                      functionality.</td>

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_cgl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_cgl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_dgl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_dgl_tl1_ldc" 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/os_classic_cards_cardactivestate.png" alt="Screenshot of cardActiveState template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

                  </tr>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e264 ">Displays a two-column card with an image or icon in the
                      first column, and data and actions in the second column. Has
                      max-height and truncates descriptive text at 2 lines.</td>

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_egl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_egl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_fgl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_fgl_tl1_ldc" 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/os_classic_cards_cardminiactive.png" alt="Screenshot of cardMiniActive template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

                  </tr>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e264 ">Displays a card as a centered image and text block that
                      links to the first action. Remaining actions display in an
                      inline grid beneath the image and text block. Has flyout
                      functionality.</td>

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_ggl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_ggl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_hgl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_hgl_tl1_ldc" 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/os_classic_cards_cardopenstate.png" alt="Screenshot of cardOpenState template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

                  </tr>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e264 ">Displays a wide layout with an image, a list of actions, the
                      status of the card state, and a list of fields as an inline
                      grid. Has flyout functionality.</td>

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_igl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_igl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_jgl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_jgl_tl1_ldc" 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/os_classic_cards_widecard.png" alt="Screenshot of wideCard template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

                  </tr>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e264 ">Displays a wide layout with an image, a list of actions, the
                      status of the card state, and a list of fields as an inline
                      grid.</td>

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_kgl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_kgl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_lgl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_lgl_tl1_ldc" 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/os_classic_cards_widecardslim.png" alt="Screenshot of wideCardSlim template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

                  </tr>
                  <tr class="">
                    <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e261 ">
                      <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>
                    </td>

                    <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e264 ">Displays a wide layout with an image, the status of the card
                      state, a list of fields as an inline grid, and displays a list
                      of Smart Actions. Has flyout functionality. See&nbsp;<a href="https://help.salesforce.com/s/articleView?id=xcloud.os_configuring_smart_actions_on_an_lwc_card.htm&amp;release=264.0.0&amp;type=5" title="For the managed package runtime, beginning with the Vlocity Insurance and Health Summer '19 and Vlocity Communications, Media, and Energy Fall '19 releases, Vlocity supports the Salesforce Lightning Web Component programming model.">Configure Smart Actions on an LWC Card (Managed Package)</a>.</td>

                    <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e267 ">
                      <div style="text-align:left;" id="task_oqf_lm1_ldc__fig_mgl_tl1_ldc"><a name="task_oqf_lm1_ldc__fig_mgl_tl1_ldc"><!-- --></a>
                        <a name="task_oqf_lm1_ldc__image_ngl_tl1_ldc"><!-- --></a><img id="task_oqf_lm1_ldc__image_ngl_tl1_ldc" 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/os_classic_cards_widecardsmart.png" alt="Screenshot of wideCardSmart template">
                      </div>
                    </td>

                    <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d75520e270 ">Any</td>

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