Source: dist/css/acc_boot.css, line 8568

6.6.1 Lists with Icons

This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the list combines an icon with a text description.

Example

Default styling

Highlighted Title

Free digital access to the JACC Journals
Read about more of our Member Benifits

NOTE:

The read more is treated differently.

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5">
    <h2>Highlighted Title</h2>
    <ul class="columns_2:md gap-x_6 gap-y_4 grid p-x_4:lg ul_none">
        <li class="flex flex_row items_start justify_start">
            <i class="c_accent font_7 m-t_3 p-r_4 far fa-regular fa-newspaper" aria-hidden="true"></i>
            <div class="font-size_up">
                <strong>Free</strong> digital access to the <a href="http://www.onlinejacc.org/" target="_blank"><em>JACC</em> Journals</a>
            </div>
        </li>
        <!-- ... Other list items here ... -->
        <li class="flex flex_row items_start justify_start gap_3 items_center">
            <div class="font-size_up">
                Read about more of our
                <a href="/Membership/Join-Us/Benefits" target="_blank">Member Benifits</a>
            </div>
            <div class="flex flex_row  m-l_3">
                <i class="c_accent font_6 m-t_3 fas fa-solid fa-ellipsis " aria-hidden="true"></i>
                <i class="c_accent fa-chevron-right fa-solid fas font_6 m-l_n3 m-t_3" aria-hidden="true"></i>
            </div>
        </li>
    </ul>
</div>

<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5">
    <h2>Highlighted Title</h2>
    <ul class="columns_2:md gap-x_6 gap-y_4 grid p-x_4:lg ul_none">
        <li class="flex flex_row items_start justify_start">
            <i class="c_accent font_7 m-t_3 p-r_4 far fa-regular fa-newspaper" aria-hidden="true"></i>
            <div class="font-size_up">
                <strong>Free</strong> digital access to the <a href="http://www.onlinejacc.org/" target="_blank"><em>JACC</em> Journals</a>
            </div>
        </li>
        <!-- ... Other list items here ... -->
        <li class="flex flex_row items_start justify_start gap_3 items_center">
            <div class="font-size_up">
                Read about more of our
                <a href="/Membership/Join-Us/Benefits" target="_blank">Member Benifits</a>
            </div>
            <div class="flex flex_row  m-l_3">
                <i class="c_accent font_6 m-t_3 fas fa-solid fa-ellipsis " aria-hidden="true"></i>
                <i class="c_accent fa-chevron-right fa-solid fas font_6 m-l_n3 m-t_3" aria-hidden="true"></i>
            </div>
        </li>
    </ul>
</div>

Code Sample

Copy Code