About ContentContainer

The contentContainer component is used in an end named child to place ancillary information on a page in a area with a colored background and a border. You can set the width of the content container in pixels or as a percentage of the element the container is in.

ContentContainer with header and icon

You can set optional headers and icons in content containers by using the text and icon attributes. If you set a header but not an icon, the container content is lined up with the start of the header. If an icon is set, the icon will appear to the left of the header, but the content will still be lined up with the start of the header. If an icon is set but not a header, the icon will still be displayed on the left but no header text will be visible.

Use the background attribute to specify the background of the content container to "light", "medium", "dark", or "transparent". The default is "light" if no background is set. The border around the container and the header line are also set to the background color.

Indexed children in a content container are the actual contents that display in the container. A content container component can have multiple indexed children, which display consecutively in a vertical fashion. Generally, however, a content container will have only one indexed child, e.g., a styledList component. The children of the indexed child (e.g., styledItem components) become the actual contents that display in the container.