---
schema_version: "1"
id: 8d029461c6704bbc6d403df412f402703381b75a1c2baefa83ee1d0838d76dac
title: Record List (LWR)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_record_list_lwr.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_record_list_lwr.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: aadefedba2f938e34254ea60c917779069fc878922e2d88efc72c1ec842cdfac
description: The Record List component for LWR sites helps your site visitors easily view, search, and sort their accounts, cases, and other data. The component enhances security and user satisfaction by showing users only the data they’re permitted to view based on admin-defined access. With properties for component customization and styling—including support for custom CSS—the component helps you make sure that your visitors have a smooth and responsive experience across desktop, tablet, and mobile devices. The component offers a clean, professional data display that you can tailor to perfectly align with your brand and website design theme.
products:
  - Experiences
release: "264"
---
# Record List (LWR)

The Record List component for LWR sites helps your site visitors easily view, search, and sort their accounts, cases, and other data. The component enhances security and user satisfaction by showing users only the data they’re permitted to view based on admin-defined access. With properties for component customization and styling—including support for custom CSS—the component helps you make sure that your visitors have a smooth and responsive experience across desktop, tablet, and mobile devices. The component offers a clean, professional data display that you can tailor to perfectly align with your brand and website design theme.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note There are a few things to keep in mind when using the Record List component:

- The Record List component supports all Object Home page supported objects.
- You can use the Record List component on any page in your community. We recommend adding it to custom list views that you create. You can also create a navigation menu item to link to that page with its internal page URL.
- On a mobile device, if a user taps any field in the Record List component, including a field containing a URL, they’re directed to the full record detail page.

1. Select the **Record List** component on the Record List page.
    
    ![This image shows the list of Components](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/components.png)
2. In the property editor, click **Settings** and configure the following:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d43424e102">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d43424e105">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Object</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">The Salesforce object whose records you want to display. The component supports all
                  Object Home page objects, such as Opportunities, Accounts, or Contacts.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Record List</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">The Record List component displays a customizable list of records, such as open
                  cases, accounts, opportunities, or product inventory, based on the object you select and
                  the specific records you choose to show.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Number of Records to Display</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">Select how many records to display in a list view. The minimum is five, and the
                  maximum is fifteen.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Choose a List Type</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">
                  <p>Choose how records appear in the list. Use <strong class="uicontrol">Table</strong> view for
                    detailed data or <strong class="uicontrol">Card</strong> view for a compact, visual
                    layout.</p>
                  <p style="margin-bottom:0;"><strong class="uicontrol">Pro Tip</strong>: For the best viewing experience, set Table
                    view for desktop and Card view for mobile.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Header</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">
                  <p>Customize the record list header to match the look and functionality you want. You can
                    control whether the header is shown, set background color and borders, and choose from
                    various text styling options.</p>
                  <p><strong class="uicontrol">Show Header</strong>: This option is enabled by default and can be
                    customized.</p>
                  <ul>
                    <li>Set a background color that aligns with your brand or site theme.</li>

                    <li>Define a border color to add emphasis or separation.</li>

                    <li>Adjust the border weight in pixels to control how prominently the border
                      appears.</li>

                  </ul>
                  <p><strong class="uicontrol">Show Object Icon</strong></p>
                  <p>Displays the object’s icon in the header. This option is enabled by default.</p>
                  <p><strong class="uicontrol">Show Title</strong></p>
                  <p>Controls how the header title appears.</p>
                  <ul>
                    <li>Display the title to provide helpful context. Enabled by default.</li>

                    <li>Choose a text style: heading or paragraph.</li>

                    <li>Apply formatting such as bold, italic, or underline.</li>

                    <li>Set the text color to match your site design.</li>

                  </ul>
                  <p><strong class="uicontrol">Show List View Picker </strong></p>
                  <p>Lets you switch between list views. Enabled by default.</p>
                  <ul>
                    <li>
                      <p>Choose a heading or paragraph for the text style.</p>
                    </li>

                    <li>
                      <p>Apply bold, italic, or underline formatting to suit your design.</p>
                    </li>

                  </ul>
                  <p><strong class="uicontrol">Show Status</strong></p>
                  <p>Shows the status of the list view, including the total number of records, the column
                    used for sorting, the sort order (ascending or descending), and whether any filters are
                    applied. Enabled by default.</p>
                  <ul>
                    <li>
                      <p>Choose either heading or paragraph style.</p>
                    </li>

                    <li>
                      <p>Apply bold, italic, or underline formatting.</p>
                    </li>

                  </ul>
                  <p><strong class="uicontrol">Show Search</strong></p>
                  <p style="margin-bottom:0;">Adds a search field to the record list so users can filter results quickly and
                    easily.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Records</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">
                  <p>Customize the record display settings for <strong class="uicontrol">Table</strong> and
                    <strong class="uicontrol">Card</strong> list types. These settings include hover colors, padding,
                    background, border, spacing, and text styling.
                  </p>
                  <p>Customize the appearance of records for a consistent and accessible display across
                    layouts. Adjust background and border settings, control cell or card padding, and define
                    spacing between items. Style text to match your site’s design.</p>
                  <p><strong class="uicontrol">Row or Card Hover Color</strong></p>
                  <p>Set the background color shown when hovering over a row (Table) or a card (Card). Use
                    the gradient panel to adjust saturation and brightness, and the vertical hue slider to
                    pick a base color. Applies to Table and Card.</p>
                  <p><strong class="uicontrol">Cell or Card Padding</strong></p>
                  <p>Adjust the internal spacing of each table cell or card. Use padding to control spacing
                    around content and improve overall readability for Top, Right, Bottom, and Left, or use
                    Make all values equal (enabled by default) to apply the same value to all sides. You can
                    also select the unit of measurement in px, rem, or %. Applies to Table and Card.</p>
                  <p><strong class="uicontrol">Background Color</strong></p>
                  <p>Sets the background color of the record rows (Table) or cards (Card). Use this setting
                    to align with your brand or improve visual clarity. Applies to Table and Card.</p>
                  <p><strong class="uicontrol">Column Header Background Color</strong></p>
                  <p>Sets the background color of the column headers in a table layout. Applies to Table
                    only.</p>
                  <p><strong class="uicontrol">Column Header Text Color</strong></p>
                  <p>Sets the text color of column headers in the table view. Applies to Table only.</p>
                  <p><strong class="uicontrol">Card Border Color</strong></p>
                  <p>Defines the color of the outer border—either around the full table or each card.
                    Applies to Table and Card.</p>
                  <p><strong class="uicontrol">Border Weight (px)</strong></p>
                  <p>Specifies the thickness of the border in pixels. The default value is 1px. Applies to
                    Table and Card.</p>
                  <p><strong class="uicontrol">Divider Border Color</strong></p>
                  <p>Sets the color of horizontal dividers between table rows. Applies to Table only.</p>
                  <p><strong class="uicontrol">Divider Border Weight (px)</strong></p>
                  <p>Specifies the thickness of dividers between rows. The default value is 1px. Applies to
                    Table only.</p>
                  <p><strong class="uicontrol">Space Between Items (px)</strong></p>
                  <p>Sets the spacing between individual cards in the list. Default value is 16px. Applies
                    to Card only.</p>
                  <p><strong class="uicontrol">Text Style</strong></p>
                  <p>Controls how record content appears. Select from available text styles such as
                    Paragraph or Heading. Applies to Table and Card.</p>
                  <p><strong class="uicontrol">Text Color</strong></p>
                  <p style="margin-bottom:0;">Sets the color of the record text. Choose a color that complements your site’s design
                    and ensures readability. Applies to Table and Card.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e102 "><samp class="parmname">Pagination</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e105 ">
                  <p>Pagination helps you navigate between different pages of records on the Record List
                    page. There are two types of pagination:</p>
                  <p><strong class="uicontrol">Previous/Next</strong></p>
                  <p>Displays a fixed number of records per page. You can click
                    <strong class="uicontrol">Previous</strong> or <strong class="uicontrol">Next</strong> to move between
                    pages.
                  </p>
                  <p><strong class="uicontrol">Show More</strong></p>
                  <p style="margin-bottom:0;">Loads additional records below the current list, creating a smooth scrolling
                    experience.</p>
                </td>

              </tr>
            </tbody>
          </table>
3. In the property editor, click **Visibility** and configure the following:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d43424e445">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d43424e448">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e445 "><samp class="parmname">Layout</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e448 ">
                  <p>Configures the overall layout of the record list, including spacing and alignment
                    settings.</p>
                  <ul>
                    <li>
                      <p><strong class="uicontrol">Margin</strong></p>
                      <p>Sets the outer spacing around the component. Configure spacing individually for Top,
                        Right, Bottom, and Left, or use Make all values equal (enabled by default) to apply the
                        same value to all sides. You can also select the unit of measurement in px, rem, or
                        %.</p>
                    </li>

                    <li>
                      <p><strong class="uicontrol">Padding</strong></p>
                      <p>Sets the inner spacing between the component’s content and its border. Configure
                        spacing individually for Top, Right, Bottom, and Left, or use Make all values equal
                        (enabled by default) to apply the same value to all sides. You can also select the unit
                        of measurement in px, rem, or %.</p>
                    </li>

                  </ul>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e445 "><samp class="parmname">Custom CSS</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e448 ">
                  <p>Applies a custom CSS to modify the appearance of the record
                    list.</p>
                  <p><strong class="uicontrol">Edit Head Markup</strong></p>
                  <p style="margin-bottom:0;">To customize the <code>head</code> section of your site’s HTML, click
                    <strong class="uicontrol">Edit Head Markup</strong> This section is useful for adding metadata,
                    linking to custom stylesheets, or configuring site-level settings that influence how your
                    site loads and appears.
                  </p>
                </td>

              </tr>
            </tbody>
          </table>
4. In the property editor, click **Style** and configure the following:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d43424e541">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d43424e544">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e541 "><samp class="parmname">Show Component on Desktop</samp></td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d43424e544 ">
                  <p>Controls whether the component is visible when the site is viewed on desktop
                    devices. This setting is enabled by default.</p>
                  <p style="margin-bottom:0;">Component visibility is also affected by
                    visibility rules. These rules determine when the component appears and who can see it
                    based on factors such as the user profile, audience, or device type. See <a href="https://help.salesforce.com/s/articleView?id=experience.add_visibility_rule_record_list_lwr.htm&amp;release=264.0.0&amp;type=5" title="Control when to show or hide a Record List component based on user context or custom logic to deliver a more tailored experience.">Add Visibility Rule for
                      Record List</a>.</p>
                </td>

              </tr>
            </tbody>
          </table>
    
    The List Type screen (Table and Card View), Show Header, Show List View Picker, and Layout screen are responsive on desktop. The default value for tablets and mobiles is the desktop value, but you can specify different values.
5. To move between **Mobile**, **Tablet**, and **Desktop** view, use the **View Mode**
6. To search for existing cases, accounts, opportunities, or available product inventory, use Preview.
7. To narrow down the number of records shown based on predefined criteria set by your admin and your own custom selections, click the Show Filter icon.
    
    - Use the Quick Filters section to refine results for your session using fields like Account Name, Phone, Type, and Account Owner Alias.
    - Click  **Apply** to apply the selected filters.
    
    Admin-Defined Filters at the top are locked and can’t be changed or removed. For example, a filter like Billing State equals AL shows only accounts in Alabama. Quick Filters are temporary, not saved, and don’t affect other users.
8. To publish you site, click **Publish**.

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example Sample Record List component (Full layout):

![The record list displays All Accounts](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/all_accounts.png)

- **[Add Visibility Rule to the Record List](https://help.salesforce.com/s/articleView?id=experience.add_visibility_rule_record_list_lwr.htm&release=264.0.0&type=5)**  
    Control when to show or hide a Record List component based on user context or custom logic to deliver a more tailored experience.