O3 World Component Library

List Layout 

<!-- All markup in this file is FPO -->

<p>Default styling:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--default">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<p>Unstyled utility class:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--unstyled u-list-unstyled">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>

<p>Inline utility class:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--inline u-list-inline">
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
</ul>
 
<!-- All markup in this file is FPO -->

<p>Default styling:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--default">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<p>Unstyled utility class:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--unstyled u-list-unstyled">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<p>Inline utility class:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--inline u-list-inline">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>
 
/* No context defined for this component. */
  • Content: 
    <!-- All markup in this file is FPO -->

<p>Default styling:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--default">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<p>Unstyled utility class:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--unstyled u-list-unstyled">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

<p>Inline utility class:</p>
<ul class="style-guide__list-layout-list style-guide__list-layout-list--inline u-list-inline">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>
  • URL: /components/raw/list-layout/list-layout.html
  • Filesystem Path: components/list-layout/list-layout.html
  • Size: 696 Bytes

Usage

List layout utility classes can be used to quickly change default list styles.

List Layout Utility Classes

  • u-list-unstyled removes the default list styling.
  • u-list-inline applies styles to make list items horizontal.