ExpressiveList
The
<ExpressiveList>
expressive-content-list-group
pictogram
Example
Content onlyShort 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
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
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.
Using
titleType=expressive-04
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.
Using
titleType=expressive-02
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
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
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
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.
Using
titleType=expressive-04
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.
Using
titleType=expressive-02
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.
Code
Content onlyWith pictograms<div className="expressive-content-list-group"><ExpressiveListtitle="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><ExpressiveListtitle="Short Title"
import { Connect } from '@carbon/pictograms-react';<div className="expressive-content-list-group"><ExpressiveListtitle="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.
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
| ||
title | string | Prop used for a short title | ||
titleType | string | Optional prop used for type options - default is
|