List | Components

List

Related items that are organized vertically.

UsageGuidelinesAPI

Use List...

To display related items in a vertical arrangement.
To place a series of links inside Left Hand Navigation.
To describe steps, instructions, or rules.

Don't use List...

To present unrelated items.

ReactVanilla

<>
  <P>Here is a paragraph of text.</P>
  <Ul>
    <Li>Item 1</Li>
    <Li>Item 2</Li>
    <Li>
      Item 3<br />
      which goes onto multiple lines to show line height
    </Li>
  </Ul>
</>

<>
  <P>Here is a paragraph of text.</P>
  <Ul>
    <Li>Item 1</Li>
    <Li>Item 2</Li>
    <Li>
      Item 3<br />
      which goes onto multiple lines to show line height
    </Li>
  </Ul>
</>

<div>
  <p>Here is a paragraph of text.</p>
  <ul class="swan-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3<br />which goes onto multiple lines to show line height</li>
  </ul>
</div>

<div>
  <p>Here is a paragraph of text.</p>
  <ul class="swan-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3<br />which goes onto multiple lines to show line height</li>
  </ul>
</div>

Checkmarks

Use skin="checkmark" to replace the bullets with checkmark icons.

ReactVanilla

<Ul skin="checkmark">
  <Li>Item 1</Li>
  <Li>Item 2</Li>
  <Li>Item 3</Li>
</Ul>

<Ul skin="checkmark">
  <Li>Item 1</Li>
  <Li>Item 2</Li>
  <Li>Item 3</Li>
</Ul>

<ul class="swan-list swan-list-skin-checkmark">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="swan-list swan-list-skin-checkmark">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Minimal

Use skin="minimal" to remove the bullets from the list. This is useful for accessibility, as it allows you to use proper list semantics without visible list styling.

ReactVanilla

<Ul skin="minimal">
  <Li>Item 1</Li>
  <Li>Item 2</Li>
  <Li>Item 3</Li>
</Ul>

<Ul skin="minimal">
  <Li>Item 1</Li>
  <Li>Item 2</Li>
  <Li>Item 3</Li>
</Ul>

<ul class="swan-list swan-list-skin-minimal">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ul class="swan-list swan-list-skin-minimal">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered List

Use <Ol> to replace the bullets with stylized numbers.

ReactVanilla

<Ol>
  <Li>Item 1</Li>
  <Li>
    Item 2 is so very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very, long
    that it wraps onto multiple lines
  </Li>
  <Li>Item 3</Li>
  <Li>Item 4</Li>
  <Li>Item 5</Li>
  <Li>Item 6</Li>
  <Li>Item 7</Li>
  <Li>Item 8</Li>
  <Li>Item 9</Li>
  <Li>Item 10</Li>
  <Li>Item 11</Li>
  <Li>Item 12</Li>
  <Li>Item 13</Li>
  <Li>Item 14</Li>
  <Li>Item 15</Li>
  <Li>Item 16</Li>
  <Li>Item 17</Li>
  <Li>Item 18</Li>
  <Li>Item 19</Li>
  <Li>Item 20</Li>
</Ol>

<Ol>
  <Li>Item 1</Li>
  <Li>
    Item 2 is so very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very, long
    that it wraps onto multiple lines
  </Li>
  <Li>Item 3</Li>
  <Li>Item 4</Li>
  <Li>Item 5</Li>
  <Li>Item 6</Li>
  <Li>Item 7</Li>
  <Li>Item 8</Li>
  <Li>Item 9</Li>
  <Li>Item 10</Li>
  <Li>Item 11</Li>
  <Li>Item 12</Li>
  <Li>Item 13</Li>
  <Li>Item 14</Li>
  <Li>Item 15</Li>
  <Li>Item 16</Li>
  <Li>Item 17</Li>
  <Li>Item 18</Li>
  <Li>Item 19</Li>
  <Li>Item 20</Li>
</Ol>

<ol class="swan-list">
  <li>Item 1</li>
  <li>
    Item 2 is so very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very, long
    that it wraps onto multiple lines
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
  <li>Item 20</li>
</ol>

<ol class="swan-list">
  <li>Item 1</li>
  <li>
    Item 2 is so very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very,
    very, very, very, very, very, very, very, very, very, very, very, very, long
    that it wraps onto multiple lines
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
  <li>Item 17</li>
  <li>Item 18</li>
  <li>Item 19</li>
  <li>Item 20</li>
</ol>

Link List

Use <LinkList> to provide standard styling for a series of links, such as inside Left Hand Navigation.

ReactVanilla

<>
  <LinkListHeading>Link list heading</LinkListHeading>
  <LinkList>
    <Li>
      <a href="./">Item 1</a>
    </Li>
    <Li>
      <a href="./">Item 2</a>
    </Li>
    <Li>
      <a href="./">Item 3</a>
    </Li>
  </LinkList>
</>

<>
  <LinkListHeading>Link list heading</LinkListHeading>
  <LinkList>
    <Li>
      <a href="./">Item 1</a>
    </Li>
    <Li>
      <a href="./">Item 2</a>
    </Li>
    <Li>
      <a href="./">Item 3</a>
    </Li>
  </LinkList>
</>

<div>
  <h3 class="swan-link-list-heading">Link list heading</h3>
  <ul class="swan-link-list">
    <li><a href="./">Item 1</a></li>
    <li><a href="./">Item 2</a></li>
    <li><a href="./">Item 3</a></li>
  </ul>
</div>

<div>
  <h3 class="swan-link-list-heading">Link list heading</h3>
  <ul class="swan-link-list">
    <li><a href="./">Item 1</a></li>
    <li><a href="./">Item 2</a></li>
    <li><a href="./">Item 3</a></li>
  </ul>
</div>

Icon Bullet List

Use <BulletListIcon> to set a custom icon for each item instead of a "bullet".

ReactVanilla

<BulletList>
  <Li>
    <BulletListIcon
      src="https://picsum.photos/400/400?q=2"
      width={32}
      height={32}
      alt=""
    />
    <BulletListContent>Item 1</BulletListContent>
  </Li>
  <Li>
    <BulletListIcon
      src="https://picsum.photos/400/400?q=2"
      width={32}
      height={32}
      alt=""
    />
    <BulletListContent>Item 2</BulletListContent>
  </Li>
  <Li>
    <BulletListIcon
      src="https://picsum.photos/400/400?q=2"
      width={32}
      height={32}
      alt=""
    />
    <BulletListContent>Item 3</BulletListContent>
  </Li>
</BulletList>

<BulletList>
  <Li>
    <BulletListIcon
      src="https://picsum.photos/400/400?q=2"
      width={32}
      height={32}
      alt=""
    />
    <BulletListContent>Item 1</BulletListContent>
  </Li>
  <Li>
    <BulletListIcon
      src="https://picsum.photos/400/400?q=2"
      width={32}
      height={32}
      alt=""
    />
    <BulletListContent>Item 2</BulletListContent>
  </Li>
  <Li>
    <BulletListIcon
      src="https://picsum.photos/400/400?q=2"
      width={32}
      height={32}
      alt=""
    />
    <BulletListContent>Item 3</BulletListContent>
  </Li>
</BulletList>

<ul class="swan-bullet-list">
  <li>
    <img
      src="https://picsum.photos/400/400?q=2"
      width="32"
      height="32"
      alt=""
      class="swan-bullet-list-icon"
    />
    <div class="swan-bullet-list-contents">Item 1</div>
  </li>
  <li>
    <img
      src="https://picsum.photos/400/400?q=2"
      width="32"
      height="32"
      alt=""
      class="swan-bullet-list-icon"
    />
    <div class="swan-bullet-list-contents">Item 2</div>
  </li>
  <li>
    <img
      src="https://picsum.photos/400/400?q=2"
      width="32"
      height="32"
      alt=""
      class="swan-bullet-list-icon"
    />
    <div class="swan-bullet-list-contents">Item 3</div>
  </li>
</ul>

<ul class="swan-bullet-list">
  <li>
    <img
      src="https://picsum.photos/400/400?q=2"
      width="32"
      height="32"
      alt=""
      class="swan-bullet-list-icon"
    />
    <div class="swan-bullet-list-contents">Item 1</div>
  </li>
  <li>
    <img
      src="https://picsum.photos/400/400?q=2"
      width="32"
      height="32"
      alt=""
      class="swan-bullet-list-icon"
    />
    <div class="swan-bullet-list-contents">Item 2</div>
  </li>
  <li>
    <img
      src="https://picsum.photos/400/400?q=2"
      width="32"
      height="32"
      alt=""
      class="swan-bullet-list-icon"
    />
    <div class="swan-bullet-list-contents">Item 3</div>
  </li>
</ul>

Alternates

We provide alternative names to some of our List components. This is just for user convenience and we do not prefer one over another.

<List>	<Ul>
<OrderedList>	<Ol>
<ListItem>	<Li>

Accessibility

If a List has a heading, the List itself should have an aria-labelledby attribute whose value is the id of the heading.

Content

Don't make a list too long or cause unnecessary scrolling.
Keep lists uniform by keeping to single lines, double lines, or nested lists.
When labeling lists and list items, do not mix passive and active voices.

List Items

Group list items in a logical and meaningful manner.
Ensure they carry the same weight of importance.
Aim for items to be of similar length.

Design

Lists have no inherent font size and can use whatever font size is appropriate for the design.
Avoid mixing list types.

Props

This component is implemented using the <ul /> as the root element. You can utilize the native attributes supported by <ul /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.