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

<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"
    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"
    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>
</div>
Copy to clipboard

With pictograms

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.
  </ExpressiveList>

  <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.
  </ExpressiveList>
    
  <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.
  </ExpressiveList>
</div>
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