Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.2.2 Grid List with Descriptions

This component presents a list of highlighted information with descripition

Sub.Recipe.GridList.IconText.Item - Icon with Discription Sub.Recipe.GridList.IconText.Item - Icon with Discription with link Sub.Recipe.GridList.LinkedIconText.ItemReadMore - Icon with Read More
Sub Components in Design:
    Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
    Data Elements:

      Example

      Default styling

      Highlighted Content with Icon, Header, and Description. Links in descriptions optional

      • nihil amet distinctio Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..
      • Pass Your Boards with Confidence Nostrum et eveniet perspiciatis in mollitia et enim consequatur dolorem deserunt Action Link.
      • nihil amet distinctio Rerum modi quis Nobis id a harum enim rem in ipsum. Natus rem est dolorem..
      • Read More about our Member Benefits. 
      <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 Content with Icon, Header, and Description. Links in descriptions optional</h2>
    <div class="wrapper-container">
        <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-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-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-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">
                <span class="fa-stack font_6 order_2">
                        <i class="fa-ellipsis fas fa-stack-1x" aria-hidden="true"></i>
                        <i class="fa-chevron-right fa-solid fa-stack-1x" aria-hidden="true" style=" left: 20%; font-size: 115%; "></i>
                </span>    <div class="font-size_up text_center text_left:md order_1">
                    <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;">
                        Read More
                    </strong>
                    <span class="block font-size_down opacity_8 c_black">
                        about our <a class="expanded-click-area link" href="#">Member Benefits</a>.
                    </span>
                </div>
            </li>       </ul>
    </div>
</div>
      Copy Code