List item

List items are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

 <div class="item-wrapper mb-medium">
  <div class="item">
    <div class="item-main">
      <div class="item-leading-container">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
      <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>
        <button class="item-slot item-slot-clickable btn btn-strong">Test</button>
      </div>
    </div>
  </div>
  <p class="item-helper">Helper text</p>
</div>
<div class="item-wrapper item-navigation mb-medium">
  <div class="item item-no-divider">
    <div class="item-main">
      <svg class="item-leading-container" aria-hidden="true">
        <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
      </svg>
      <div class="item-text-container">
        <p class="item-overline">Overline</p>
        <a href="#" class="item-interactive item-label">Label</a>
        <p class="item-extra-label">Extra label</p>
        <p class="item-description">Description</p>
      </div>
    </div>
    <button class="item-slot item-slot-clickable btn btn-strong">Test</button>
  </div>
</div>
<div class="item-wrapper item-navigation item-external-link mb-medium">
  <a href="#" class="item item-interactive">
    <div class="item-main">
      <svg class="item-leading-container" aria-hidden="true">
        <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
      </svg>
      <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>
  </a>
  <p class="item-helper">Helper text</p>
</div>
<ul class="item-list mb-medium">
  <li class="item-wrapper">
    <div class="item">
      <div class="item-main">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
        <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>
          <button class="item-slot item-slot-clickable btn btn-strong">Test</button>
        </div>
        <div class="item-trailing-container">
          <p class="item-label">Label</p>
          <p class="item-extra-label">Extra label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item-wrapper">
    <div class="item">
      <div class="item-main">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
        <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>
  </li>
</ul>
<ul class="item-list mb-medium">
  <li class="item-wrapper item-navigation item-external-link">
    <div class="item">
      <div class="item-main">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
        <div class="item-text-container">
          <p class="item-overline">Overline</p>
          <a href="#" class="item-interactive item-label">Label</a>
          <p class="item-extra-label">Extra label</p>
          <p class="item-description">Description</p>
          <button class="item-slot item-slot-clickable btn btn-strong">Test</button>
        </div>
        <div class="item-trailing-container">
          <p class="item-label">Label</p>
          <p class="item-extra-label">Extra label</p>
        </div>
      </div>
      <button class="item-slot item-slot-clickable btn btn-strong">Test</button>
    </div>
  </li>
  <li class="item-wrapper item-navigation">
    <a href="#" class="item item-interactive">
      <div class="item-main">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
        <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>
    </a>
  </li>
</ul>
<ul class="item-list">
  <li class="item-wrapper item-navigation item-previous">
    <div class="item">
      <div class="item-main">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
        <div class="item-text-container">
          <p class="item-overline">Overline</p>
          <a href="#" class="item-interactive item-label">Label</a>
          <p class="item-extra-label">Extra label</p>
          <p class="item-description">Description</p>
          <div class="item-slot item-slot-clickable"><button class="btn btn-strong">Test</button></div>
        </div>
      </div>
      <div class="item-slot item-slot-clickable"><button class="btn btn-strong">Test</button></div>
    </div>
  </li>
  <li class="item-wrapper item-navigation item-previous">
    <a href="#" class="item item-interactive">
      <div class="item-main">
        <svg class="item-leading-container" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
        <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>
    </a>
  </li>
</ul> 

html

Overview

Component types

Label
Static item is a UI element that displays a unit of information.
Label
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.

For the two types of items, OUDS Web has a common base .item, and .item-main classes that set up default styles such as padding and content alignment. The .item 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.

Label

 <div class="item-wrapper">
  <div class="item item-no-bg">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div> 

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

Approach

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

The card item is a single item that can be used as a standalone component.
The list item is designed to be used within a list, allowing multiple items to be displayed together.

Static items and Navigation items can be used in both categories.

Consider Navigation items as an extension of Static items, with the added functionality of being able to navigate to different pages or sections within a multi-page interface.

Card item

The card item is the default item when the item components are used.

It is not meant to be used in a list. Most of the variants can be applied to this kind of item. It comes with a background and a divider by default.

List item

The list item is designed to be used within a list, allowing multiple items to be displayed together. By default, they have a divider but no background. Add .item-list to the <ul> element.

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

Outlined variants

Rounded variant

Accessibility

Static item

This is used to display a unit of information without any interaction. It can be used as a standalone component or within a list.

Standard display

Label

Label
Label

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

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

html

Variants

With asset

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

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

Leading container

The leading container using .item-leading-container.

Here is a table of the different assets that we support in the leading container, along with their corresponding classes and notes.

Heads up!

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

The icon may be large using .item-leading-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.

Test2

Test3

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-leading-container item-leading-large">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/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-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-leading-container item-status-positive">
        <div class="item-icon"></div>
      </div>
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div> 

html

Images can be sized with item-leading-large (only if not small item) or item-leading-xlarge (only if not small item) and can use ratio utilities and .item-leading-rounded. All these classes can be combined as needed and placed on a parent element.

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-leading-container item-leading-xlarge item-leading-rounded">
        <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>

<div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-leading-container 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

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 and .item-trailing-rounded. All these classes can be combined as needed and placed on a parent element.

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-leading-container item-leading-large ratio-16x9 item-leading-rounded">
        <video controls class="w-100 h-100 object-fit-cover" autoplay muted loop>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          <track kind="captions" src="" srclang="en" label="English">
          Your browser does not support the video tag.
        </video>
      </div>
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div> 

html

To add a slot, item-slot must be combined with .item-trailing-container. Limited in size to 96px x 96px. A slot can be rounded using item-trailing-rounded.

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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

Text

There are four text elements that are meant to be used in the .item-text-container. They always appear in the following order:

Overline using .item-overline (optional) (not in small item)
Label using .item-label, that can optionally be bold (using .fw-bold) (required)
Extra label using .item-extra-label (optional) (not in small item)
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.

Overline

Label

Extra label

Description

Overline

Label

Extra label

Description

Overline

Label

Extra label

Description

Overline

Label

Extra label

Description

Slot

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-overline">Overline</p>
        <div class="item-slot"><p class="tag">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-wrapper">
  <div class="item">
    <div class="item-main">
      <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 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.

Heads up!

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

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

Label

Extra label

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
  <div class="item">
    <div class="item-main">
      <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

All variants of Badge and Badge - count are allowed.

Label

12errors

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
  <div class="item">
    <div class="item-main">
      <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

All variants of tags are allowed.

Label

Tag

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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

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

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
    </div>
  </div>
</div>

<div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container item-status-positive">
        <div class="item-icon"></div>
      </div>
    </div>
  </div>
</div> 

html

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 and .item-trailing-rounded. All these classes can be combined as needed and placed on a parent element.

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </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>
  </div>
</div>

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

html

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
      <div class="item-trailing-container item-trailing-large ratio-16x9 item-trailing-rounded">
        <video controls class="w-100 h-100 object-fit-cover" autoplay muted loop>
          <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
          <track kind="captions" src="" srclang="en" label="English">
          Your browser does not support the video tag.
        </video>
      </div>
    </div>
  </div>
</div> 

html

To add a slot, item-slot must be combined with .item-trailing-container. Limited in size to 96px x 96px. A slot can be rounded using item-trailing-rounded.

Label

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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

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 using .item-slot (optional)
Text container using .item-slot (optional)
Trailing container using .item-slot (optional)
A slot outside of the main container, direct child of .item using .item-slot (optional)

Label

Alert message

 <div class="item-wrapper">
  <div class="item">
    <div class="item-main">
      <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 using .item-helper.

Label

Helper text

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

html

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

 <!-- Alone -->
<div class="item-wrapper">
  <div class="item item-no-bg">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

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

html

Outlined

By default every item comes with a divider. The divider may be removed or transformed into an outline using .item-no-divider or .item-outlined or .item-no-outline on the element .item or any ancestors. It applies only on Card element.

Label

 <!-- Without divider -->
<div class="item-wrapper item-no-divider">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

<!-- Outlined -->
<div class="item-wrapper item-outlined">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </div>
    </div>
  </div>
</div>

<div class="item-wrapper item-outlined item-no-outline">
  <div class="item">
    <div class="item-main">
      <div class="item-text-container">
        <p class="item-label">Label</p>
      </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">
  <!-- Alone -->
  <div class="item-wrapper mb-medium">
    <div class="item">
      <div class="item-main">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </div>

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

html

States

Disabled

Static items can be disabled by using .disabled on the element .item-wrapper or any ancestors. The disabled state is also applied to all interactive elements inside the item.

If the static item is in a disabled context, the static item will automatically take the disabled state without needing to add the .disabled class. This works if the ancestor element has the [disabled] attribute, the [aria-disabled="true"] attribute, or the .disabled class.

You may handle on your own the slots regarding accessibility or 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.

Note

The images and videos inside the disabled static item will be grayed out using opacity. You'll still need to handle it correclty from an accessibility point of view.

Label

Extra label

Tag

 <div class="disabled">
  <div class="item-wrapper mb-medium">
    <div class="item">
      <div class="item-main">
        <div class="item-leading-container item-status-warning">
          <div class="item-icon"></div>
        </div>
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </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>
    </div>
  </div>

  <div class="item-wrapper">
    <div class="item item-no-bg">
      <div class="item-main">
        <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">
          <!-- Disabled via its style -->
          <p class="tag">Tag</p>
        </div>
      </div>
    </div>
  </div>
</div> 

html

Skeleton

To set the static 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-wrapper">
    <div class="item">
      <div class="item-main">
        <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 element .item-wrapper or any ancestors.

Heads up!

The small size come with some restrictions:

The assets not being components shouldn't use any size classes
There shouldn't be any slot in the item
The text should only use the label, or description and not the overline, or extra label

Label

Label
Label

 <!-- Alone -->
<div class="item-wrapper item-small">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
    <div class="item">
      <div class="item-main">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item-wrapper">
    <div class="item">
      <div class="item-main">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
</ul> 

html

Layout

Alignment

By default all static item are vertically centered. You can change the alignment of the content using .item-top by setting it on the .item-main or any ancestors.

Overline

Label

Extra label

Description

1errors

Alert message

 <div class="item-wrapper">
  <div class="item item-top">
    <div class="item-main">
      <div class="item-leading-container">
        <svg class="w-100 h-100" aria-hidden="true">
          <use xlink:href="/orange/docs/1.3/assets/img/ouds-web-sprite.svg#heart-empty"/>
        </svg>
      </div>
      <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 class="item-trailing-container">
        <p class="badge badge-count badge-large">1<span class="visually-hidden">errors</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">Alert message</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 

html

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.

Label

Label
Label

 <!-- Alone -->
<div class="item-wrapper component-max-width mb-medium">
  <div class="item">
    <div class="item-main">
      <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-wrapper">
    <div class="item">
      <div class="item-main">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
  <li class="item-wrapper">
    <div class="item">
      <div class="item-main">
        <div class="item-text-container">
          <p class="item-label">Label</p>
        </div>
      </div>
    </div>
  </li>
</ul> 

html

Key concepts

html

Base class

html

Standard display

html

Variants

Back chevron

html

External link

html

Alignment

html

With asset

Leading assets

html

Text

html

Slot

html

Trailing assets

html

Helper text

html

With background

html

Outlined

html

Rounded corners

html

States

Disabled

html

Skeleton

html

Sizes

html

List item

On this page On this page

Overview

Component types

Approach

Card item

List item

Accessibility

Static item

Standard display

Variants

With asset

Leading container

Text

Trailing container

Slot

Alert message

Helper text

Background

Outlined

Rounded corners

States

Disabled

Skeleton

Sizes

Layout

Alignment

Alert message

Max width

Navigation item

Key concepts

Base class

Standard display

Variants

Back chevron

External link

Alignment

With asset

Leading assets

Text

Slot

Trailing assets

Helper text

With background

Outlined

Rounded corners

States

Disabled

Skeleton

Sizes

Layout

Max width

Using <a> around

On this page

Using `<a>` around