Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Info Card
vtex.store-components
Version: 3.150.0
Latest version: 3.178.1

This page is about version 3.150.0 of the app, which is not the most recent version. The latest stable version is 3.178.1.

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

{"base64":"  ","img":{"width":3062,"height":1206,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2902789,"url":"https://user-images.githubusercontent.com/284515/70229574-4239a100-1735-11ea-9e30-00b286e03f7c.png"}}

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

  1. Add the info-card block in your Home page template. Then, declare it in the same file. For example:

_13
"info-card": {
_13
"props": {
_13
"id": "info-card-example",
_13
"isFullModeStyle": false,
_13
"textPosition": "left",
_13
"imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
_13
"headline": "Clearance Sale",
_13
"callToActionText": "DISCOVER",
_13
"callToActionUrl": "/sale/d",
_13
"blockClass": "info-card-example",
_13
"textAlignment": "center"
_13
}
_13
},

Prop nameTypeDescriptionDefault value
isFullModeStyleBooleanIf true, image provided will be used as a background image and text will be displayed over it.false
textPositionTextPositionEnumChoose 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 rendered.null
subheadStringText to be displayed underneath the headline. If not provided, it will not be rendered.null
textModeTextModeEnumChooses which text mode should be used to process the text from headline and subhead props."html"
callToActionModeCallToActionEnumSet Call to Action component mode."button"
callToActionTextStringText to be displayed inside the CTA component.""
callToActionUrlStringURL to be redirected when CTA component is clicked.""
callToActionLinkTargetLinkTargetEnumWhere to display the linked URL when CTA component is clicked."_self"
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 used.null
blockClassStringAdds an extra class name to ease styling.null
htmlIdStringAdds an ID to the container element.null
linkTargetLinkTargetEnumWhere to display the linked URL when info-card block is clicked."_self"
  • Possible values of TextPositionEnum:
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.
  • Possible values of TextModeEnum:
Enum nameEnum valueDescription
HTML'html'The InfoCard component will expect to receive HTML text for headline and subhead props.
Rich-Text'rich-text'The InfoCard component will expect to receive Markdown text for headline and subhead props, and will use the rich-text block to render both.
  • Possible values of LinkTargetEnum:

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

Enum nameEnum valueDescription
Self (default)'_self'Open the link in the current browsing context.
Blank'_blank'Open the link in a new tab, but users can configure browsers to open a new window instead.
Parent'_parent'Open the link in the parent browsing context of the current one. If no parent, behaves as _self.
Top'_top'Open the link in the topmost browsing context (the "highest" context that’s an ancestor of the current one). If no ancestors, behaves as _self.

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
infoCardImageLinkWrapper
infoCardContainer
infoCardTextContainer
infoCardHeadline
infoCardSubhead
infoCardCallActionContainer
infoCardCallActionText
infoCardImageContainer
infoCardImage
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps