The <ExpressiveList> component is meant to be used with the expressive-content-list-group className when grouped together. This component is only intended for paragraph content and not meant to nest other components within it. This can be used with a pictogram by importing a pictogram from our library and passing it into the pictogram prop as a node.

Example

Content only

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. Nullam ac tortor vitae purus faucibus ornare suspendisse sed.

Short Title

Using titleType=expressive-04 please check props section for more info on usage

Short Title

Using titleType=expressive-02 please check props section for more info on usage

Short Title

With pictograms

Short Title

Using titleType=expressive-04 please check props section for more info on usage

Short Title

Using titleType=expressive-02 please check props section for more info on usage

Short Title

Code

Content only

components/ExpressiveList/ExpressiveList.js
<div className="expressive-content-list-group">
  <ExpressiveList 
    title="Short Title"
    background="true">
  Lorem ipsum tempor incididunt ut labore et dolore magna aliqua. Quam lacus suspendisse faucibus interdum posuere lorem. At quis risus sed lorem ipsum vulputate.
  </ExpressiveList>

  <ExpressiveList 
    title="Short Title"
Copy to clipboard

With pictograms

components/ExpressiveList/ExpressiveList.js
import { Connect } from '@carbon/pictograms-react';

<div className="expressive-content-list-group">
  <ExpressiveList 
    title="Short Title"
    background="true"
    pictogram={<Connect className="my-custom-class" />}
    >
  Lorem ipsum tempor incididunt ut labore et dolore magna aliqua. Quam lacus suspendisse faucibus interdum posuere lorem. At quis risus sed lorem ipsum vulputate.
Copy to clipboard

Props

property	propType	description
children	string	Use to add the content. Takes in text content only
className	string	Use to declare custom class name. This will be added on the outmost div
picogram	node	Takes in a custom pictogram node from `carbon components` that is imported to the top of the page.
title	string	Prop used for a short title
titleType	string	Optional prop used for type options - default is `expressive-03`. Optional types are: `expressive-04` and `expressive-02`

Edit this page on GitHub

Components: DoDontRow

Components: ExpressiveListContainer