Card list and Card slider

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:
3. • 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.

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.

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.

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.

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:
3. • 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.

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.

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.

Updated on: 02/11/2026