> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Card list and Card slider

|| Grid mode is in beta and available in selected accounts only.

A card row is a row in a grid scene whose columns are shown as cards. There are two kinds: a **Card list** shows the cards in a grid that wraps onto new lines, and a **Card slider** shows the cards side by side in a row that visitors scroll or swipe through.

## Card list and Card slider

Both kinds of card row hold a set of cards. Each card is a column with its own content, such as an image, a heading and a text.

* `Card list` — the cards wrap into a grid, for example three cards per line. On mobile, a card list shows one card per line.
* `Card slider` — the cards sit in one horizontal row. Visitors scroll or swipe to see the rest, optionally with arrows, dots or a scrollbar.

Use a Card list when all cards should be visible at once, such as an overview of services. Use a Card slider when you have many cards and little space, such as a set of testimonials.

## Adding a card row

You add a card row with a building block from `Basic layouts`:

1. Click `Add` in the left panel and open `Basic layouts`.
2. Drag one of these building blocks onto the page:
   * `Grid list` — adds a Card list
   * `Slider` — adds a Card slider

In the Design view you can also turn an existing row into a card row: select the row and choose `Card list` or `Card slider` as its layout type in the right panel.

For more on adding building blocks, see [Add elements and building blocks](https://help.maglr.com/en/article/add-elements-and-building-blocks-1oleumf/).

## Adding, removing and reordering cards

When you select a card row, a toolbar appears above it. To manage the cards:

* `Add item` — adds a new card.
* `Remove item` — removes the selected card.
* `Move item earlier` / `Move item later` — moves the selected card one place to the left or right.

The toolbar also shows which card is selected and how many cards there are.

![Selecting a card in a Card list, moving it one place later with Move item later and adding a card with Add item](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/11-01-move-and-add-card_p60r6m.gif =1000xauto)

## Moving between cards in a Card slider

In a Card slider, only some cards are visible in the editor at a time. To reach the others, use `Previous card` and `Next card` in the toolbar above the selected slider.

To copy a card in a Card slider, select it and click `Duplicate card` in the toolbar.

## Setting the number of cards per line in a Card list

The size of the cards in a Card list comes from its settings, not from dragging. To set it, select the card row and choose one of these in the toolbar above it or in the right panel:

* `Card columns` — a fixed number of cards per line.
* `Min card width` — a minimum width per card. The number of cards per line then follows the available width.

![Changing the number of cards per line in a selected Card list from 3 to 2: the cards wrap onto new lines](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/11-03-card-columns_1as3j86.gif =1000xauto)

Use `Min card width` when the number of cards per line should adapt to the screen width. `Card fit` then decides what happens when a line isn't full:

* `Auto-fill` — the cards keep their size and the rest of the line stays empty.
* `Auto-fit` — the cards stretch to fill the line.

`Row height` sets the height of the cards: `Auto` follows the content, `Fixed` uses a height you enter in pixels.

## Setting the card width in a Card slider

To set how wide the cards in a Card slider are:

1. Select the card slider.
2. In the right panel, under `Width`, choose `25%`, `50%`, `75%` or `100%` of the slider width, or `Custom` to enter a width in pixels.
3. Optionally, set the space between the cards under `Gap`.

![Changing the card width of a selected Card slider from 75% to 50%: the cards narrow and more of them show](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/11-04-card-width_1uyzf7h.gif =1000xauto)

## Choosing where a card stops in a Card slider

`Snap` decides where a card lines up when a visitor stops scrolling the slider:

* `Start` — the card lines up with the left edge of the slider.
* `Center` — the card lines up with the centre of the slider.

To set it, select the card slider and choose an option under `Snap` in the right panel.

## Adding navigation to a Card slider

A Card slider can show navigation to help visitors move through the cards. Arrows help visitors who use a mouse rather than swiping; dots and a scrollbar show where they are in the slider. To add navigation:

1. Select the card slider.
2. In the right panel, under `Navigation`, turn on one or more of these:
   * `Scrollbar` — a bar that shows the scroll position
   * `Arrows` — previous and next buttons
   * `Pagination` — dots that show which card is active
3. Optionally, open the settings of each one to change its look, such as its position, size and colours.

The arrows are ordinary buttons on the page: you can select them and style them like any other button.

![Selecting a Card slider and turning on Arrows under Navigation in the right panel: arrows appear on the slider](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/11-02-slider-arrows_1nj8qz7.gif =1000xauto)

## Card rows in the Build view

In the Build view, you add card rows from `Basic layouts` and manage the cards with the toolbar above the row, the same as in the Design view. The card row's settings, such as card columns, card width, gap, snap and navigation, are under `Placement` in the toolbar above the selected card row, instead of in the right panel. Turning an existing row into a card row is only possible in the Design view.

For what each view can do, see [Roles and views in the editor](https://help.maglr.com/en/article/roles-and-views-in-the-editor-13gasx2/).

## Frequently asked questions

### Why can't I resize a card by dragging?

The size of the cards in a card row comes from the row's settings, not from dragging. In a Card list, set `Card columns` or `Min card width`. In a Card slider, set `Width`. Select the card row to find these settings in the right panel.

### Why does my Card list show one card per line on mobile?

On mobile, a Card list shows one card per line, so each card has enough room on a small screen. On desktop, the number of cards per line follows the `Card columns` or `Min card width` setting.

### What is the difference between an item and a card?

There is no difference. The toolbar above a card row calls each card an item in some buttons, such as `Add item`, and a card in others, such as `Next card`.