Items

Items are flexible and powerful components for displaying content.

Overview

Our items are the equivalent of design List item

Component types

Label
Static card item is a UI element that displays a unit of information.
Label
Navigation card item is a UI element that displays a unit of information and allows users to navigate.
- Label
- Label
Static list item is a UI element that displays a list of information.
- Label
- Label
Navigation list item is a UI element that displays a list of information and allows users to navigate.

For each types of items, OUDS Web has a common base .item-container, and .item-content classes that set up default styles such as padding and content alignment. The .item-container class is intended to be used in conjunction with our item variants, or to serve as a basis for your own custom styles. The most basic item is the .item-navigation variant.

Approach

There are 2 main categories inside the items group of components:

Card items are single items that can be used as standalone components.
List items are designed to be used within a list, allowing multiple items to be displayed together.

Inside these categories, there are 2 sub-categories:

Static items, which are not interactive.
Navigation items, which allow navigation.

The following table summarizes the different types of items and their categories.

Categories	Card	List
Static	Static card item	Static list item
Navigation	Navigation card item	Navigation list item

The basic structure includes:

.item as the external container, which is used to add additional styles or behavior.
.item-container as the container before the divider.
.item-content as the main container for the primary content of the item.
.item-text-container as the container for the text content of the item.
.item-interactive as the class for interactive elements within the item, such as links or buttons. It's mandatory on the link for the navigation item.

Accessibility

In case of an important navigation of the page, a wrapping <nav aria-label=""> element can be added around the navigation items.

In case of a complex navigation item, you probably should link all the texts and components together by adding [aria-labelledby] on the link in order to provide a valid accessible name for the link. The [aria-labelledby] should point to the ids of the elements that contain the texts labelling the link.

In case there is no interactive element inside, you may want to wrap the entire .item-container in an <a> element.

    <div class="item item-navigation">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-overline" id="accessible-item-overline">Overline</p>
        <a href="#" class="item-label item-interactive" id="accessible-item-label" aria-labelledby="accessible-item-overline accessible-item-label accessible-item-extra-label accessible-item-description">Label</a>
        <p class="item-extra-label" id="accessible-item-extra-label">Extra label</p>
        <p class="item-description" id="accessible-item-description">Description</p>
      </div>
    </div>
  </div>
</div>
  

html

Make sure that every text is wrapped inside a semantic element, adapted to its context of use such as <p> or <h*>.

Card items

Card item is a UI element that displays a unit of information either in an interactive or non-interactive card, within a card layout or independently.

Static card item

Static card item is a UI element that displays a unit of information in a non-interactive, self-contained card, that does not navigate, trigger actions or have interactive states.

The static card item may be displayed independently or within a card-based layout. It can include supporting text, leading or trailing content, and status information.

When additional navigation is required, consider using a navigation card item instead.

All the available variants can be found in the common variants section.

Label

    
<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>
  

html

Navigation card item is a UI element that displays a unit of information in an interactive, self-contained card, taking users to an internal or external destination.

The navigation card item is used when the content requires stronger visual grouping or prominence than a standard navigation list item. It may be displayed independently or within a card-based layout. Each card acts as a single navigation target and supports the necessary hover, pressed, and keyboard focus states.

Add an .item-navigation on the .item 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 and navigation items variants section.

    <div class="item item-navigation">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Label</a>
      </div>
    </div>
  </div>
</div>
  

html

List items

List item is a UI element that displays a unit of information either in an interactive or non-interactive row, within a structured list.

It is surrounded by .item-list added to the <ul> element.

Some variants shouldn't be applied to this kind of items. Warning will be done about it in:

Outlined variants

Rounded variant

Static list item

Static list item is a UI element that displays a unit of information in a non-interactive horizontal row within a structured list, and does not navigate, trigger actions, or have interactive states.

The static list item allows quick scanning and comparison of related items. It can include supporting text, leading or trailing content, and status information.

All the available variants can be found in the common variants section.

Label
Label

    <ul class="item-list">
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
</ul>
  

html

Navigation list item is a UI element that displays a unit of information in an interactive horizontal row within a structured list, taking users to an internal or external destination.

The navigation item list allows quick scanning and access to related destinations. Each item acts as a single navigation target and supports the necessary hover, pressed, and keyboard focus states.

Add an .item-navigation on the .item level and an .item-interactive at the link level.

Available variants can be found in the common variants section and navigation items variants section.

Label
Label

    <ul class="item-list">
  <li class="item item-navigation">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <a href="#" class="item-label item-interactive">Label</a>
        </div>
      </div>
    </div>
  </li>
  <li class="item item-navigation">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <a href="#" class="item-label item-interactive">Label</a>
        </div>
      </div>
    </div>
  </li>
</ul>
  

html

Common variants

These variants can be used in all types of items.

With asset

The main container .item-content of an item can contain up to 3 elements. They always appear in the following order:

Leading container (optional) using .item-leading-container
Text container (required) using .item-text-container
Trailing container (optional) using .item-trailing-container

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.

Small item

Please note that the sizes below shouldn't be used in a small item, only the assets without sizing class should be used in small items. The slot shouldn't be used as well in this size.

Icon

Icons can be sized with item-leading-large (only if not small item).

For status icons, add .item-icon with one of these classes: .item-status-positive, .item-status-warning, .item-status-info, or .item-status-negative.

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-leading-container item-leading-large">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-leading-container">
        <div class="item-icon item-status-positive"></div>
      </div>
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>
  

html

Image

Images can be sized with item-leading-large (only if not small item) or item-leading-xlarge (only if not small item).

Ratio utilities may also be used along with .item-leading-rounded.

All these classes can be combined as needed and placed on .item-leading-container.

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-leading-container item-leading-xlarge item-leading-rounded ratio-16x9">
        <img alt="" src="https://placecats.com/500/500" class="w-100 h-100 object-fit-cover" />
      </div>
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>
  

html

Slot

Small item

The slot shouldn't be used in a small item.

To add a slot, item-slot must be combined with .item-leading-container. Its size is limited to 6rem (96px) x 6rem (96px). A slot can be rounded using item-leading-rounded.

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-leading-container item-slot">
        <button class="btn btn-strong">Slot</button>
      </div>
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>
  

html

Text container

There are 4 text elements that are meant to be used in the .item-text-container.

They always appear in the following order:

Overline (optional) using .item-overline (only if not small item)
Label (required) using .item-label, that can optionally be bold (using .fw-bold)
Extra label (optional) using .item-extra-label (only if not small item)
Description using (optional) .item-description

Optionally, a slot can be added at the end of the text container using .item-slot and/or in place of the .item-label if it replaces it.

Note

Please note that you might want to apply one of our color utility to the text elements (except the .item-label), to match the badge for example. Be sure not to convey information only through color.

Overline

Label

Extra label

Description

Overline

Label

Extra label

Description

Overline

Slot - Label

Extra label

Description

Overline

Label

Extra label

Description

Slot

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-overline">Overline</p>
        <p class="item-label">Label</p>
        <p class="item-extra-label">Extra label</p>
        <p class="item-description">Description</p>
      </div>
    </div>
  </div>
</div>

<!-- Label bold -->
<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-overline">Overline</p>
        <p class="item-label fw-bold">Label</p>
        <p class="item-extra-label">Extra label</p>
        <p class="item-description">Description</p>
      </div>
    </div>
  </div>
</div>

<!-- Slot instead of label -->
<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-overline">Overline</p>
        <div class="item-slot"><p class="tag">Slot - Label</p></div>
        <p class="item-extra-label">Extra label</p>
        <p class="item-description">Description</p>
      </div>
    </div>
  </div>
</div>

<!-- Additional slot at the end of the text container -->
<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-overline">Overline</p>
        <p class="item-label fw-bold">Label</p>
        <p class="item-extra-label">Extra label</p>
        <p class="item-description">Description</p>
        <div class="item-slot"><p class="tag">Slot</p></div>
      </div>
    </div>
  </div>
</div>
  

html

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.

You can navigate through the different assets using the tabs below.

Small item

Please note that the sizes below shouldn't be used in a small item. The slot shouldn't be used as well in this size.

Text

Text should use .item-label. Optionally you can use it with either .item-extra-label (only if not small item), .text-muted, or .fw-bold.

Label

Extra label

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <p class="item-label">Label</p>
        <p class="item-extra-label">Extra label</p>
      </div>
    </div>
  </div>
</div>

<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <p class="item-label fw-bold">Label</p>
      </div>
    </div>
  </div>
</div>

<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <p class="item-label text-muted">Label</p>
      </div>
    </div>
  </div>
</div>
  

html

Badge

All variants of Badge and Badge - count are allowed.

Label

12errors

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <p class="badge badge-count">12<span class="visually-hidden">errors</span></p>
      </div>
    </div>
  </div>
</div>

<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <span class="badge badge-large"></span>
      </div>
    </div>
  </div>
</div>
  

html

Tag

All variants of tags are allowed.

Label

Tag

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <p class="tag">Tag</p>
      </div>
    </div>
  </div>
</div>
  

html

Icon

Icons can be sized with item-trailing-large (only if not small item).

For status icons, add .item-icon with one of these classes: .item-status-positive, .item-status-warning, .item-status-info, or .item-status-negative.

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container item-trailing-large">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
    </div>
  </div>
</div>

<div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container">
        <div class="item-icon item-status-warning"></div>
      </div>
    </div>
  </div>
</div>
  

html

Image

Images can be sized with item-trailing-large (only if not small item) or item-trailing-xlarge (only if not small item).

Ratio utilities may also be used along with .item-trailing-rounded.

All these classes can be combined as needed and placed on .item-trailing-container.

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container item-trailing-xlarge ratio-16x9 item-trailing-rounded">
        <img alt="" src="https://placecats.com/500/500" class="w-100 h-100 object-fit-cover" />
      </div>
    </div>
  </div>
</div>
  

html

Slot

To add a slot, item-slot must be combined with .item-trailing-container.

Its size is limited to 6rem (96px) x 6rem (96px). A slot can be rounded using item-trailing-rounded.

Label

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container item-slot">
        <button class="btn btn-strong">Slot</button>
      </div>
    </div>
  </div>
</div>
  

html

Slots

All the slots are optional, but if one is used, it should be indicated via .item-slot on the slot container.

This component can contain 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 .item-content container as well.

Small item

The slots shouldn't be used in a small item.

Here is a small summary of the slots that can be used in an item:

Leading container using .item-slot
Text container using .item-slot
Trailing container using .item-slot
A slot outside of the .item-content container, direct child of .item-container using .item-slot

Optionally, if the item is a navigation item and a slot is mandatory and also interactive, you can add .item-slot-focusable to the slot or the interactive element. Please note that the slot won't be rounded anymore.

Label

Alert message

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
    <div class="item-slot">
      <div class="alert alert-message alert-negative">
        <div class="alert-icon"><p class="visually-hidden">Negative alert</p></div>
        <div class="alert-container">
          <div class="alert-text-container">
            <h3 class="alert-label">Alert message</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  

html

Helper text

Optionally, a helper text can be added below the main .item-container container using .item-helper.

Note

If the item is a navigation item, the helper text should be referenced with [aria-describedby] on the interactive element.

Label

Helper text

    <div class="item">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
  <p class="item-helper">Helper text</p>
</div>

<div class="item item-navigation">
  <a href="#" class="item-container item-interactive" aria-describedby="item-helper-1">
    <div class="item-content">
      <div class="item-text-container">
        <span class="item-label">Label</span>
      </div>
    </div>
  </a>
  <p class="item-helper" id="item-helper-1">Helper text</p>
</div>
  

html

Background

By default, card 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 .item or .item-list container. These modifiers only modify the no interaction background of the items.

Label
Label

    <!-- Card -->
<div class="item item-navigation item-no-bg">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Label</a>
      </div>
    </div>
  </div>
</div>

<!-- List -->
<ul class="item-list item-bg">
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item item-navigation">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <a href="#" class="item-label item-interactive">Label</a>
        </div>
      </div>
    </div>
  </li>
</ul>
  

html

Divider

You can remove the divider by using .item-no-divider on the .item or .item-list.

Label

Label
Label

    <!-- Card -->
<div class="item item-no-divider">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

<!-- List -->
<ul class="item-list item-no-divider">
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item item-navigation">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <a href="#" class="item-label item-interactive">Label</a>
        </div>
      </div>
    </div>
  </li>
</ul>
  

html

Outlined

Card item only

Since the list items are sticked, this variant should only be used on card items.

Card item

By default every item comes with a divider. The divider may be removed or transformed into an outline using .item-outlined and/or .item-no-outline on the .item element or any ancestors. .item-no-divider can also be applied for another rendering.

Static items only have the non-interactive version.

    <div class="item item-navigation item-outlined">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Label</a>
      </div>
    </div>
  </div>
</div>

<div class="item item-navigation item-outlined item-no-divider">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Label</a>
      </div>
    </div>
  </div>
</div>
  

html

Rounded corners

Rounded corners items is a project-wide option therefore all your items should either be rounded or not. Add .use-rounded-corner-items on a top container (for example <body>) to use rounded corners.

Heads up!

Rounded corners could be used in more emotional, immersive contexts or those tied to specific visual identities. For standard or business-oriented usage, keep the default square corners.

Note

We use a <div> as a parent container because we cannot use <body> in an example.

Note

Items in a list won't have rounded corners even using this class.

Label

Label
Label

    <div class="use-rounded-corner-items">
  <!-- Card -->
  <div class="item mb-medium">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </div>

  <!-- List -->
  <ul class="item-list">
    <li class="item">
      <div class="item-container">
        <div class="item-content">
          <div class="item-text-container">
            <p class="item-label">Label</p>
          </div>
        </div>
      </div>
    </li>
    <li class="item">
      <div class="item-container">
        <div class="item-content">
          <div class="item-text-container">
            <p class="item-label">Label</p>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>
  

html

States

Disabled

Items can be disabled by using [aria-disabled="true"] on the .item element or any ancestors.

If the item is in a disabled context, with an ancestor element that has the [disabled] attribute or the [aria-disabled="true"] attribute, the item will automatically adapt.

You may handle on your own the slots regarding accessibility and design. For example, if you have a slot with a button, you may want to disable the button to apply the right behavior and the correct visual state.

Label

Extra label

Tag

    <div aria-disabled="true">
  <div class="item item-navigation mb-medium">
    <!-- Disabled via its missing attribute -->
    <a class="item-container item-interactive">
      <div class="item-content">
        <div class="item-leading-container item-status-warning">
          <div class="item-icon"></div>
        </div>
        <div class="item-text-container">
          <span class="item-label">Label</span>
        </div>
        <div class="item-trailing-container item-trailing-xlarge item-trailing-rounded">
          <img alt="" src="https://placecats.com/500/500" class="w-100 h-100 object-fit-cover" />
        </div>
      </div>
    </a>
  </div>

  <div class="item">
    <div class="item-container item-no-bg">
      <div class="item-content">
        <div class="item-leading-container item-slot">
          <!-- Disabled via its attribute -->
          <button class="btn btn-strong" disabled>Slot</button>
        </div>
        <div class="item-text-container">
          <p class="item-label">Label</p>
          <p class="item-extra-label">Extra label</p>
        </div>
        <div class="item-trailing-container">
          <p class="tag">Tag</p>
        </div>
      </div>
    </div>
  </div>
</div>
  

html

Skeleton

To set the item in skeleton state, it needs to be wrapped in an [aria-busy="true"] container that also has the inert attribute. To get more information, please refer to the skeleton documentation.

Label

    <div aria-busy="true" inert>
  <div class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </div>
</div>
  

html

Sizes

By default every item comes with a default size. The size can be adapted using .item-small on the .item or .item-list element.

Heads up!

The small size comes with some restrictions:

The assets within the leading container and the trailing container apart tags and badges mustn't use any size classes
There mustn't be any slot in the item
The text container must only have the label, and/or description inside and not the overline, or extra label

Label

Label
Label

    <!-- Card -->
<div class="item item-small">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

<!-- List -->
<ul class="item-list item-small">
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
</ul>
  

html

Layout

Alignment

By default all items are vertically centered. You can change the alignment of the content using .item-top by setting it on the .item or .item-list.

No credits

Your favorite networks

Registered networks

See and manage your favorite networks from this page

1error

You currently have no plan for your favorite networks

Apply to a plan

    <div class="item item-navigation item-top">
  <a href="#" class="item-container item-interactive">
    <div class="item-content">
      <div class="item-leading-container">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
      <div class="item-text-container">
        <span class="item-overline text-status-negative">No credits</span>
        <span class="item-label">Your favorite networks</span>
        <span class="item-extra-label">Registered networks</span>
        <span class="item-description">See and manage your favorite networks from this page</span>
      </div>
      <div class="item-trailing-container">
        <span class="badge badge-count badge-large" id="item-01-badge-count">1<span class="visually-hidden">error</span></span>
      </div>
    </div>
    <div class="item-slot item-slot-focusable">
      <div class="alert alert-message alert-negative">
        <div class="alert-icon"><p class="visually-hidden">Negative alert</p></div>
        <div class="alert-container">
          <div class="alert-text-container">
            <p class="alert-label">You currently have no plan for your favorite networks</p>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>

<div class="item item-top">
  <div class="item-container">
    <div class="item-content">
      <div class="item-leading-container">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
      <div class="item-text-container">
        <p class="item-overline text-status-negative">No credits</p>
        <p class="item-label">Your favorite networks</p>
        <p class="item-extra-label">Registered networks</p>
        <p class="item-description">See and manage your favorite networks from this page</p>
      </div>
      <div class="item-trailing-container">
        <p class="badge badge-count badge-large">1<span class="visually-hidden">error</span></p>
      </div>
    </div>
    <div class="item-slot">
      <div class="alert alert-message alert-negative">
        <div class="alert-icon"><p class="visually-hidden">Negative alert</p></div>
        <div class="alert-container">
          <div class="alert-text-container">
            <h3 class="alert-label">You currently have no plan for your favorite networks</h3>
          </div>
        </div>
        <div class="alert-action-container">
          <a href="#" class="link">Apply to a plan</a>
        </div>
      </div>
    </div>
  </div>
</div>
  

html

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 or .item-list container.

Label

Label
Label

    <!-- Card -->
<div class="item component-max-width mb-medium">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

<!-- List -->
<ul class="item-list component-max-width">
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="item-container">
      <div class="item-content">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
</ul>
  

html

These variants are exclusive to the navigation items. They are used to indicate a specific type of navigation. The other common variants can be found in the common variants section.

Back chevron

Add .item-previous to the .item-navigation to indicate that the item is a back navigation item. This will add a back chevron icon to the start of the item.

    <div class="item item-navigation item-previous">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Label</a>
      </div>
    </div>
  </div>
</div>
  

html

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.

Note

For accessibility reasons, it is recommended to add a .visually-hidden text (or a visible one if the icon is far from the text) to indicate that the link opens an external resource. Take a look at some more complete accessibility guidelines.

    <div class="item item-navigation item-external">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" target="_blank" rel="noopener" class="item-label item-interactive">Label<span class="visually-hidden">&nbsp;(external link, new window)</span></a>
      </div>
    </div>
  </div>
</div>

<div class="item item-navigation item-external">
  <div class="item-container">
    <div class="item-content">
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Label (external link)</a>
      </div>
    </div>
  </div>
</div>
  

html

Wrapping link

Optionally, the <a> element can wrap the entire .item-container instead of just the label.

Accessibility

Screen readers will read the entire item as a link. You can use the .visually-hidden text to provide additional context if needed. You won't need any [aria-labelledby] as stated in our accessibility section.

Avoid using any interactive elements inside the item when using this variant, as it will create nested interactive elements which is not valid HTML and can cause accessibility issues.

    <div class="item item-navigation">
  <a href="#" class="item-container item-interactive">
    <div class="item-content">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </a>
</div>
  

html

Focusable slot

.item-slot-focusable can be added to the slot or the interactive element to be able to interact with it.

Watch out!

The interactive slot should be avoided inside the navigation item as much as possible. Prefer to have only Navigation item or multiple links inside a static item. So here, just like in the alignment section.

    <div class="item item-navigation">
  <div class="item-container">
    <div class="item-content">
      <div class="item-leading-container">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.5/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
      <div class="item-text-container">
        <a href="#" class="item-label item-interactive">Your favorite networks</a>
      </div>
    </div>
    <div class="item-slot item-slot-focusable">
      <div class="alert alert-message alert-negative">
        <div class="alert-icon"><p class="visually-hidden">Negative alert</p></div>
        <div class="alert-container">
          <div class="alert-text-container">
            <h3 class="alert-label">You currently have no plan for your favorite networks</h3>
          </div>
        </div>
        <div class="alert-action-container">
          <a href="#" class="link">Apply to a plan</a>
        </div>
      </div>
    </div>
  </div>
</div>
  

html

Items

On this page On this page

Overview

Component types

Approach

Accessibility

Card items

Static card item

Navigation card item

List items

Static list item

Navigation list item

Common variants

With asset

Leading container

Icon

Image

Slot

Text container

Trailing container

Text

Badge

Tag

Icon

Image

Slot

Slots

Alert message

Helper text

Background

Divider

Outlined

Rounded corners

States

Disabled

Skeleton

Sizes

Layout

Alignment

You currently have no plan for your favorite networks

Max width

Navigation items variants

Back chevron

External link

Wrapping link

Focusable slot

You currently have no plan for your favorite networks

On this page