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

7.3.1.2.1 Icon and Description

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

nihil amet distinctio Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..

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-gears" 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;">
           nihil amet distinctio
        </strong>
        <span class="block font-size_down opacity_8 c_black">
            <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</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-gears" 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;">
           nihil amet distinctio
        </strong>
        <span class="block font-size_down opacity_8 c_black">
            <strong>Rerum modi quis</strong> Nobis id a harum enim rem in ipsum. Natus rem est dolorem.</strong>.
        </span>
    </div>
</li>

Code Sample

Copy Code