Skip to main content

Structured list

Using structured list components is an effective way of organizing information to be concise and easy to consume and compare across categories. 

Example

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

Best practices

Use a structured list when you want the user to be able to quickly parse through a set of similar products and compare them side-by-side. Chose either an ordered list or unordered list as semantically appropriate.

The structured list uses a table-like structure based upon a list (assigned the class f-column) whose list items are each assigned class f-row and all are inside a div container (assigned class c-structured-list). Each “row” contains two divs that leverage the grid to make up the row’s two columns. The columns are configurable to hold images or text as needed.

Do

  • Use <h4> or <h5> headings to create an optional title for your structured list. Use <h4> when the structured list is the main content on the page. Use <h5> when it is just one of several pieces of content.
  • Be aware that structured lists are reactive; as the viewport size diminishes, so does each column width. If the viewport width is less than the structured list dual column minimum width, then the structured list will collapse into one column. See how this works with the examples below as you shrink your browser window.
  • When using images, always enter alt text to describe the image.
  • When placing a paragraph of text into a row, remember to use set sizing when selecting the class to control the text size.

Don’t

  • Do not use more than 2 columns in a structured list.
    That being said, you can nest two structured lists side-by-side using the grid system as demonstrated in the example below.

Also known as

Structured list

Related

Action trigger
Button
Checkbox
Image

Accessibility

No special considerations.

Options

  • Small media behavior: Assigning the first child div for each row to class stack-2 will cause the left “column” to stack above and align itself to the right “column” when the screen narrows to a small size. Otherwise, the stacking effect will appear with a ragged left margin alignment.
  • Dual Columns: A 4-column effect is possible on a large screen by using two lists within the structured list’s div container. Add the class stack-4 to the data-grid attribute on the div container (with class c-structured-list) and add data-grid="col-6" to both child lists (with class f-column) to get dual columns.
  • Column width: Each list item represents a “row” (class f-row). Controlling the width of each column is the function of the data-grid attribute in the child divs. Column widths will vary to fit content. For example, the first column can be set to data-grid="col-1" and the second to data-grid="col-11." In all cases, the columns set for the row’s child divs should equal the data-grid width set in the c-structured-list div.

Development

  • Schema definition: The structured-list schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Structured List

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

<div data-grid="col-12" class="c-structured-list">
    <ul class="f-column">
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
    </ul>
</div>

Dual columns structured list

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  • Placeholder with grey background and dimension watermark without any imagery

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

<div data-grid="col-12 stack-4" class="c-structured-list">
    <ul data-grid="col-6" class="f-column">
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
    </ul>
    <ul data-grid="col-6" class="f-column">
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">
                <img class="c-image" src="http://placehold.it/80x35" alt="Placeholder with grey background and dimension watermark without any imagery">
            </div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
    </ul>
</div>

Text Value Structured List

  1. Gadget Alpha

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  2. Gadget Bravo

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  3. Gadget Charlie

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

  4. Gadget Delta

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.

<div data-grid="col-12" class="c-structured-list">
    <ol class="f-column">
        <li class="f-row">
            <div data-grid="col-2 stack-2">Gadget Alpha</div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">Gadget Bravo</div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">Gadget Charlie</div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
        <li class="f-row">
            <div data-grid="col-2 stack-2">Gadget Delta</div>
            <div data-grid="col-10">
                <p class="c-paragraph-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt vehicula enim at rutrum. Donec vehicula auctor nulla, eget dapibus tellus semper eu.</p>
            </div>
        </li>
    </ol>
</div>