The info-card block allows you to display content combining image and text in your store.

imageimage

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the info-card block in your Home page template.
  2. Then, add the info-card block in the same template file using the props stated in the Props table. 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"
    }
  },

Props

Prop nameTypeDescriptionDefault value
blockClassStringAdds an extra class name to ease styling.null
callToActionLinkTargetLinkTargetEnumWhere to display the linked URL when CTA component is clicked."_self"
callToActionModeCallToActionEnumSets Call to Action component mode."button"
callToActionTextStringText to be displayed inside the CTA component.""
callToActionUrlStringURL to be redirected when CTA component is clicked.""
headlineStringText to be used as headline. If not provided, it will not be rendered.null
htmlIdStringAdds an ID to the container element.null
imageUrlStringURL of the image to be used on desktop.""
isFullModeStyleBooleanIf true, the image provided is used as the background image and text is displayed over it.false
linkTargetLinkTargetEnumWhere to display the linked URL when info-card block is clicked."_self"
mobileImageUrlStringURL of the image to be used on mobile. If you do not provide any, the desktop image url will be used.null
subheadStringText to be displayed underneath the headline. If not provided, it will not be rendered.null
textAlignmentTextAlignmentEnumText alignment inside the component. Possible values are: left, center or right. This prop is ignored if isFullModeStyle is true."left"
textModeTextModeEnumChooses which text mode should be used to process the text from headline and subhead props."html"
textPositionTextPositionEnumPosition of the text component: left, center or right."left"

TextPositionEnum possible values

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

CallToActionEnum possible values

Enum nameEnum valueDescription
NonenoneDon't render any Call to Action component
ButtonbuttonCall to Action component will be a button
LinklinkCall to Action component will be a text in a link format

LinkTargetEnum possible values

These values are the same ones supported by HTML5 anchor tags. For more information check its documentation at MDN.

Enum nameEnum valueDescription
Self (default)_selfOpen the link in the current browsing context.
Blank_blankOpen the link in a new tab, but users can configure browsers to open a new window instead.
Parent_parentOpen the link in the parent browsing context of the current one. If no parent, behaves as _self.
Top_topOpen the link in the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.

TextModeEnum possible values

Enum nameEnum valueDescription
HTMLhtmlThe InfoCard component will expect to receive HTML text for headline and subhead props.
Rich-Textrich-textThe InfoCard component will expect to receive Markdown text for headline and subhead props, and will use the rich-text block to render both.

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
infoCardCallActionContainer
infoCardCallActionText
infoCardContainer
infoCardHeadline
infoCardImage
infoCardImageContainer
infoCardImageLinkWrapper
infoCardSubhead
infoCardTextContainer

Did this page help you?