Card Choices Interface Component

Please try this . you can modify it as per your requirement 

a!localVariables(
local!save,
local!data: todatasubset(
{
{ id: 1, name: "A" },
{ id: 2, name: "B" },
{ id: 3, name: "C" }
},
a!pagingInfo(1, - 1)
),
{
a!columnsLayout(
columns: a!forEach(
items: local!data,
expression: {
a!columnLayout(
contents: a!cardLayout(
contents: {
a!richTextDisplayField(
value: a!richTextItem(text: fv!item.name)
)
},
link: a!dynamicLink(value: fv!index, saveInto: local!save)
)
)
}
)
)
}
)

thank you for suggestion, but this will not work since it's putting all the cards in the same row 

Hi Anna

If I understood your concern correctly, you may try this suggestion.

In the a!cardChoiceField() set the data which you want to see in your first row and place them into a a!columnLayout() then to do the same for second set of data and so on as shown in the below figure. This way you can control how many items you want to show in a row and also their width. This is ideal to use when the data is not huge.

In my example the first set of data was {Apple,Mango,Banana} defined in the first ColumnsLayout
the second set of data {Dog,Cat} was defined in the second ColumnsLayout

Hope this helps.

Hi Anna

If I understood your concern correctly, you may try this suggestion.

In the a!cardChoiceField() set the data which you want to see in your first row and place them into a a!columnLayout() then to do the same for second set of data and so on as shown in the below figure. This way you can control how many items you want to show in a row and also their width. This is ideal to use when the data is not huge.

In my example the first set of data was {Apple,Mango,Banana} defined in the first ColumnsLayout
the second set of data {Dog,Cat} was defined in the second ColumnsLayout

Hope this helps.