+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+ +Helper text
+ + + +-
+
-
+ +++ ++++
Overline
+Label
+Extra label
+Description
+ +++Label
+Extra label
+
+ -
+ +++ ++++
Overline
+Label
+Extra label
+Description
+
+
-
+
+
+
-
+
+
+
-
+
-
+ ++++++++++++++
Label
+Static item is a UI element that displays a unit of information.+
+ -
+ +++++++ ++Navigation item is a UI element that displays a unit of information and allows users to navigate between different pages or sections within a multi-page interface.+
+
+
+ `} />
+
+
+
+
+
+ Label
+- ` element.
+
+Some variants shouldn't be applied to this kind of item. Warning will be done about it in:
+- [Outlined](#outlined) variants
+
-
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+ The icon may be large using `.item-leading-large` (only if not [small item](#small-item)). If you need to use any of the status icon, you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon`.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+
+
+
+ Label
+
+ Images can be sized with `item-leading-large` (only if not [small item](#small-item)) or `item-leading-xlarge` (only if not [small item](#small-item)) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-leading-rounded`. All these classes can be combined as needed and placed on a parent element.
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+
+
+
+
+ Label
+
+ Videos can be sized with `item-trailing-large` (only if not item small) or `item-trailing-xlarge` (only if not item small) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element.
+
+
+
`} />
+
+
+
+
+
+
+
+
+
+
+ Label
+
+ To add a slot, `item-slot` must be combined with `.item-trailing-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} A slot can be rounded using `item-trailing-rounded`.
+
+
+
`} />
+
+
+
+##### Text
+
+There are four text elements that are meant to be used in the `.item-text-container`. They always appear in the following order:
+1. [Overline](#overline) using `.item-overline` (optional) (not in [small item](#sizes))
+2. [Label](#label) using `.item-label`, that can optionally be bold (using `.fw-bold`) (required)
+3. [Extra label](#extra-label) using `.item-extra-label` (optional) (not in [small item](#sizes))
+4. [Description](#description) using `.item-description` (optional)
+
+Optionally, a slot can be added at the end of the text container using `.item-slot` and/or in place of the label if it replaces it.
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+
+
+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+
+
+
+
+
+
+
+
+
+
+
+ Overline
+Label
Extra label
+Description
+
+
`} />
+
+##### Trailing container
+
+The trailing container using `.item-trailing-container`.
+
+Here is a list of the different assets that we support in the trailing container, along with their corresponding classes and notes.
+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+Slot
+
+
+ Text should use `.item-label` with either `.item-extra-label` (only if not item small), `.text-muted`, or `.fw-bold`.
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+ Label
+Extra label
+
+
+
+
+
+
+
+
+
+ Label
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+ Label
+
+
+ Label
+
+ All variants of [Badge]([[docsref:/components/badge#badge]]) and [Badge - count]([[docsref:/components/badge#badge---count]]) are allowed.
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+ 12errors
+
+
`} />
+
+
+
+
+
+
+
+ Label
+
+
+
+
+ All variants of [tags]([[docsref:/components/tag#tag]]) are allowed.
+
+
+
`} />
+
+
+
+
+
+
+
+ Label
+
+
+ Tag
+
+ The icon may be large using `.item-trailing-large` (only if not small item). If you need to use any of the status icon, you may use `.item-status-positive`, `.item-status-warning`, `.item-status-info` or `.item-status-negative` for color and icon in addition of `.item-icon`.
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
`} />
+
+
+
+
+
+
+
+ Label
+
+
+
+
+ Images can be sized with `item-trailing-large` (only if not item small) or `item-trailing-xlarge` (only if not item small) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element.
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
`} />
+
+
+
+
+
+
+
+ Label
+
+
+
+
+ Videos can be sized with `item-trailing-large` (only if not item small) or `item-trailing-xlarge` (only if not item small) and can use [ratio utilities]([[docsref:/utilities/aspect-ratio]]) and `.item-trailing-rounded`. All these classes can be combined as needed and placed on a parent element.
+
+
+
`} />
+
+
+
+
+
+
+
+ Label
+
+
+
+
+ To add a slot, `item-slot` must be combined with `.item-trailing-container`. Limited in size to `96px x 96px`. {/* TODO: replace value by token once added */} A slot can be rounded using `item-trailing-rounded`.
+
+
+
`} />
+
+
+
+##### Slot
+
+This component contains many slots that can be used to add custom content. The main slots are located in the leading container, the text container, and the trailing container. The slots are intended to be used for custom content that is not covered by the other elements of the component. We can add another slot outside of the main container as well.
+
+Here is a small resume of the slots that can be used in a static item:
+* [Leading container](#leading-container) using `.item-slot` (optional)
+* [Text container](#text) using `.item-slot` (optional)
+* [Trailing container](#trailing-container) using `.item-slot` (optional)
+* A slot outside of the main container, direct child of `.item` using `.item-slot` (optional)
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+ `} />
+
+#### Helper text
+
+Optionally, a helper text can be added below the main `.item` container using `.item-helper`.
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+ Label
+Helper text
+ `} /> + +#### Background + +By default, alone items have a background-color, while list items don't. This behavior can be modified by using `.item-no-bg` or `.item-bg` on the element `.item` or any ancestors up to the `.item-list` container if it exists. + +
+
+
+
+
+
+
+
+
+
+ Label
+-
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+
+ Label
+` as a parent container because we cannot use `` in an example.
+
+
+
+ Items in a list won't have rounded corners even using this class.
+
+
+
+
+
`} />
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+ `} />
+
+#### Skeleton
+
+
+
+
+
+
+
+
+
+
+
+ Label
+Extra label
+
+
+
+ Tag
+
+
+ `} />
+
+### Sizes
+
+By default every item comes with a default size. The size can be adapted using `.item-small` on the element `.item-wrapper` or any ancestors.
+
+{/* TODO: Which element to document in every paragraph ? */}
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
+
+ `} />
+
+#### Max width
+
+By default, static items will span the whole width of their parent container, to limit the width of the static item on wider parent container, add a `.component-max-width` to the `.item-wrapper` or `.item-list` container.
+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+
+
+ 1errors
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+