---
schema_version: "1"
id: d82a84062ea72ccd5ebe7d1022a8566226c03fe5083d2843d7d374f422377d00
title: Base UI and Card 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_base_ui_and_card_templates.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 4d4dd84ee400cb709c3ef8e9a95bc98a7882b609686d68630d3e041fadf6c6b0
description: For the managed package runtime, the following tables list the base templates that are available for use with Vlocity Cards. When editing a template, it’s best practice to clone the existing template first and to edit the cloned version.
products:
  - Omnistudio
release: "264"
---
# Base UI and Card Templates (Managed Package)

For the managed package runtime, the following tables list the base templates that are available for use with Vlocity Cards. When editing a template, it’s best practice to clone the existing template first and to edit the cloned version.

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

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note

Beginning with the Vlocity Summer '19 release, Vlocity supports Salesforce's Lightning Web Components programming model with Vlocity Lightning Web Components. Vlocity Lightning Web Components include components, functionalities, and templates exclusive to LWC Cards.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/images/icon_note.png)

Note

You can’t modify base Vlocity Cards authored by Vlocity. If you must edit the card, such as its configuration settings, card states, or data sources, clone the card.

## Card and Card Layout Templates

Apply Card and Layout templates in Vlocity Cards to control the information and actions that are available to a user. When active, the resulting Layout template becomes available in Vlocity Cards Component's Layout dropdown. The Vlocity Cards component is available in the Community Builder and the Lightning App Builder.

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

## Card Layouts

Layout templates act as containers for Card templates and control how the cards display.

To apply a Layout Template:

1. In the **Layout** section of a Vlocity Card, ensure the **Type** is set to **Layout**.
2. Enter a Layout Template into the **Template** field.

<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="d92047e121">
              <p style="margin-bottom:0;">Card Layout Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e127">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e133">
              <p style="margin-bottom:0;">Card Layout Template Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e139">
              <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="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas1xsimpleslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas1xsimpleslds"><!-- --></a>card-canvas-1x-simple-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">One-column container</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <p style="margin-bottom:0;">Image unavailable</p>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p>action-grid-card</p>
              <p>action-grid-card-slds
              </p>
              <p>card-active-placeholders-slds </p>
              <p>card-active-slds
              </p>
              <p>card-active-slds-VlocityTrack </p>
              <p>card-highlight-totals
              </p>
              <p>card-horiz-actions-slds </p>
              <p>card-horiz-noActions-slds
              </p>
              <p style="margin-bottom:0;">large-card-slds </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas1xslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas1xslds"><!-- --></a>card-canvas-1x-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">One-column container with search feature</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <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/card_canvas_1x_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p>action-grid-card </p>
              <p> action-grid-card-slds </p>
              <p>card-active-placeholders-slds </p>
              <p>card-active-slds </p>
              <p>card-active-slds-VlocityTrack </p>
              <p>card-highlight-totals </p>
              <p>card-horiz-actions-slds </p>
              <p>card-horiz-noActions-slds </p>
              <p style="margin-bottom:0;">large-card-slds </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas3xslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas3xslds"><!-- --></a>card-canvas-3x-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">Three-column container with search feature</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <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/card_canvas_3x_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p>action-grid-card </p>
              <p>action-grid-cards-slds </p>
              <p>card-active-placeholders-slds </p>
              <p>card-active-slds </p>
              <p>card-active-slds-VlocityTrack </p>
              <p>card-horiz-open-slds </p>
              <p>card-open-slds </p>
              <p>card-simple-slds </p>
              <p style="margin-bottom:0;">offer-card-active-slds </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas3xzonesslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardcanvas3xzonesslds"><!-- --></a>card-canvas-3x-zones-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">Three-column card container with search feature and zones</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <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/card_canvas_3x_zones_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p>action-grid-card</p>
              <p>action-grid-card-slds </p>
              <p><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-active-placeholders-slds</a></p>
              <p><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-active-slds</a></p>
              <p><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-active-slds-VlocityTrack</a></p>
              <p><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-horiz-open-slds</a></p>
              <p><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-open-slds</a></p>
              <p><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-simple-slds</a></p>
              <p style="margin-bottom:0;"><a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">offer-card-active-slds</a></p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_column"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_column"><!-- --></a>column</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">Simple column of cards</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <p style="margin-bottom:0;">Image unavailable</p>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p>action-grid-card </p>
              <p>action-grid-card-slds
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-active-placeholders-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-active-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-active-slds-VlocityTrack</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-highlight-totals</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-horiz-actions-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-horiz-noActions-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">large-card-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_infinitelist"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_infinitelist"><!-- --></a>infinite-list</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">List template with infinite scrolling for records using pagination</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <p style="margin-bottom:0;">See list-card-canvas</p>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-card-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcardcanvas"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcardcanvas"><!-- --></a>list-card-canvas</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">One-column container with each card's fields and actions displayed in a
                row</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <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/list_card_canvas.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-card</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcardcanvasslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcardcanvasslds"><!-- --></a>list-card-canvas-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">One-column container with each card's fields and actions displayed in a
                row in <dfn>SLDS</dfn>
              </p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <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/list_card_canvas_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-card-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e121 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listtable"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listtable"><!-- --></a>list-table</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e127 ">
              <p style="margin-bottom:0;">One-column container in a table. Each card's fields and actions are
                displayed in a row. Actions show in a vertical list.</p>
            </td>

            <td data-label="Card Layout Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e133 ">
              <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/list_table.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e139 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-table-card</a>
              </p>
            </td>

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

## Cards

To apply a Card Template:

1. In the **Cards** section of Vlocity Cards, ensure your Card isn’t **active**.
2. In the **States** section of Vlocity Cards, enter a Card template name into the **Template** 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/card_template.png)

<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="d92047e630">
              <p style="margin-bottom:0;">Card Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e636">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e642">
              <p style="margin-bottom:0;">Template Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e648">
              <p style="margin-bottom:0;">Compatible Card Layout Templates</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_actiongridcard"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_actiongridcard"><!-- --></a>action-grid-card</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays actions (icon and label) in a responsive grid format</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/action_grid_card.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_actiongridcardslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_actiongridcardslds"><!-- --></a>action-grid-card-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays actions (icon and label) in a responsive grid format using
                <dfn>SLDS</dfn>.
              </p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/action_grid_card_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardactiveplaceholdersslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardactiveplaceholdersslds"><!-- --></a>card-active-placeholders-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays a list of fields and an adjacent list of actions along with
                placeholder.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_active_placeholders_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardactiveslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardactiveslds"><!-- --></a>card-active-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays a list of fields and an adjacent list of actions.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_active_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardactivesldsVlocityTrack"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardactivesldsVlocityTrack"><!-- --></a>card-active-slds-VlocityTrack</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays a list of fields and an adjacent list of actions, using SLDS
                with tracking. For more information on tracking, </p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_active_slds_vlocitytrack.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhighlighttotals"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhighlighttotals"><!-- --></a>card-highlight-totals</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays entire card in single column with pagination, with four fields
                per page.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_highlight_totals.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhorizactionsslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhorizactionsslds"><!-- --></a>card-horiz-actions-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays entire card in single column with horizontal fields. Actions
                display horizontally under fields.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_horiz_actions_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhoriznoActionsslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhoriznoActionsslds"><!-- --></a>card-horiz-noActions-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays entire card in single column with horizontal fields. Actions
                available only in dropdown.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_horiz_noactions_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhorizopenslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardhorizopenslds"><!-- --></a>card-horiz-open-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays entire card in single column with button and label.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_horiz_open_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardopenslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardopenslds"><!-- --></a>card-open-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays one button and label in SLDS.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_open_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardsimpleslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_cardsimpleslds"><!-- --></a>card-simple-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays list of field labels adjacent list of fields.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/card_simple_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_largecardslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_largecardslds"><!-- --></a>large-card-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays entire card in a single column with a list of fields and an
                adjacent list of actions. In <dfn>SLDS</dfn>, includes placeholders,
                tracking and icon pattern.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/large_card_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-1x-simple-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">column</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcard"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcard"><!-- --></a>list-card</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays fields in one row with all action icons listed on same row.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/list_card.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-card-canvas</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcardslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listcardslds"><!-- --></a>list-card-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays fields in one row with all actions only available in
                dropdown.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/list_card_canvas_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-card-canvas-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listtablecard"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_listtablecard"><!-- --></a>list-table-card</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays fields in one row with all action icons and text listed in a
                vertical list.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/list_card_canvas.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">list-table</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e630 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_offercardactiveslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_offercardactiveslds"><!-- --></a>offer-card-active-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e636 ">
              <p style="margin-bottom:0;">Displays image-only button.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e642 ">
              <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/offer_card_active_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Card Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e648 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">card-canvas-3x-zones-slds</a>
              </p>
            </td>

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

## Flyout Templates

Flyout Templates enable users to view information or access additional actions for the current record or a child record. Similar to Cards, Flyouts are created in Vlocity Cards and use a Flyout Layout template to contain Flyout Card Templates. When active, the resulting Flyout becomes available in the Flyout Template dropdown.

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

## Flyout Layout Templates

Flyout Layout templates act as containers for Flyout Card Templates and control how the Flyout Card displays.

To apply a Flyout Layout Template:

1. In the Layout section of a Vlocity Card, ensure the Type is set to Flyout.
2. Enter a Flyout Template into the Template 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/flyout_layout_templates.png)

<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="d92047e1503">
              <p style="margin-bottom:0;">Flyout Layout Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1509">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1515">
              <p style="margin-bottom:0;">Template Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1521">
              <p style="margin-bottom:0;">Compatible Flyout Card Templates</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Flyout Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1503 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgrid"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgrid"><!-- --></a>flyout-grid</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1509 ">
              <p style="margin-bottom:0;">Simple one-column container for flyout components.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1515 ">
              <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/flyout_grid.png" alt="image"></div>
            </td>

            <td data-label="Compatible Flyout Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1521 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-items</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flyout Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1503 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridslds"><!-- --></a>flyout-grid-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1509 ">
              <p>Three-column container for flyout components in <dfn>SLDS</dfn>.</p>
              <p style="margin-bottom:0;">Overflow actions from parent card and flyout cards.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1515 ">
              <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/flyout_grid_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Flyout Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1521 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-items-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flyout Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1503 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridactions"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridactions"><!-- --></a>flyout-grid-actions</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1509 ">
              <p style="margin-bottom:0;">Two-column container for overflow actions from parent card.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1515 ">
              <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/flyout_grid_actions.png" alt="image"></div>
            </td>

            <td data-label="Compatible Flyout Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1521 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-items</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flyout Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1503 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridactionsslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridactionsslds"><!-- --></a>flyout-grid-actions-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1509 ">
              <p style="margin-bottom:0;">One-column container for overflow actions from parent card.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1515 ">
              <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/flyout_grid_actions_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Flyout Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1521 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-items-slds</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flyout Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1503 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridnoActionsslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgridnoActionsslds"><!-- --></a>flyout-grid-noActions-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1509 ">
              <p>Three-column container for flyout components in <dfn>SLDS</dfn>.</p>
              <p style="margin-bottom:0;">No overflow actions from parent card.</p>
            </td>

            <td data-label="Template Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1515 ">
              <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/flyout_grid_noactions_slds.png" alt="image"></div>
            </td>

            <td data-label="Compatible Flyout Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1521 ">
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-items-slds</a>
              </p>
            </td>

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

## Flyout Card Templates

To apply a Flyout Card Template:

1. In the **Cards** section of Vlocity Cards, ensure your Card isn’t **active**.
2. In the **States** section of Vlocity Cards, enter a Flyout Card template name into the **Template** 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/flyout_card_template.png)

<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="d92047e1770">
              <p style="margin-bottom:0;">Flyout Card Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1776">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1782">
              <p style="margin-bottom:0;">Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1788">
              <p style="margin-bottom:0;">Compatible Flyout Layout Templates</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Flyout Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1770 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgriditems"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgriditems"><!-- --></a>flyout-grid-items</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1776 ">
              <p style="margin-bottom:0;">Flyout container for card items.</p>
            </td>

            <td data-label="Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1782 ">
              <p style="margin-bottom:0;">See Compatible Flyout Layout Templates</p>
            </td>

            <td data-label="Compatible Flyout Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1788 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-actions</a>
              </p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Flyout Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1770 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgriditemsslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_flyoutgriditemsslds"><!-- --></a>flyout-grid-items-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1776 ">
              <p style="margin-bottom:0;">Flyout container for card items in <dfn>SLDS</dfn>.</p>
            </td>

            <td data-label="Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1782 ">
              <p style="margin-bottom:0;">See Compatible Flyout Layout Templates</p>
            </td>

            <td data-label="Compatible Flyout Layout Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1788 ">
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-slds</a>
              </p>
              <p>
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-actions-slds</a>
              </p>
              <p style="margin-bottom:0;">
                <a href="https://help.salesforce.com/s/articleView?id=xcloud.os_base_ui_and_card_templates.htm&amp;release=264.0.0&amp;type=5">flyout-grid-noActions-slds</a>
              </p>
            </td>

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

## Console Card and Layout Templates

Console Card templates enable multiple records to be accessible and actionable all from the same view. In addition to Console Card and Layout Templates, there are out of the box Layouts that contain out of the box Cards. Console Cards also rely on embedded templates to display additional information all within one parent layout.

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

## Out of the Box Console Layouts

The Console Layouts are accessible in the Vlocity Cards landing page.

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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <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="d92047e1938">
              <p style="margin-bottom:0;">Layout</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1944">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1950">
              <p style="margin-bottom:0;">Layout Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1956">
              <p style="margin-bottom:0;">Layout Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1962">
              <p style="margin-bottom:0;">Cards</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1969">
              <p style="margin-bottom:0;">Card Templates</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e1975">
              <p style="margin-bottom:0;">Embedded Templates</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1938 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_consolesidebarslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_consolesidebarslds"><!-- --></a>console-sidebar-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1944 ">
              <p style="margin-bottom:0;">Sidebar layout that displays left sidebar cards and the embedded
                story-card-canvas template.</p>
            </td>

            <td data-label="Layout Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1950 ">
              <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/console_sidebar_slds_explained.png" alt="image"></div>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1956 ">
              <p style="margin-bottom:0;">console-sidebar-slds</p>
            </td>

            <td data-label="Cards" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1962 ">
              <p>profile-account-slds</p>
              <p style="margin-bottom:0;">profile-account-info-slds</p>
            </td>

            <td data-label="Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1969 ">
              <p>left-profile-slds</p>
              <p style="margin-bottom:0;">left-account-info-slds</p>
            </td>

            <td data-label="Embedded Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1975 ">
              <p style="margin-bottom:0;">story-card-canvas</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1938 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_consolerightsidebarslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_consolerightsidebarslds"><!-- --></a>console-right-sidebar-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1944 ">
              <p>Layout for right sidebar cards.</p>
              <p>Displays offer cards based on Vlocity Intelligence inputs and profile
                cards.</p>
              <p style="margin-bottom:0;">Cards for the left-profile-tag template are embedded in this
                template.</p>
            </td>

            <td data-label="Layout Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1950 ">
              <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/console_right_sidebar_slds_explained.png" alt="image"></div>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1956 ">
              <p style="margin-bottom:0;">console-right-sidebar-slds</p>
            </td>

            <td data-label="Cards" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1962 ">
              <p>acuity-sidebar-offer-card</p>
              <p style="margin-bottom:0;">profileTags</p>
            </td>

            <td data-label="Card Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1969 ">
              <p style="margin-bottom:0;">acuity-sidebar-offer-card</p>
            </td>

            <td data-label="Embedded Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1975 ">
              <p style="margin-bottom:0;">left-profile-tag</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1938 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_storyslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_storyslds"><!-- --></a>story-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1944 ">
              <p style="margin-bottom:0;">Embedded in the console-sidebar-slds template the story-slds layout
                presents story cards to the user and includes sorting by story type.</p>
            </td>

            <td data-label="Layout Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1950 ">
              <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/story_card_canvas.png" alt="image"></div>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1956 ">
              <p style="margin-bottom:0;">story-card-canvas</p>
            </td>

            <td data-label="Cards" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1962 ">
              <p style="margin-bottom:0;">Various Story Cards</p>
            </td>

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

            <td data-label="Embedded Templates" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e1975 ">
              <p style="margin-bottom:0;">n/a</p>
            </td>

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

## Out of the Box Console Cards

The Console Cards are accessible through the out of the box Console Layouts.

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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <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="d92047e2182">
              <p style="margin-bottom:0;">Card</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e2188">
              <p style="margin-bottom:0;">Description</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e2194">
              <p style="margin-bottom:0;">Card Preview</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e2200">
              <p style="margin-bottom:0;">Card Template</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e2206">
              <p style="margin-bottom:0;">Layout</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d92047e2213">
              <p style="margin-bottom:0;">Layout Template</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Card" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2182 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_acuitysidebaroffercard"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_acuitysidebaroffercard"><!-- --></a>acuity-sidebar-offer-card</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2188 ">
              <p style="margin-bottom:0;">Card that displays offer links in the console sidebar.</p>
            </td>

            <td data-label="Card Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2194 ">
              <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/acuity_sidebar_offer_card.png" alt="image"></div>
            </td>

            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2200 ">
              <p style="margin-bottom:0;">acuity-sidebar-offer-card</p>
            </td>

            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2206 ">
              <p style="margin-bottom:0;">console-right-sidebar-slds</p>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2213 ">
              <p style="margin-bottom:0;">console-right-sidebar-slds</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2182 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_profileaccountslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_profileaccountslds"><!-- --></a>profile-account-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2188 ">
              <p style="margin-bottom:0;">Displays twitter photo, information, and actions in
                <dfn>SLDS</dfn>.
              </p>
            </td>

            <td data-label="Card Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2194 ">
              <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/left_profile_slds.png" alt="image"></div>
            </td>

            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2200 ">
              <p style="margin-bottom:0;">left-profile-slds</p>
            </td>

            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2206 ">
              <p style="margin-bottom:0;">console-sidebar-slds</p>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2213 ">
              <p style="margin-bottom:0;">console-sidebar-slds</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2182 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_profileaccountinfoslds"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_profileaccountinfoslds"><!-- --></a>profile-account-info-slds</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2188 ">
              <p style="margin-bottom:0;">Displays information for console sidebar in <dfn>SLDS</dfn>.</p>
            </td>

            <td data-label="Card Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2194 ">
              <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/left_account_info_slds.png" alt="image"></div>
            </td>

            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2200 ">
              <p style="margin-bottom:0;">left-account-info-slds</p>
            </td>

            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2206 ">
              <p style="margin-bottom:0;">console-sidebar-slds</p>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2213 ">
              <p style="margin-bottom:0;">console-sidebar-slds</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Card" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2182 ">
              <p style="margin-bottom:0;" id="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_profileTags"><a name="os_base_ui_and_card_templates__UUID-f5ea839d-1e0c-63b2-b6b3-63ccef8981d5_profileTags"><!-- --></a>profileTags</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2188 ">
              <p>Displays the Profile component in the right sidebar.</p>
              <p style="margin-bottom:0;">Profile tags are embedded in the console-right-sidebar-slds template.</p>
            </td>

            <td data-label="Card Preview" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2194 ">
              <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/left_profile_tag.png" alt="image"></div>
            </td>

            <td data-label="Card Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2200 ">
              <p style="margin-bottom:0;">left-profile-tag</p>
            </td>

            <td data-label="Layout" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2206 ">
              <p style="margin-bottom:0;">console-right-sidebar-slds</p>
            </td>

            <td data-label="Layout Template" class="slds-cell-wrap" style="vertical-align:top;" headers="d92047e2213 ">
              <p style="margin-bottom:0;">console-right-sidebar-slds</p>
            </td>

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