> For the complete documentation index, see [llms.txt](https://guides.noloco.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guides.noloco.io/views/display/cards.md). # Cards {% embed url="" %} The Cards layout displays records as a grid of card-shaped tiles that **wrap** to fill the page width. It's a visually rich choice for content that benefits from imagery — properties, products, team members, portfolio items — and pairs particularly well with a hero image field on each card.
{% hint style="info" %} The closely related [Columns](/views/display/columns.md) layout uses the same cards but lays them out horizontally with horizontal scroll inside each group, instead of wrapping. Pick Cards when you want the records to flow naturally across rows; pick Columns when you want fixed columns the user scrolls through. {% endhint %} ## Setting up a Cards view The Cards Editor sidebar is split into a **Setup** section for layout-specific options and a **Grouping** section. See [Grouping records](/views/display/grouping-records.md) for the shared grouping controls. ### Card size Choose how big each card renders: **S**, **M**, **L** or **XL**. Smaller sizes fit more cards per row; larger sizes give each card more room for fields and imagery. ### Field icons Toggle **Field icons** to show or hide the small field-type icons next to each field label on the card. Hide them (default) for a cleaner look, show them when users benefit from the visual cue. ### Style: Card vs Stacked The **Style** selector controls how cards relate to their group: * **Card** (default) — each record sits inside its own outlined card with a small gap between cards. * **Stacked** — the outline and shadow move from individual cards onto the group itself, and the cards inside the group sit flush against each other with no gap. Useful for a denser, more list-like presentation while keeping the card structure. ### Setting a hero image Pick an image field to act as the hero image at the top of each card. Hero images are the single biggest reason to use the Cards layout — they give each record a strong visual anchor without needing to open the record. ### Field display and links For each field shown on the card you can choose how it renders (badge, plain text, etc.). URL fields can be configured to open in a new tab. ### Record limit and pagination In Setup you also choose how records load and how users navigate beyond that limit: * **On scroll** — auto-loads more records as the user scrolls. * **Load button** — shows a "Load more" button with a loading state. * **Pagination** — paginates the view, either with **Arrows** in the action bar or **Numbered** pages. The action bar shows the record count (e.g. "Showing 25 of 240", or "25 of 240 results" when the view is filtered). ### Grouping In the Grouping section, pick the field that groups records into lanes and choose: * **Style: Colored** (default) **or Neutral** — controls whether group headers pick up the badge colour of the grouping option. See [Grouping records → Group Style](/views/display/grouping-records.md#group-style-colored-vs-neutral). * **Multi-level grouping** — up to 3 nested levels. * Per-group **expand/collapse** default and **Show empty groups**. ## Using a Cards view ### Scrolling and behaviour * **Vertical scroll** through the page; group headers stick to the top of the view as users scroll past, with a thin shadow once the header becomes sticky. * **No horizontal scroll** inside groups — cards wrap to fit the available width. * Click a group's header or chevron icon to collapse or expand it. ### Hover and inline editing Hovering a card surfaces inline-editable fields. If a specific field is configured as inline-editable, hovering it overrides the card's general hover state so the user can edit in place. ### Buttons and actions You can add the following to each card: * **Navigation buttons** — link to internal pages or external URLs. * [**Record action buttons**](https://guides.noloco.io/actions/action-buttons) — trigger actions or [workflows](https://guides.noloco.io/workflows/workflows#triggers) directly from the card. * [**Record colors**](https://guides.noloco.io/views/display/record-colors) — apply conditional colours to highlight status, priority or category. ## Empty and special states * **No value in the grouping field** — records appear in a neutral group with no colour applied. * **Empty group** — when **Show empty groups** is on, an empty group shows a single "No items" card and collapses by default. * **No matching records** — filtered views with no results show a general empty-state message. ## Troubleshooting **Cards are too wide or too narrow.** The Card size setting controls the width. Pick S, M, L or XL until the layout fits. **Borders aren't showing on cards.** Style may be set to **Stacked** — in that mode the outline lives on the group, not each card. Switch to **Card** style to outline every card individually. **Records aren't appearing in the expected order.** Check the Sort settings — sorting is configured separately from the Cards layout itself. **Some records aren't showing up.** You may have a record limit applied. Check the Loading more records setting in Setup and either raise the limit or switch the load behaviour to On scroll. **A Navigation button doesn't work.** Re-check the URL or page link configured on the button. **Record colors aren't applying correctly.** The colour rules need to match the field values exactly — e.g. "Status = Completed" must equal the field value, including case. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://guides.noloco.io/views/display/cards.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.