warning icon

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>

<ExpressiveListContainer title="Short Title">
Copy to clipboard

Props

property	propType	default	description
contentClassName	string		Optional prop for custom class names this will be applied to the right column.
children	node		This prop is used to insert the contents of the container right column
className	string		Optional prop to insert a custom class name. This class will be applied to the outermost conatiner
text	node		Optional prop to use to insert content text
title	string		Prop used for a short title
titleType	string	expressive-03	Optional prop used for type options - default is `expressive-03`. Options are: `expressive-04` and `expressive-02`

Edit this page on GitHub

Components: ExpressiveList

Components: FeatureCard