Lists

The Template Package 4.x framework includes styles for unordered and ordered lists with one or more columns. There are also additional style options. Any type of list can be used within regular page content or within Containers.

Guidance for Lists

Design

  • Number of Items: limit to 20 or fewer items
  • Text: use short sentences and links, keep content concise
  • Indentation: keep all items at the first level in Bulleted and Ordered Lists
  • Content: be consistent in the content formatting within the same list (e.g. all items are links, all items are sentences, all items are sentences with embedded links, all items have a thumbnail image)

Avoid

  • Using long sentences and paragraphs for list items
  • Using more than one level of indentation in Bulleted and Ordered Lists
  • Mixing list items that are links with those that are not linked

Bulleted List

Options

Use of Descriptions when links are available for each item in the list

One Column Bulleted List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Quae atque et natus tempora iste minima adipisci repudiandae.
  • Incidunt ad eius quasi molestiae, animi aut aspernatur.
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Quae atque et natus tempora iste minima adipisci repudiandae.
  • Incidunt ad eius quasi molestiae, animi aut aspernatur.
    • Lorem ipsum dolor sit amet consectetur adipisicing elit.
    • Quae atque et natus tempora iste minima adipisci repudiandae.
    • Incidunt ad eius quasi molestiae, animi aut aspernatur.
      • Lorem ipsum dolor sit amet consectetur adipisicing elit.
      • Quae atque et natus tempora iste minima adipisci repudiandae.
      • Incidunt ad eius quasi molestiae, animi aut aspernatur.

One Column Bulleted List of Links

Two Column Bulleted List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Bulleted List with Descriptions

Three Column Bulleted List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.
  • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, sit. Labore facilis aperiam, corporis ullam quod rerum, architecto dolores mollitia fugit delectus est odio consequuntur, excepturi voluptatibus eius nam possimus.
  • Atque, itaque molestiae possimus delectus, recusandae fuga vitae natus, voluptatibus labore fugiat sed voluptatum tenetur aut. Molestiae, sint, blanditiis laborum nulla porro cupiditate ea iusto soluta corrupti quo modi harum.
  • Ipsam facere, veritatis nostrum placeat dolore eius magni cupiditate aspernatur fugit sapiente! Sunt reiciendis vel error odit deleniti repellat, facilis sed corporis aspernatur provident, impedit ex delectus. Perspiciatis, voluptates dolores?
  • Adipisci, aliquam a! Earum numquam id, qui pariatur doloremque repudiandae accusamus! Tenetur animi, possimus cum ad placeat asperiores ab nostrum ipsa perspiciatis reiciendis recusandae inventore corporis error non quam enim.

One Column Bulleted List in a Horizontal Card

Header

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Bulleted List in a Horizontal Card

Header

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Bulleted List with Descriptions in a Horizontal Card

Header

Three Column Bulleted List in a Horizontal Card

Header

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.
  • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, sit. Labore facilis aperiam, corporis ullam quod rerum, architecto dolores mollitia fugit delectus est odio consequuntur, excepturi voluptatibus eius nam possimus.
  • Atque, itaque molestiae possimus delectus, recusandae fuga vitae natus, voluptatibus labore fugiat sed voluptatum tenetur aut. Molestiae, sint, blanditiis laborum nulla porro cupiditate ea iusto soluta corrupti quo modi harum.
  • Ipsam facere, veritatis nostrum placeat dolore eius magni cupiditate aspernatur fugit sapiente! Sunt reiciendis vel error odit deleniti repellat, facilis sed corporis aspernatur provident, impedit ex delectus. Perspiciatis, voluptates dolores?
  • Adipisci, aliquam a! Earum numquam id, qui pariatur doloremque repudiandae accusamus! Tenetur animi, possimus cum ad placeat asperiores ab nostrum ipsa perspiciatis reiciendis recusandae inventore corporis error non quam enim.
  • Bullets: set by the browser
  • Margin between List Columns: set by the browser, will automatically adjust depending on the browser width
  • Left Padding in One Column List, Not in Container: edge to content, set by the browser (40px in IE and Chrome)
  • Left Padding in Two+ Column List, Not in Container: 25px between edge and bullet, 1rem between bullet and content
  • Left Padding in One Column List, Within Container: 8px between edge and bullet
  • Left Padding in Two+ Column List, Within Container: 8px between edge and bullet, 1rem between bullet and content
  • Link: bottom padding of pb-3, Normal, see Links for Link styles, displayed above Description
  • Description: Normal, see Links for Link styles
  • List Item: bottom margin of mb-3
  • Three Column Lists: transitions to Two column List in M viewport, transitions to One Column List in S, XS viewport

Ordered List

Ordered Lists use numbers to delineate items in a list and are helpful for conveying a sequence of information, steps, or a procedure. While multiple "levels" and indentation are available, these should be avoided to prevent additional wrapping in smaller viewports.

Options

Use of Descriptions when links are available for each item in the list

  • Numbers: set by the browser
  • Margin between List Columns: set by the browser, will automatically adjust depending on the browser width
  • Left Padding in One Column List, Not in Container: edge to content, set by the browser (40px in IE and Chrome)
  • Left Padding in Two+ Column List, Not in Container: 25px between edge and bullet, 1 rem between bullet and content
  • Left Padding in One Column List, Within Container: 8px between edge and bullet
  • Left Padding in Two+ Column List, Within Container: 8px between edge and bullet, 1 rem between bullet and content
  • Link: bottom padding of pb-3, Normal, see Links for Link styles, displayed above Description
  • Description: Normal, see Links for Link styles
  • List Item: bottom margin of mb-3
  • Three Column Lists: transitions to Two column List in M viewport, transitions to One Column List in S, XS viewport

Block List

Block Lists use separator lines to delineate items in a list and are ideal when a grouping of items or links need to be displayed together.

Options

Use of Descriptions when links are available for each item in the list

  • Margin between List Columns: set by the browser, will automatically adjust depending on the browser width
  • Left Padding in a One, Two, or Three Column List, Not in Container: 25px between edge and content
  • Left Padding in a One, Two, or Three Column List, Within Container: 8px between edge and content
  • Link: bottom padding of pb-3, Normal, see Links for Link styles, displayed above Description, left-aligned to Separator Line
  • Description: Normal, see Links for Link styles, left-aligned to Link and Separator Line
  • List Item: bottom margin of mb-2
  • Separator Line: see Separator Line , only display below a list item
  • Three Column Lists: transitions to Two column List in M viewport, transitions to One column List in S, XS viewport

Block List with Icons

Block Lists with Icons use separator lines to delineate links in a list and icons to represent individual links in the grouping.

Options

Use of Descriptions when links are available for each item in the list

  • Icon: color options, any from our managed set, margin, effect is text is shorter than icon or longer than icon, setting links on icons?, left placement only (acts as bullet)
  • Icon Size: 2 options
  • Separator Line: update here
  • Margin between Columns: update here

Block List with Images

Block Lists with Images use separator lines to delineate links in a list and small images to represent individual links in the grouping. These work best when the images are small thumbnails, ~150px; however, the size should be considered relative to the

Options

Use of Descriptions when links are available for each item in the list

Block List with Image Specifications

  • Margin between List Columns: set by the browser, will automatically adjust depending on the browser width
  • Left Padding in a One, Two, or Three Column List, Not in Container: 25px between edge and content
  • Left Padding in a One, Two, or Three Column List, Within Container: 8px between edge and content
  • Image Layout: left-aligned to Separator line, always top aligned to content, content is always left-aligned and does not wrap under the icon, right margin of mr-3
  • Image Size: may vary, but recommended at ~150px
  • Link: bottom padding of pb-3, Normal, see Links for Link styles, displayed above Description
  • Description: Normal, see Links for Link styles, left-aligned to Link
  • List Item: bottom margin of mb-3
  • Separator Line: see Separator Line, only display below a list item
  • Three Column Lists: transitions to Two column List in M viewport, transitions to 1 column List in S, XS viewport

Checkbox List

Options

Use of Descriptions when links are available for each item in the list

One Column Checkbox List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Quae atque et natus tempora iste minima adipisci repudiandae. (checked)
  • Incidunt ad eius quasi molestiae, animi aut aspernatur. (theme primary)
  • Incidunt ad eius quasi molestiae, animi aut aspernatur. (theme primary checked)
  • Lorem ipsum dolor sit amet consectetur adipisicing elit.
  • Quae atque et natus tempora iste minima adipisci repudiandae.
  • Incidunt ad eius quasi molestiae, animi aut aspernatur.
    • Lorem ipsum dolor sit amet consectetur adipisicing elit. (checkbox only theme primary)
    • Quae atque et natus tempora iste minima adipisci repudiandae. (checkbox only theme primary)
    • Incidunt ad eius quasi molestiae, animi aut aspernatur. (checkbox only theme primary)
      • Lorem ipsum dolor sit amet consectetur adipisicing elit. (checkbox only theme primary - checked)
      • Quae atque et natus tempora iste minima adipisci repudiandae. (checkbox only theme primary - checked)
      • Incidunt ad eius quasi molestiae, animi aut aspernatur. (checkbox only theme primary - checked)

One Column Checkbox List of Links

Two Column Checkbox List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Checkbox List with Descriptions

Three Column Checkbox List

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.
  • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, sit. Labore facilis aperiam, corporis ullam quod rerum, architecto dolores mollitia fugit delectus est odio consequuntur, excepturi voluptatibus eius nam possimus.
  • Atque, itaque molestiae possimus delectus, recusandae fuga vitae natus, voluptatibus labore fugiat sed voluptatum tenetur aut. Molestiae, sint, blanditiis laborum nulla porro cupiditate ea iusto soluta corrupti quo modi harum.
  • Ipsam facere, veritatis nostrum placeat dolore eius magni cupiditate aspernatur fugit sapiente! Sunt reiciendis vel error odit deleniti repellat, facilis sed corporis aspernatur provident, impedit ex delectus. Perspiciatis, voluptates dolores?
  • Adipisci, aliquam a! Earum numquam id, qui pariatur doloremque repudiandae accusamus! Tenetur animi, possimus cum ad placeat asperiores ab nostrum ipsa perspiciatis reiciendis recusandae inventore corporis error non quam enim.

One Column Checkbox List in a Horizontal Card

Header

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Checkbox List in a Horizontal Card

Header

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.

Two Column Checkbox List with Descriptions in a Horizontal Card

Header

Three Column Checkbox List in a Horizontal Card

Header

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem mollitia consequuntur?
  • Maxime, nam et. Doloribus laboriosam dolor, porro quasi quis saepe, maxime minima.
  • Pariatur, laudantium rerum, veritatis nesciunt quis magni aliquam nostrum vel incidunt in reprehenderit quisquam!
  • Nam alias eligendi nostrum a, illo obcaecati molestiae possimus dolorem libero voluptates architecto nemo.
  • Sed, doloribus amet, fugiat neque cupiditate aut, debitis odio dolorem fuga cum blanditiis.
  • Illum amet porro laboriosam eum qui voluptates adipisci nam quos pariatur.
  • Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, sit. Labore facilis aperiam, corporis ullam quod rerum, architecto dolores mollitia fugit delectus est odio consequuntur, excepturi voluptatibus eius nam possimus.
  • Atque, itaque molestiae possimus delectus, recusandae fuga vitae natus, voluptatibus labore fugiat sed voluptatum tenetur aut. Molestiae, sint, blanditiis laborum nulla porro cupiditate ea iusto soluta corrupti quo modi harum.
  • Ipsam facere, veritatis nostrum placeat dolore eius magni cupiditate aspernatur fugit sapiente! Sunt reiciendis vel error odit deleniti repellat, facilis sed corporis aspernatur provident, impedit ex delectus. Perspiciatis, voluptates dolores?
  • Adipisci, aliquam a! Earum numquam id, qui pariatur doloremque repudiandae accusamus! Tenetur animi, possimus cum ad placeat asperiores ab nostrum ipsa perspiciatis reiciendis recusandae inventore corporis error non quam enim.
  • Bullets: set by the browser
  • Margin between List Columns: set by the browser, will automatically adjust depending on the browser width
  • Left Padding in One Column List, Not in Container: edge to content, set by the browser (40px in IE and Chrome)
  • Left Padding in Two+ Column List, Not in Container: 25px between edge and bullet, 1rem between bullet and content
  • Left Padding in One Column List, Within Container: 8px between edge and bullet
  • Left Padding in Two+ Column List, Within Container: 8px between edge and bullet, 1rem between bullet and content
  • Link: bottom padding of pb-3, Normal, see Links for Link styles, displayed above Description
  • Description: Normal, see Links for Link styles
  • List Item: bottom margin of mb-3
  • Three Column Lists: transitions to Two column List in M viewport, transitions to One Column List in S, XS viewport
View Page In: PDF [150k] DOC [150k]
Page last reviewed: