Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.2 Grid 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.Item - Icon and Header
Sub Components in Design:
    Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
    Data Elements:
      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:lg p_4:md p-x_3 p_4">
    <h2>Icon and Header with Link</h2>
    <ul class="columns_2:md columns_3:lg columns_1 gap-x_5:lg gap-x_4:md gap-x_3 gap-y_4 grid p-x_4:lg p-x_3:md p-x_0 ul_none">
        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>        <li class="flex flex_row items_center justify_start isolate relative c_accent-n1 h:c_accent-n3">
            <i class="c_inherit font_7 p-r_4 far fa-solid fa-flag-usa" aria-hidden="true"></i>
            <span class="font-size_up font_medium">
                <a rel="noopener noreferrer" class="expanded-click-area c_inherit not-link h:underline" target="_self" href="https://www.acc.org//Membership/Chapters">State Chapters</a>
            </span>
        </li>    </ul>
</div>
      Copy Code