Source: dist/css/acc_boot.css, line
8944
5.2.1
Grid List with Grouped List
This component presents a list of highlighted information, each item is accompanied by an icon. Each item in the grid combines an icon with the corrisponding content.
Sub.Recipe.GridList.GroupingList.Item - Icon and Bulleted List
Sub
Components in Design:
Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
Data Elements:
<div class="bg_black-1 br_radius m-b_4 m-b_5:lg m-x_n4 p_5:lg p_4:md p-x_3 p_4">
<h2>Highlighted Grouped List with Category Icon and Header</h2>
<ul class="columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none">
<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> <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> </ul>
</div>