# Collection card

<figure><img src="https://3723856256-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGnixyIfIYFWroNtVmZo6%2Fuploads%2Fgit-blob-8fb8b5a9973fb2c4f6b7f29e45a36ed5f0714256%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Overview

A flexible collection card block for displaying a single collection and its associated content blocks. This block is designed to be used within grid or slider layouts and supports a wide range of content types, including rich text, images, videos, icons, and collection-specific information. The block offers extensive customization options for spacing, color scheme, border style, layout, and responsive visibility, making it suitable for various merchandising and design needs.

## Common use cases

* Use within grid or slider sections to create collection galleries or featured collection displays
* Configure the content blocks to highlight key collection information, such as title, description, and featured image
* Adjust spacing and color settings to match your theme's design language and improve visual hierarchy
* Use the visibility settings to tailor the collection card display for different devices and layouts
* Leverage scroll animations to add engaging motion effects to collection cards

## Compatible blocks

The following blocks can be nested within this block:

* App blocks
* [Rich text](https://help.brickspacelab.com/slab/content/blocks/basics/rich-text)
* [Image](https://help.brickspacelab.com/slab/content/blocks/basics/image)
* [Icon](https://help.brickspacelab.com/slab/content/blocks/basics/icon)
* [Divider](https://help.brickspacelab.com/slab/content/blocks/layout/divider)
* [Tags](https://help.brickspacelab.com/slab/content/blocks/navigation/tags)
* [Container](https://help.brickspacelab.com/slab/content/blocks/layout/container)
* [Button](https://help.brickspacelab.com/slab/content/blocks/basics/button)
* [Video](https://help.brickspacelab.com/slab/content/blocks/basics/video)
* [Slider](https://help.brickspacelab.com/slab/content/blocks/layout/slider)
* [Grid](https://help.brickspacelab.com/slab/content/blocks/layout/default-grid)
* [Flex](https://help.brickspacelab.com/slab/content/blocks/layout/flex-grid)

## Block settings

### General

| Setting                | Description                                              | Options                   |
| ---------------------- | -------------------------------------------------------- | ------------------------- |
| Show advanced settings | Reveals visibility, load animation, and scroll animation | Checkbox (default: false) |

### Content

| Setting    | Description                      | Options           |
| ---------- | -------------------------------- | ----------------- |
| Collection | Select the collection to display | Collection picker |

### Spacing

| Setting                   | Description                                        | Options                                                                      |
| ------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------- |
| Enable horizontal padding | Adds horizontal padding around the collection card | Checkbox (default: false)                                                    |
| Enable vertical padding   | Adds vertical padding around the collection card   | Checkbox (default: false)                                                    |
| Gap size                  | Spacing between content blocks within the card     | <p>• None<br>• Default (default)<br>• XS<br>• SM<br>• MD<br>• LG<br>• XL</p> |

### Color

| Setting      | Description                             | Options                                                                                                                                                                                    |
| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme | Controls the background and text colors | <p>• Body (default)<br>• Neutral<br>• Accent 1<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent</p> |
| Color border | Controls the border color               | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None</p>                                                                                        |

### Style

| Setting                 | Description                                              | Options                                                                                                            |
| ----------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position         | Controls where borders appear                            | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |
| Show underline on hover | Displays an underline effect when hovering over the card | Checkbox (default: false)                                                                                          |

### Display

| Setting          | Description                                      | Options                                                                                                                                                                                                                                          |
| ---------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Visibility       | Controls when the block is visible               | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p>                                                                                                               |
| Load animation   | Animation when the block first loads             | <p>• None (default)<br>• Fade<br>• Fade up<br>• Offset fade<br>• Offset fade up</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Scroll animation</strong> is <strong>None</strong></p>                      |
| Scroll animation | Animation effect when the card scrolls into view | <p>• None (default)<br>• Fade<br>• Slide up<br>• Slide down<br>• Slide left<br>• Slide right<br>• Zoom</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on and <strong>Load animation</strong> is <strong>None</strong></p> |