📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.
An extension to List Context that enables users to create lists of info cards that can be editable via Site Editor
- Add this app as a theme dependency in the
manifest.json
file
"dependencies": {
"vtex.info-card-list": "0.x"
}
- Declare the app's main block
list-context.info-card-list
"list-context.info-card-list#demo": {
"children": [
"slider-layout#demo-infocards"
],
"props": {
"infoCards": [
{
...props
},
{
...props
}
]
}
},
- For this list to work, you must now declare the app who will consume the list context, for i.e
slider-layout
"slider-layout#demo-infocards": {
"props": {
"itemsPerPage": {
"desktop": 1,
"tablet": 1,
"phone": 1
},
"infinite": true
}
},
Prop name | Type | Description | Default value |
---|---|---|---|
infoCards |
array |
Array of objects declaring info cards |
null |
infoCards
array:
This array is composed of objects with the properties defined in Info Card
If you assign the prop blockClass
to an info-card, it will be assigned as a CSS HANDLE to a div
wrapper.
For i.e: If you give the first info-card the blockClass first-info-card
, a parent div will be rendered as such:
<div class="vtex-info-card-list-0-x-first-info-card">
This will give you the option to style each info-card individually
Thanks goes to these wonderful people:
This project follows the all-contributors specification. Contributions of any kind are welcome!