Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Deprecated
Collection Badges

{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-collectionbadges-0.png"}}

Warning

The Collection Badges block has been deprecated. Despite this, support for it is still granted.

Collection Badges is a VTEX component that will render an image with the list of collection badges located at the bottom. This component can be imported and used by any VTEX app.

Usage

You should follow the usage instruction in the main README.

To import it into your code:


_10
import { CollectionBadges } from "vtex.store-components";

You can use it in your code like a React component with the JSX tag: <CollectionBadges>.


_10
<CollectionBadges collectionBadgesText={[ 'foo', 'bar' ]}>
_10
<img src="https://raw.githubusercontent.com/vtexdocs/dev-portal-content/main/docs/vtex-io/Store Framework Apps/deprecated/..." alt="...">
_10
</CollectionBadges>

Configuration

Prop nameTypeDescriptionDefault Values
collectionBadgesTextstring[]An array of collection badges text[]
childrenNodeChildren components that should be rendered inside the collection badge itemundefined

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
collectionContainer
item
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page