/itgloberspartnercl-custom-grid

Custom five card grid

Primary LanguageTypeScript

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

CUSTOM GRID

All Contributors

This component displays five cards and allows them to be arranged in four diferent ways in desktop and six different ways in mobile.

image

image

Layout Order

Desktop

Grid 1

image

Grid 2

image

Grid 3

image

Grid 4

image

Mobile

image

image

Configuration

In order to use this component you must:

  1. Add the dependency "itgloberspartnercl.grid-custom": "0.x" to manifest.json;
  2. Declare the block cards-grid.
  3. Declare the card-item blocks as children (or other type of blocks when onlyCardItemsAllowed is set to false)

Only up to five cards cards can be used, if there are more than five children it will render the first five.

cards-grid props

 "cards-grid": 
  {

    "title": "Custom Card Grid",
    
    "children":[
        "card-item#one",
        "card-item#two",
        "card-item#three",
        "card-item#four",
        "card-item#five"
        ],  
        
    "props": {
        "gridTypeMobile": 2,
        "gridTypeDesktop": 2,
        "onlyCardItemsAllowed": false
    }
}
Prop name Type Description Default value
GridTypeDesktop number number of the grid type for desktop (see images above) 3
GridTypeMobile number number of the grid type for mobile (see images above) 1
onlyCardItemsAllowed boolean When false allows other type of blocks (rich-text, images, infocards, etc) as children. When true only card-item blocks will render true

card-item props

"card-item#one": {
    "title": "Card One",
    "props":{
        "src": "assets/custom-grid/fridges.jpeg",
        "title": "Fridges",
        "description": "Get the best fridges on the market",
        "callToAction": "/electrodomesticos/neveras",
        "buttonText": "shop fridges",
        "nameClass" : "one"
    }
}
Prop name Type Description Default value
src string path to the image XXXXXX
title stringr card title XXXXXX
description string brief explanation of the card XXXXXX
nameClass string css styling classname XXXXXX
callToAction string redirect url XXXXXX
buttonText string call to action button text XXXXXX

Customization

Custom css style must be done in the file itgloberspartnercl.grid-custom.css

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

CSS Handles
image (image__{nameClass})
title (title__{nameClass})
description (description__{nameClass})
callToAction (callToAction__{nameClass})
main__container (main__container__{nameClass})
button (button__{nameClass})

Contributors ✨

Thanks goes to these wonderful people:

This project follows the all-contributors specification. Contributions of any kind are welcome!

Check out some documentation models that are already live: