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

7.3.1.1.1 Grouping List Item

A flexible layout pattern used to present concise feature groupings or content benefits in a visually structured way. Each group includes icon, group heading, and a short list of actionable or informative bullet points. Use this pattern to highlight service categories, user benefits, or grouped resources.

The consistent visual hierarchy ensures scannability and reinforces clarity, making it effective for marketing pages and dashboards.

Sub.ClassList.Grid.Item - Gridlist Item Classes

Data Elements:

Example

Default styling

Distinctio et Consequatur

Non sed quaerat non repudiandae ipsa.
Aut consequatur inventore ipsum numquam tempore saepe.
In aut delectus cum laboriosam facilis qui neque sed corporis similique.
Possimus molestiae sint molestiae occaecati praesentium eaque maxime voluptatem sint qui.

NOTE:

Each list time should be distinct and Only ONE Link

<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-cup-straw" aria-hidden="true"></i>
   <div class="font-size_up">
    <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
        Distinctio et Consequatur
    </div>
        <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
            <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
            <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
            <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
            <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
          </ul>
    </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-cup-straw" aria-hidden="true"></i>
   <div class="font-size_up">
    <div class="font_bold not-link c_inherit-all lh_2 text_center text_left:md m-b_3 m-b_0:md" style="text-wrap-style: balance;">
        Distinctio et Consequatur
    </div>
        <ul class="ul_square marker_accent font-size_down opacity_8 c_black">
            <li>Non sed quaerat <a class="link" href="#">non repudiandae ipsa.</a></li>
            <li>Aut consequatur inventore ipsum <a class="link" href="#">numquam tempore saepe.</a></li>
            <li>In aut delectus cum laboriosam facilis qui neque <a class="link" href="#">sed corporis similique.</a></li>
            <li>Possimus molestiae sint molestiae occaecati praesentium eaque maxime <a class="link" href="#">voluptatem sint qui.</a></li>
          </ul>
    </div>
</li>

Code Sample

Copy Code