Container

The Container app exports a simple container block that can be used to wrap other blocks.

1. Adding the app as a theme dependency in the manifest.json file;

  "dependencies": {
    "{vendor}.container": "0.x"
  }

1. Declaring the app's main block in a given theme template or inside another block from the theme.

Block name	Description
container	Just a container
container.list-render	A container that consumes list context and render the list

container and container.list-render props

Prop name	Type	Description	Default value
stopPropagation	boolean	Indicates if the event should stop propagating to parent elements	false
htmlId	string	The id to be assigned to the component's HTML element	-
renderIfNoChildren	boolean	Determines whether the component should be rendered even if it has no children	true
wrapper	boolean	Determines whether the component should be wrapped with a div element	false
containerElement	string	The HTML tag to be used as the component element	div
pixelEvent	object	An object containing information about a VTEX Pixel event to be triggered when the component is clicked	-
shouldRender	boolean	Determines whether the component should be rendered	true
htmlAttributes	object	An object containing additional HTML attributes to be added to the component element	-
customClasses	object	An object containing custom classes to be added to the component element	-
pageClass	boolean	Determines whether the blockClass should be prefixed with the current page's name	false
lazyRender	boolean	Whether to lazily render the component (i.e., render only when it becomes visible on the screen).	false
lazyImages	boolean	Whether to lazily render the images inside this container	false

The pixelEvent object

Prop name	Type	Description	Default value
customPixelEventId	string	Event ID responsible for triggering a block that listens to pixelEvent.	undefined
customPixelEventName	string	Event name responsible for triggering a block that listens to pixelEvent.	undefined

container.list-render props

Prop name	Type	Description	Default value
itemElement	string	HTML element used to render the items of the list (ex: div, li, etc)	Fragment
includeSeparators	boolean	Includes a div that can be used as a visual separator when set to true, remember that the rendered div does not have any default style	false

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](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

CSS Handles
container
listItem
wrapper
separator