Answersheet to 'Stack Layout'

{
  "store.home": {
    "blocks": ["stack-layout#cta"]
  },
  "stack-layout#cta": {
    "children": ["image#cta", "link#cta"]
  },
  "image#cta": {
    "props": {
      "blockClass": "cover",
      "width": "100%",
      "height": 400,
      "src": "https://appliancetheme.vtexassets.com/assets/app/src/appliancecat___1b7592b49667c6a89203a0997e06bc87.jpg"
    }
  },
  "link#cta": {
    "props": {
      "displayMode": "button",
      "buttonProps": {
        "variant": "primary",
        "size": "large"
      },
      "href": "/washer",
      "label": "Check these awesome discounts"
    }
  }
}
.stackItem {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.imageElement--cover {
  object-fit: cover;
}

Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue