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

Info Card

The infoCard block allows you to display content combining image and text in your store.

image

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the info-card block in your Home page template. Then, declare it in the same file. For example:
  "info-card": {
    "props": {
      "id": "info-card-example",
      "isFullModeStyle": false,
      "textPosition": "left",
      "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
      "headline": "Clearance Sale",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-example",
      "textAlignment": "center"
    }
  },
Prop nameTypeDescriptionDefault value
isFullModeStyleBooleanIf true, image provided will be used as a background image and text will be displayed over itfalse
textPositionTextPostionEnumChoose in which position of the component text will be displayed, left, center or right"left"
textAlignmentTextAlignmentEnumControl the text alignment inside component. This prop is ignored if isFullModeStyle is true"left"
headlineStringText to be used as headline. If not provided, it will not be renderednull
subheadStringText to be displayed underneath the headline. If not provided, it will not be renderednull
callToActionModeCallToActionEnumSet Call to Action component mode"button"
callToActionTextStringText to be displayed inside the CTA component""
callToActionUrlStringURL to be redirected when CTA component is clicked""
imageUrlStringURL of the image to be used on desktop""
mobileImageUrlStringURL of the image to be used on mobile. If you do not provide any, the desktop image url will be usednull
blockClassStringAdds an extra class name to ease stylingnull
htmlIdStringAdds an ID to the container elementnull
  • Possible values of TextPostionEnum:
Enum nameEnum valueDescription
Left'left'Text will be to the left. If isFullModeStyle is false, image will be on the right
Center'center'Text will be in the center. Not applicable if isFullModeStyle is false.
Right'right'Text will be to the right. If isFullModeStyle is false, image will be on the left
  • Possible values of CallToActionEnum:
Enum nameEnum valueDescription
None'none'Don't render any Call to Action component
Button'button'Call to Action component will be a button
Link'link'Call to Action component will be a text in a link format
  • Possible values of TextAlignmentEnum:
Enum nameEnum valueDescription
Left'left'Text alignment will be to the left.
Center'center'Text alignment will be to the center.
Right'right'Text alignment will be to the right.

Customization

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.

CSS Handles
infoCardContainer
infoCardTextContainer
infoCardHeadline
infoCardSubhead
infoCardCallActionContainer
infoCardCallActionText
infoCardImageContainer
infoCardImage