Vistaprint

List

Lists contain related items that are organized vertically.

Playground

  • Item 1
  • Item 2
  • Item 3
    which goes onto multiple lines to show line height
Share
Share
jsx
<ul class="stylized-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3<br />
    which goes onto multiple lines to show line height
  </li>
</ul>

Checkmarks

The "checkmarks" feature replaces the bullets with checkmark icons.

  • Item 1
  • Item 2
  • Item 3
Share
Share
jsx
jsx
<List skin="checkmark">...</List>
<ul class="stylized-list stylized-list-skin-checkmark">
  ...
</ul>

Minimal

The "minimal" feature removes the bullets from the list. This is useful for accessibility, as it allows you to use proper list semantics without visible list styling.

  • Item 1
  • Item 2
  • Item 3
Share
Share
jsx
jsx
<List minimal>...</List>
<ul class="stylized-list stylized-list-minimal">
  ...
</ul>

Ordered List

A Ordered List replaces the bullets with stylized numbers.

  1. Item 1
  2. Item 2
  3. Item 3
Share
Share
jsx
<ol class="stylized-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
  1. Item 1
  2. Item 2
  3. Item 3
    • Item 3a
    • Item 3b
    • Item 3c
  4. Item 4
Share
Share
jsx

Link List

A Link List provides standard styling for a series of links. It is a common pattern in navigation; in particular, it is used inside Left Hand Navigation.

Link List Heading

Share
Share
jsx
<h3 class="link-list-heading" id="myExampleListHeading">
  <!-- optional element -->
  Link List Heading
</h3>
<ul class="link-list" aria-labelledby="myExampleListHeading">
  <li><a href="somehref">Item 1</a></li>
  <li><a href="somehref">Item 2</a></li>
  <li><a href="somehref">Item 3</a></li>
</ul>

Link List using the "shaded" skin

Heading

Share
Share
jsx
jsx
<LinkList skin="shaded">...</LinkList>
<ul class="link-list link-list-skin-shaded">
  ...
</ul>

A list item can be "selected", which is used by some Link Lists (especially when part of Left Hand Navigation). This will give the selected item a different visual state, indicating that it's the page that the user is currently on. This item should not have a link inside it.

Share
Share
jsx

Icon Bullet List

An Icon Bullet List allows you to set a custom icon for each item instead of a "bullet". These icons should be 32x32 pixels.

  • Item 1
  • Item 2
  • Item 3
Share
Share
jsx
jsx
<IconBulletList>
  <ListItem>
    {/* replace NN below with the height and width of the image */}
    <IconBulletListIcon src="somehref" width="NN" height="NN" alt="" />
    <IconBulletListItem>Item 1</IconBulletListItem>
  </ListItem>
</IconBulletList>
<ul class="icon-bullet-list">
  <li>
    <!-- replace NN below with the height and width of the image -->
    <img
      class="icon-bullet-list-icon"
      src="somehref"
      width="NN"
      height="NN"
      alt=""
    />
    <div class="icon-bullet-list-contents">Item 1</div>
  </li>
</ul>

Components

List

PropTypeDefaultDescription
skin"standard" | "checkmark"standard

The visual style of the list

minimalboolean

Use minimal style of the list

All other props are forwarded to the element specified in thecomponentprop(default: <ul/>)

ListItem

ListItem has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <li/>)

OrderedList

PropTypeDefaultDescription
skin"standard" | "minimal" | "checkmark" | "shaded"standard

The visual style of the list

All other props are forwarded to the element specified in thecomponentprop(default: <ol/>)

LinkList

PropTypeDefaultDescription
skin"standard" | "shaded"standard

The visual style of the list

All other props are forwarded to the element specified in thecomponentprop(default: <ul/>)

IconBulletList

IconBulletList has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <ul/>)

IconBulletListIcon

IconBulletListIcon has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <img/>)

LinkListHeading

LinkListHeading has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <h3/>)

Guidelines

Usage

Lists are useful, efficient, and easily digestible by users. Use lists when describing steps, instructions, or rules. When using lists, make sure items are:

  • logically arranged

  • grouped in a meaningful manner

  • carry the same weight of importance

  • approximately the same length

Designer Guidelines

  • Lists have no inherent font size, and can use whatever font size is appropriate for the design.

  • A single list item can wrap to a second line.

  • A list can contain nested items.

  • Don't make a list too long or cause unnecessary scrolling.

  • Keep lists uniform by keeping to single lines, double lines, or nested lists.

  • Try not to mix list types.

  • When labeling lists and list items, do not mix passive and active voices.

Accessibility Guidelines

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