Preview →

This PR makes a few modifications to (hopefully!) streamline and improve the functionality of the icon list.

First, I'd like to focus the icon list a use case that's closer in spirit to a conventional unordered list, except using an icon instead of a bullet. This means building for shorter lists, with only a few words or sentences per list item, or a slightly more robust list item, with a title and some accompanying text:

Default list

List with rich text

Next, I wanted to simplify the implementation for lists that use a custom size. I liked how you could pass a size variant into the list and it would update the icon and the text — but I didn't like the extra step of adding the usa-icon-list--title class. This PR changes the behavior, so that content inside of usa-icon-list--content gets the custom sizing. For example:

Default

<ul class="usa-icon-list">
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-green"> ... </div>
        <div class="usa-icon-list__content">
            Donate cash when possible.
        </div>
    </li>
    ...
</ul>

Large variant

<ul class="usa-icon-list usa-icon-list--size-lg">
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-green"> ... </div>
        <div class="usa-icon-list__content">
            Donate cash when possible.
        </div>
    </li>
    ...
</ul>

This custom sizing only applies to text directly inside the usa-icon-list__content element. Any block-level child of usa-icon-list__content gets initial styling. So, if you want to have custom styled text inside content, just put it in a p, h3, div, or whatever. You can add the usa-icon-list__title class to a block-level heading that should get the custom sizing:

<ul class="usa-icon-list usa-icon-list--size-lg">
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-green"> ... </div>
        <div class="usa-icon-list__content">
            <h3 class="usa-icon-list__title">Donate cash when possible.</h3>
            <p>Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery.</p>
        </div>
    </li>
    ...
</ul>

Styling controlled with span, em, strong, etc works as expected:

<ul class="usa-icon-list usa-icon-list--size-lg">
    <li class="usa-icon-list__item">
        <div class="usa-icon-list__icon text-green"> ... </div>
        <div class="usa-icon-list__content">
            <strong class="text-bold">Use cash.</strong> Donate cash when possible.
        </div>
    </li>
    ...
</ul>

Other changes

Responsive variants

Added responsive prefixing to the size variant. Larger sizes would be impractical for narrow widths, but devs should be able to access them when they're appropriate. So now you can add something like tablet:usa-icon-list--size-lg.

Rem sizing

I rebuilt some of the sizing and spacing Sass to use rem instead of px. This will help with responsiveness and accessibility, especially if users have custom font sizing set in their browser.

Size and spacing adjustments

I reduced the size and padding of the icons a bit, and reduced the size of the default title to the same as the text size, except bold.