Info Card

Description

InfoCard is a VTEX component allows you to display content combining image and text. This Component can be imported and used by any VTEX app.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents

Usage

You should follow the usage instruction in the main README.

info-card is a block allowed in the store interface(https://github.com/vtex-apps/store).

You can use it by adding it to the blocks of your store sections, for example:

1
2
3
4
5
6
7
"store.home": {
    "blocks": [
      "info-card",
      "carousel#home",
      "shelf#home"
    ]
  },

Blocks API

When implementing this component as a block, various inner blocks may be available. For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the InfoCard's behavior and interface. However, you also can make in your theme app, as Store theme does.

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 desktop. 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

Here are the 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

Here are the 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

Here are the 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.

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

Below, we describe the namespace that are defined in the ProductPrice.

Class nameDescriptionComponent Source
infoCardContainerThe main container of InfoCardindex
infoCardTextContainerThe text containerindex
infoCardHeadlineThe headline labelindex
infoCardSubheadThe subhead labelindex
infoCardCallActionContainerThe Call to Action containerindex
infoCardImageContainerThe container of the image displayed on InfoCard (if isFullModeStyle is false)index
infoCardImageThe image displayed on InfoCard (if isFullModeStyle is false)index