Business Loans Accounts Style 02 Car Loans Checking Credit Cards Digital Banking Accounts Style 01 Home Equity Loans Insurance Investing Membership Mortgage Personal Loans RV, Boat, Motorcycle Loans Savings

Lists

Lists

.a-list

Overview

Description

Lists are groups of content that use bullets or numbers to organize content. They are easily scannable by users and can help SEO efforts, so use them regularly.

Best Practices

  • Use lists often.
  • Use lists to highlight the most important parts of a piece of content.
  • Use to provide a table of contents for larger sections of content.
  • Keep list items short to avoid line breaks.

Schema

Name Description Type Default Value Option(s)
list.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-list--checked a-list--3-columns

Unordered List

Unordered List

Description

The default list style, uses circles to denote list items. Use this style if you are unsure which to uses.

Example

  • Nulla vitae elit libero, a pharetra augue.
  • Curabitur blandit tempus porttitor.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

Ordered List

Ordered List

Description

Shows list items in numerical order. Use to show steps in a process or a sequence of content.

Example

  1. Nulla vitae elit libero, a pharetra augue.
  2. Curabitur blandit tempus porttitor.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Checklist

Checklist

.a-list--checked

Description

An unordered list with check marks instead of circles to show list items. Useful for listing out benefits or a product or service.

Example

  • Nulla vitae elit libero, a pharetra augue.
  • Curabitur blandit tempus porttitor.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

Checklist in Columns

Checklist in Columns

.a-list--checked.a-list--3-columns

Description

An unordered list with check marks. Use when there are a large number of items in a list.

Example

  • Nulla vitae elit libero, a pharetra augue.
  • Curabitur blandit tempus porttitor.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vestibulum id ligula porta felis euismod semper.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.