+
+ `} />
+
+### [[comp]] Navigation card item
+
+A navigation card item is an interactive, self-contained card UI element that takes users to one internal or external destination.
+Use it when navigational content requires stronger visual grouping or prominence than a standard [navigation list item](#navigation-list-item).
+
+The card may be displayed independently or within a card-based layout and may use a distinct background, outline or rounded corners. The entire card acts as a single navigation target and supports the required hover, focus and pressed states. Do not use a Navigation card item when the card must contain several destinations or independent interactive controls.
+
+Add a `.item-navigation` on the `.item-wrapper` level and an `.item-interactive` at the link level to create a navigation card item.
+
+Available variants can be found in the [common variants section](#common-variants) and [navigation items variants section](#navigation-items-variants).
+
+
+
+
+
+ Label
+
+
+ `} />
+
+Optionally, the `` element can wrap the entire `.item` instead of just the label.
+
+
+
+
+ Label
+
+
+
+
+ `} />
+
+## List items
+
+The list items are UI elements used inside structured lists. They are surrounded by `.item-list` added to the `
+
+ Label
+- ` element.
+
+Some variants shouldn't be applied to this kind of items. Warning will be done about it in:
+- [Outlined](#outlined) variants
+
-
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+ Label
+
+
+
+ `} />
+
+### External link
+
+Add `.item-external` to the `.item-navigation` to indicate that the item is an external link. This will add an external link icon to the end of the item.
+
+
+
+
+ Label
+
+
+
+ `} />
+
+## Common variants
+
+These variants can be used in all types of items.
+
+### With asset
+
+The main container `.item-main` of an item can contain up to 3 elements. They always appear in the following order:
+1. [Leading container](#leading-container) using `.item-leading-container` (optional)
+2. [Text container](#texts) using `.item-text-container` (required)
+3. [Trailing container](#trailing-container) using `.item-trailing-container` (optional)
+
+#### Leading container
+
+The leading container uses `.item-leading-container`.
+
+Here is a list of the different assets that we support in the leading container, along with their corresponding classes and notes.
+
+You can navigate through the different assets using the tabs below.
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+
+
+
+ Label
+
+
+ `} />
+
+
+
+ 
+
+
+
+ Label
+
+
+ `} />
+
+
+
+
+
+
+
+ Label
+
+
+ `} />
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+
+
+
+
+
+
+
+
+
+
+ Overline
+Label
+Extra label
+Description
+
+
+
+
+
+
+
+
+
+
+
+ Overline
+Label
Extra label
+Description
+
+
`} />
+
+#### Trailing container
+
+The trailing container uses `.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
+
+
+
+
+
+
+
+ Label
+
+
+ Label
+Extra label
+
+
+
+
+
+
+
+
+
+ Label
+
+
+ Label
+
+
`} />
+
+
+
+
+
+
+ Label
+
+
+ Label
+
+
+
+
+
+
+
+
+ Label
+
+
+ 12errors
+
+
`} />
+
+
+
+
+
+
+ Label
+
+
+
+
+
+ `} />
+
+
+
+
+ Label
+
+
+ Tag
+
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
`} />
+
+
+
+
+
+
+ Label
+
+
+
+
+
+ `} />
+
+
+
+
+ Label
+
+
+
+
+
+ `} />
+
+
+
+
+ Label
+
+
+
+
+
+ `} />
+
+
+
+
+ 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, [card items](#card-item) have a background-color, while [list items](#list-item) don't. This behavior can be modified by using `.item-no-bg` or `.item-bg` on the `.item-wrapper` or `.item-list` container. These modifiers only modify the no interaction background of the items. + +-
+
-
+ ++++++
Label
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
-
+ ++++++
Label
+
+
+
+
+
+
+
+
+ `} />
+
+
+
+
+ Label
+
+ ` as a parent container because we cannot use `` in an example.
+
+
+
+ Items in a [list](#list-item) won't have rounded corners even using this class.
+
+
+
+
+
`} />
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
-
+ ++++++
Label
+
+ -
+ ++++++
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 `.item-list`.
+
+
+
+
+
+
+
+ Label
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
-
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+
+
+
+ `} />
+
+### Max width
+
+By default, items will span the whole width of their parent container, to limit the width of the item on wider parent container, add a `.component-max-width` to the `.item-wrapper` or `.item-list` container.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Label
+-
+
-
+ ++++++
Label
+
+ -
+ ++++++
Label
+
+
-
+
-
+ ++++++
Label
+
+
+