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

Props

| property | propType | required | default | 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

expressive-03

. Optional types are:

expressive-04

and

expressive-02

Edit this page on GitHub

Components: DoDontRow

Components: ExpressiveListContainer