Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Store Components
Info Card

The info-card component groups information related to a single topic. They often include some 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's dependencies in the manifest.json file, as in the following example:
"dependencies": { "vtex.store-components": "3.x" }
  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:
"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
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 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
NonenoneDoesn't render any call-to-action component.
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, refer to 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 no parent, behaves as _self.
Top_topOpens 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
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 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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Image
« Previous
Logo
Next »
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page