| **rich_text** | Formatted content with the rich text editor; supports bold, italic, links, lists, headings, and embedded [components](/docs/editor/components) |

import { Callout } from 'nextra/components'

To show multiple items on a single page (e.g., a blog listing), use a **Collection List** element. The collection list repeats its child layers for each item in the connected collection.

1. Add a **Collection** element to your page

2. Choose which collection to display

3. Design the layout for a single item — the design repeats for each item

4. Bind collection fields to elements inside the list

Control the display order of items:

- **None** — Default database order

- **Manual** — Custom order set by drag-and-drop in the CMS

- **Random** — Shuffled on each page load

- **By field** — Sort by any field (e.g., date, name, price) in ascending or descending order

Add filter conditions to show only items matching specific criteria. You can filter by any collection field using operators appropriate to the field type (text contains, number greater than, date is after, reference is one of, and more).

Filters use group-based logic: conditions within a group are combined with OR, and groups are combined with AND.

See [Filtering & Sorting](/docs/cms/filtering) for the full list of operators and examples.

For large collections, enable pagination to split items across pages:

- **Pages** mode shows previous/next navigation and page info

- **Load More** mode adds a button that appends the next batch

Set the items per page count to control batch size. Pagination respects filters — only matching items are counted.

Combine collection lists with filters, sorting, and pagination to build complete listing pages like blogs, product catalogs, team directories, and event calendars.

title: Filtering & Sorting

import { Callout } from 'nextra/components'

You can filter and sort collection items on your pages to build directories, listings, blogs, marketplaces, and other data-driven experiences. Filters reduce the dataset before items render, and sorting controls the display order.

Filters are configured on collection layers (Collection List elements). Each filter targets a collection field and applies a condition to include or exclude items.

1. Select a **Collection List** layer on the canvas

2. In the right panel, open the **Filters** section

3. Click **+** to add a filter condition

4. Choose a collection field to filter by

5. Select an operator and enter a value

Filtered items update immediately in the editor preview.

Available operators depend on the field type:

Text, rich text, email, phone, and color fields support:

| Operator | Description |

|----------|-------------|

| **is** | Exact match |

| **is not** | Does not match |

| **contains** | Value includes the text |

| **does not contain** | Value does not include the text |

| **is present** | Field has a value |

| **is empty** | Field has no value |

| Operator | Description |

|----------|-------------|

| **is** | Equals the number |

| **is not** | Does not equal the number |

| **less than** | Value is below the number |

| **less than or equal** | Value is at or below the number |

| **greater than** | Value is above the number |

| **greater than or equal** | Value is at or above the number |

| Operator | Description |

|----------|-------------|

| **is** | Matches the date |

| **is before** | Earlier than the date |

| **is after** | Later than the date |

| **is between** | Falls within a date range (requires two values) |

| **is empty** | No date set |

| **is not empty** | Has a date |

| Operator | Description |

|----------|-------------|

| **is** | True or false |

Reference and single-asset fields support:

| Operator | Description |

|----------|-------------|

| **is one of** | Matches any of the selected items |

| **is not one of** | Does not match any of the selected items |

| **exists** | Has a linked item |

| **does not exist** | No linked item |

When you use **is one of** or **is not one of**, a multi-select dropdown loads items from the referenced collection so you can pick values directly.

| Operator | Description |

|----------|-------------|

| **is one of** | Contains at least one of the selected items |

| **is not one of** | Contains none of the selected items |

| **contains all of** | Contains every selected item |

| **contains exactly** | Contains only the selected items, no more |

| **item count** | Number of linked items matches a comparison (equals, less than, greater than, etc.) |

| **has items** | At least one linked item |

| **has no items** | No linked items |

Filters use a group-based logic system:

- **Conditions within a group** use **OR** logic — an item passes if it matches any condition in the group

- **Groups** use **AND** logic — an item must pass all groups to appear

This lets you build expressive filters. For example, to show products that are "Electronics" or "Books" AND cost less than $50, create two groups: one with category conditions (OR) and one with a price condition.

To add an **OR** condition within a group, click the **+** button next to "Or" inside the group.

To add an **AND** group, click the **+** button at the top of the Filters panel.

Control the display order of collection items using the sort settings on the collection layer:

| Sort Option | Description |

|-------------|-------------|

| **None** | Default database order |

| **Manual** | Custom order set by drag-and-drop reordering in the CMS |

| **Random** | Randomized order on each page load |

| **Field** | Sort by any collection field in ascending or descending order |

When sorting by a field, you choose the field and the direction (ascending or descending). Common sort fields include date (newest first), name (alphabetical), or price (low to high).

When a collection has many items, enable pagination to split them across pages:

1. Select a Collection List layer

2. In the right panel, find **Pagination**

3. Enable pagination and choose a mode:

| Mode | Description |

|------|-------------|

| **Pages** | Traditional page navigation with previous/next buttons and page info |

| **Load More** | A button that appends the next batch of items |

Set the **items per page** count to control how many items appear at once. Pagination works with filters — only items that pass the filters are counted and paginated.

When pagination is enabled, Ycode generates pagination controls (previous/next buttons, page info text). You can style these controls through the pagination layer settings in the design panel.

<Callout type="info" title="Tip">

Combine filters, sorting, and pagination to build complete listing experiences. For example, a product directory with category filters, price sorting, and 12 items per page.

</Callout>

You can filter and sort collection items directly on your pages. Add conditions to Collection List layers to show only items that match specific criteria — by category, price, date, tags, reference fields, and more. Combine filters with sorting and pagination to build directories, listings, blogs, and marketplaces.

See [Filtering & Sorting](/docs/cms/filtering) for operators, filter logic, and pagination.

- [Filtering & Sorting](/docs/cms/filtering) — Filter, sort, and paginate collection items

import { Callout } from 'nextra/components'

Components support variables for content that varies per instance. You define variables when creating or editing the component, then link them to layers inside the component. Each instance can override these values without affecting the master or other instances.

| Type | Description |

|------|-------------|

| **Text** | Overridable text content, supports rich text formatting (bold, italic, links, inline CMS variables) |

| **Image** | Overridable image source |

| **Link** | Overridable link URL and settings |

| **Audio** | Overridable audio file source |

| **Video** | Overridable video file source |

| **Icon** | Overridable SVG icon |

After creating a variable, link it to a layer inside the component:

1. Enter component edit mode

2. Select the target layer (e.g., a text element, image, or button)

3. In the right panel, find the **Link to variable** option

4. Choose the variable to link

The linked layer displays the variable's default value. Each instance can then override that value.

Text variables support rich text content. When you override a text variable on an instance, you get the full rich text editor with formatting controls, inline CMS field references, and structured content. This is useful for components like cards, testimonials, or content blocks where the text needs formatting beyond plain strings.

When components are nested (a component instance inside another component), each level maintains its own overrides independently. The inner component's overrides are scoped to that instance within the parent component's layer tree.

You can insert component instances inside CMS rich text fields. This lets you create structured, reusable blocks within long-form content — callouts, embeds, feature highlights, pricing cards, and more.

When editing a rich text field in the CMS, use the component inserter to place a component instance inline with your content. The component renders with its full design and structure, and you can override its variables per insertion.

Components in rich text are ideal for content teams who need consistent design patterns inside blog posts, documentation, or marketing pages without touching the page editor.

- Use components for repeated patterns: headers, footers, cards, buttons, and navigation

- Define variables for any content that changes between instances

- Use rich text variables when instance content needs formatting

- Nest components to build complex, reusable structures (e.g., a card grid component containing card components)

- Use components in CMS rich text to maintain design consistency across dynamic content

When you add an input, textarea, select, checkbox, or radio element, Ycode wraps it in a group container with a label. The label uses the semantic `<label>` HTML tag with a `for` attribute that links it to the input, ensuring proper accessibility and allowing users to click the label to focus the field.

Forms can also be used in combination with [Collection Lists](/docs/cms/dynamic-pages#collection-lists) to create filtering and sorting experiences for your visitors. Connect form inputs to collection filters so users can search, filter by category, sort by price, and more — all without page reloads.

See [Filtering & Sorting](/docs/cms/filtering) for details on setting up collection filters.

- [Filtering & Sorting](/docs/cms/filtering) — Create dynamic filtering for collection lists