Documentation
Feedback
Guides
VTEX IO Apps

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

The info-card component groups information on a single topic. It often includes text, an image, and a call-to-action button.

{"base64":"  ","img":{"width":3062,"height":1206,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":2902789,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-infocard-0.png"}}

Configuration

  1. Import the vtex.store-components app to your theme dependencies in the manifest.json file, as in the following example:

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

  1. Add the info-card block to the desired page template.
  2. Add the info-card block to the same template file using the props stated in the Props table. 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
},

Props

Prop nameTypeDescriptionDefault value
blockClassStringExtra class name for custom styling.null
callToActionLinkTargetLinkTargetEnumWhere to display the call-to-action component's linked URL, as the name for a browsing context (a tab, window, or iframe)."_self"
callToActionModeCallToActionEnumMode of the call-to-action component."button"
callToActionTextstringText displayed inside the call-to-action component.""
callToActionUrlstringURL of the call-to-action component.""
headlinestringHeadline of the Info Card.null
htmlIdstringID of the container element.null
imageUrlstringPath to the image used on desktop devices.""
imageActionUrlstringRedirect URL used when the image component is clicked.""
isFullModeStylebooleanStyle of the Info Card component. If true, the image component is used as the background, and text is displayed over it.false
linkTargetLinkTargetEnumWhere to display the linked URL when the Info Card component is clicked."_self"
mobileImageUrlstringPath to the image used on mobile devices. If empty, the desktop image is used.null
subheadstringText to be displayed underneath the headline. If not provided, it will not be rendered.null
textAlignmentTextAlignmentEnumText alignment inside the component: left, center or right. This prop is ignored if isFullModeStyle is true."left"
textModeTextModeEnumText mode 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 on the left. If isFullModeStyle is false, the 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 on the right. If isFullModeStyle is false, the image will be on the left.

CallToActionEnum possible values

Enum nameEnum valueDescription
NonenoneDoes not render any call-to-action components.
ButtonbuttonRenders the call-to-action component as a button.
LinklinkRenders the call-to-action component as a text in a link format.

LinkTargetEnum possible values

These values are the same ones supported by HTML5 anchor tags. For more information, please read the MDN documentation.

Enum nameEnum valueDescription
Self (default)_selfOpens the link in the current browsing context.
Blank_blankOpens the link in a new tab, but users can configure browsers to open a new window instead.
Parent_parentOpens the link in the parent browsing context of the current one. If there is no parent, it behaves as _self.
Top_topOpens the link in the topmost browsing context (the "highest" context that is an ancestor of the current one). If there is no ancestor, it behaves as _self.

TextModeEnum possible values

Enum nameEnum valueDescription
HTMLhtmlUses HTML text for headline and subhead props.
Rich Textrich-textUses markdown text and the rich-text block for headline and subhead props.

Customization

To apply CSS customizations to this and other blocks, please see the Using CSS handles for store customization guide.

CSS Handles
infoCardCallActionContainer
infoCardCallActionText
infoCardContainer
infoCardHeadline
infoCardImage
infoCardImageContainer
infoCardImageLinkWrapper
infoCardSubhead
infoCardTextContainer
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps