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

7.3.1.2.2 Icon and Description with Link

The Compound Icon and Text List Item is a reusable component designed to present key content alongside a relevant visual icon. This pattern supports skimmability, clarity, and strong information hierarchy, making it ideal for benefit statements, feature lists, or modular marketing blocks.

Sub.ClassList.Grid.Item - Gridlist Item Classes

Data Elements:

Example

Default styling

Pass Your Boards with Confidence Nostrum et eveniet perspiciatis in mollitia et enim consequatur dolorem deserunt Action Link.

NOTE:

If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.

<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
    <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
    <div class="font-size_up text_center text_left:md">
        <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
            Pass Your Boards with Confidence
        </strong>
        <span class="block font-size_down opacity_8 c_black">
            <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class="expanded-click-area link" href="#">Action Link</a></strong>.
        </span>
    </div>
</li>

<li class="flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius">
    <i class="c_inherit-all font_7 self_center self_start:md p_4 p_0:md m-t_4 m-t_3:md p-r_4:md far fa-regular fa-graduation-cap" aria-hidden="true"></i>
    <div class="font-size_up text_center text_left:md">
        <strong class="block font_bold font_display not-link c_inherit-all lh_2  m-b_3 m-b_0:md" style="text-wrap-style: balance;">
            Pass Your Boards with Confidence
        </strong>
        <span class="block font-size_down opacity_8 c_black">
            <strong>Nostrum et eveniet</strong> perspiciatis in mollitia et enim consequatur dolorem deserunt <a class="expanded-click-area link" href="#">Action Link</a></strong>.
        </span>
    </div>
</li>

Code Sample

Copy Code