List

Overview

Source: ./src/fragments/list/OCListV1.mdx

List

The list utility provides classes for consistent ordered and unordered list styling.

Skip to:

• Class naming convention
• List utilities
• Usage guidelines

Class naming convention

Classes use the format {prefix}-{property}--{variation}.

List utilities

The following variations are available:

Usage guidelines

Add the appropriate CSS class to your <ul> or <ol> elements to apply the desired list style. For example, to create an unordered list, use the oc-list--unordered class:

<ul class="oc-list--unordered">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Find all usage examples in the list demo.

List (ListV1.stories.ts)

Demo: List

Story: fragments-list--list · tags:

{
  name: "Demo: List",
  render: allList
}