Skip to main contentGatsby theme Carbon

ExpressiveListContainer

The <ExpressiveListContainer> component can be used as a customizable component.

Disclaimer: Nested grid support will be supported in v11. Currently this component requires custom styles to nest most of the gatsby components into the container.

Example

Short Title

Lorem ipsum tempor incididunt ut labore et dolore magna aliqua. Quam lacus suspendisse faucibus interdum posuere lorem. At quis risus sed lorem ipsum vulputate. Orci ac auctor augue mauris augue neque.

Caption title

Caption

Short Title

Code

Content only
components/ExpressiveListContainer/ExpressiveListContainer.js
<ExpressiveListContainer
title="Short Title"
text="Lorem ipsum tempor incididunt ut labore et dolore magna aliqua. Quam lacus suspendisse faucibus interdum posuere lorem. At quis risus sed lorem ipsum vulputate. Orci ac auctor augue mauris augue neque."
>
<DoDontExample type="do" caption="Caption" captionTitle="Caption title">
<Video vimeoId="310583077" />
</DoDontExample>
</ExpressiveListContainer>

Props

propertypropTyperequireddefaultdescription
contentClassNamestringOptional prop for custom class names this will be applied to the right column.
childrennodeThis prop is used to insert the contents of the container right column
classNamestringOptional prop to insert a custom class name. This class will be applied to the outermost conatiner
textnodeOptional prop to use to insert content text
titlestringProp used for a short title
titleTypestringexpressive-03Optional prop used for type options - default is expressive-03. Options are: expressive-04 and expressive-02