> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/building-pages/cards.md). # Card sections Use Card grid, Card carousel, and Tabbed card carousels to show products, collections, articles, or custom content. Card grid, Card carousel, and Tabbed card carousels accept the same card blocks. They render the blocks as a static grid, a horizontal carousel, or one carousel per tab. The section sets the column count, gap, width, and color scheme. Each block supplies its own cards, so product, article, and custom cards can share the same layout.
One card section holding product, custom, and article cards together

Product, custom, and article cards sharing the same width, gap, and radius.

## Blocks add cards A card section is a container plus a stack of card blocks. Each block adds its cards to the shared grid or carousel, in block order. | Block | Cards it adds | | --------------------------------------- | -------------------------------------------------------------------------- | | Product cards (`_cards-products`) | Every product in a collection, or a hand-picked product list | | Collection cards (`_cards-collections`) | One card per picked collection | | Article cards (`_cards-articles`) | A blog's articles, or hand-picked articles | | Custom card (`_card-custom`) | One card you compose from media and text | | Image tile (`_tile-image`) | One image or video tile with blocks placed over it | | Frame tile (`_tile-frame`) | One [Frame](/building-pages/layout-blocks.md#frame) sized to the card grid | A Product cards block with eight products adds eight cards. A Custom card adds one. Put a testimonial or promo between two Product cards blocks to break up a product list while keeping the same column alignment. Card order follows block order. An empty Product cards block shows placeholders in the theme editor. {% hint style="info" %} The static Section title is the section heading. It doesn't become a card or use a grid column. {% endhint %} ## Grid, carousel, or tabs All three sections use the same card blocks and column settings. Choose the section based on how shoppers should browse the cards. | | Card grid | Card carousel | Tabbed card carousels | | ------- | ------------------------------ | ----------------------------------- | ------------------------- | | Layout | Static grid, all cards visible | Horizontal carousel with arrows | One carousel per tab | | Use for | Browsing a full set at once | A long list in fixed vertical space | Several lists in one slot | | Mobile | Grid or carousel, your choice | Carousel | Carousel, per active tab | The Tabbed card carousels section accepts Tab blocks. Each Tab holds card blocks, so one tab can show products and another can show articles. All tabs share the column, color, and navigation settings. The tab strip is hidden when the section has only one Tab. ## Columns "Desktop" and "Tablet" set the column count per breakpoint. The grid allows 2–6 columns, the carousels 2–5. Mobile settings differ by section. Card grid uses "Mobile layout". "Carousel" adds swipe navigation and a progress bar. "Grid" uses 1 or 2 "Mobile columns". The two carousel sections use Theme settings › Cards › "Visible cards" instead (1–3.6, default 1.6). A fractional value leaves part of the next card visible as a swipe cue. ## Choose the card blocks ### Product cards "Source" selects a hand-picked, ordered "Product list" or every product in one "Collection". "Card limit" limits a collection to 1–20 cards (default 8). ### Collection cards Pick a list under "Collections". One card each. ### Article cards "Source" is either "Blog" (its articles, capped by "Card limit") or a hand-picked "Article" list. The Display group toggles what each card shows: "Show author", "Show tags", "Show date", "Show article excerpt", and "Show read more link". ### Custom card A Custom card adds one card with optional media and a "Link". Set "Type" to "Image" or "Video". Add blocks to "Over image" to layer them on the media. Add text blocks to "Below image" to render them under it. Leave "Below image" empty for a media-only card. The overlay still renders. ### Image tile and Frame tile Image tile adds a linked image or video with overlay blocks, borders, rounding, and parallax. Frame tile adds a [Frame](/building-pages/layout-blocks.md#frame) to the card grid. Use it for a text panel with no media. ## Aspect ratio Theme settings › Cards › "Photo aspect ratio" sets the store-wide card shape (width to height, default 0.9). Enable "Set aspect ratio" on a card block to use a different ratio for that block (0.5–3). Set a wide ratio on Article cards and keep the default portrait ratio on Product cards to mix both shapes in one section. ## Title, gap, and navigation "Title alignment" places the Section title. "Set vertical gap" shows the "Vertical gap" setting for card rows. Column gaps use the theme's grid spacing. The carousel sections add a Navigation group: "Set button style" opens "Style" ("Fill", "Stroke", "Soft", or "∅") for the arrow buttons, and "Progress bar" shows the scroll position on "Mobile", "Desktop", "Both", or "Never". Tabbed card carousels adds two controls: "Set tab spacing" opens a "Tab" gap for the strip, and "Set tab typography" opens font and size controls for the tab labels. ## Recipes ### Featured collection carousel Use a Card carousel with one Product cards block pointed at a collection: * Blocks: Section title, Product cards * Product cards › Source: "Collection" * Columns › Desktop: 4 * Navigation › Set button style: on * Navigation › Style: "Soft" ### Grid with an editorial break Use a Custom card between Product cards blocks to drop a quote into a product grid: * Blocks: Section title, Product cards, Custom card (rich text quote in "Below image"), Product cards * Columns › Desktop: 4 * Columns › Mobile layout: "Grid" ### Tabbed merchandising switcher Use Tabbed card carousels with one Tab per collection to switch lists in one slot: * Blocks: Section title, three Tab blocks ("Best Sellers", "Featured", "New"), each holding one Product cards block * Product cards › Source: "Collection" * Content layout › Set tab spacing: on ## See also * [Pair sections](/building-pages/pair.md): card grid, slider, and showcase blocks for a Pair column * [Layout blocks](/building-pages/layout-blocks.md): the Frame used by Frame tile * [Merchandising](/features/merchandising.md): product data shown on cards * [Color](/core-concepts/color.md): the color scheme applied by the section * [Product card architecture](/developer-platform/product-cards.md): how product cards render and update selections