Structure

OUDSBulletList

Bullet list is a UI element that helps to view in related individual text items grouped together; items usually starting with a number or a bullet. Bullet list is also known as Unordered list or Ordered list and is not an interactive element by default.

iOS 15.0+
macOS 13.0+
tvOS 16.0+
visionOS 1.0+
watchOS 11.0+

@MainActor struct OUDSBulletList

Mentioned In

Content Display

Types

Three types are proposed:

Unordered (by default): Collects related items that don’t need to be in a specific order or sequence.
Ordered: Collects related items with numeric order or sequence.
Bare: An unordered list without any bullets or alphanumeric sequence.

Types can be mixed in list, but must be identical for the same OUDSBulletList.NestedLevel.

Levels

Lists can include nested items to indicate hierarchy or subcategories, with indentation distinguishing each level. Arrange ordered list items logically, such as ranking by importance, highest to lowest values, or in alphabetical / numeric order. Three levels are maximum.

Text Style

List can be used with different font sizes:

Body Large: If the text accompanying the list component is the Body Large text. This variant is designed for more visual, engaging experiences.
Body Medium: If the text accompanying the list component is the Body Medium text. This variant is best suited for functional, task-oriented experiences.

Cases forbidden by design

it is not allowed to have a depth of items greater than 3

Internationalisation considerations

For latin-based speaking countries, like France, Spain, United Kingdom or Belgium, the european “arabic” numbers are used for the first level of depth of the ordered bullet list. For the second and third levels, the european alphabets are used with upper and lower case values.

However for countries speaking arabic, these rules can’t be applied. Indeed, there is no notion of upper and lower case characters in arabic alphabet. In addition, the numbers in use (i.e. the european “arabic” numbers like “1, 2, 3”) are accepted in arabic countries, even if the “true arabic” numbers (like “ ٢ ٣ ١”) are used in middle-east arabic countries and for official documents. Thus the OUDS ordered bullet list will use “european” numbers for first level, and arabic alphabets for second and third levels.

Code samples

       // 1. Unordered list with bullets
       OUDSBulletList {
           OUDSBulletList.Item("Label 1")
           OUDSBulletList.Item("Label 2")
           OUDSBulletList.Item("Label 3")
       }

       // 1.1. Item of Unordered list with bullet as tick, a text style
       // body medium and text bold
       OUDSBulletList(type: .unordered(asset: .tick),
                      textStyle: .bodyMedium,
                      isBold: true)  {
           OUDSBulletList.Item("Label 1")
           OUDSBulletList.Item("Label 2")
           OUDSBulletList.Item("Label 3")
       }

       // 2. Bare list with 3 items
       OUDSBulletList(type: .bare) {
           OUDSBulletList.Item("Label 1")
           OUDSBulletList.Item("Label 2")
           OUDSBulletList.Item("Label 3")
       }

       // 3. Ordered list with 3 items
       OUDSBulletList(type: .ordered) {
           OUDSBulletList.Item("Label 1")
           OUDSBulletList.Item("Label 2")
           OUDSBulletList.Item("Label 3")
       }

       // 3.1. Ordered list with 3 items in first level,
       // and one item as sub item (second level),
       // and 2 items as sub item in (third level)
       OUDSBulletList(type: .ordered) {
           OUDSBulletList.Item("Label 1") {
               OUDSBulletList.Item("Label 1.1") {
                   OUDSBulletList.Item("Label 1.1.1")
                   OUDSBulletList.Item("Label 1.1.2")
               }
           }
           OUDSBulletList.Item("Label 2")
           OUDSBulletList.Item("Label 3")
       }

       // Same Bullet list but items in third level with free icon as bullet
       let icon = Image(decorative: "ic_heart")
       OUDSBulletList(type: .ordered) {
           OUDSBulletList.Item("Label 1") {
               OUDSBulletList.Item("Label 1.1", subListType: .unordered(asset: .icon(icon))) {
                   OUDSBulletList.Item("Label 1.1.1")
                   OUDSBulletList.Item("Label 1.1.2")
               }
           }
           OUDSBulletList.Item("Label 2")
           OUDSBulletList.Item("Label 3")
       }

Rich text

Rich text can be applied only if isBold flag is set to false.

Strong text can be used sparingly within alert messages to highlight key information. Underlined text must not be used for emphasis, as it is commonly associated with links. If a hyperlink is needed within the content, the underlined style should be used. Italic should be used with care, some brands do not allow it like Orange brand. No other text styles should be used.

Accessibility considerations

Always check the results of rich text mode with high contrast, light and dark modes, and Voice Over vocalization.

Design documentation

unified-design-system.orange.com

Themes rendering

Orange

A bullet list component in light and dark modes with Orange theme

Orange Compact

A bullet list component in light and dark modes with Orange Compact theme

Sosh

A bullet list component in light and dark modes with Sosh theme

Wireframe

A bullet list component in light and dark modes with Wireframe theme

Version
1.0.0 (Figma component design version)

Since
1.2.0

Topics