Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

5.2.3 Grid List with Linked Descriptions

This component presents linked description with a hover effect to help each item showcase it is clickable.

Sub.Recipe.GridList.IconText.Item - Linked Icon and Text
Sub Components in Design:
    Sub.ClassList.Grid.TripleXL - GridList Triple Split on XL
    Data Elements:

      Example

      Default styling

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

      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>Linked 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 h:bg_primary-4">
                <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>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong 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;">
                        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.
                    </span>
                </a>
            </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 h:bg_primary-4">
                <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>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong 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;">
                        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.
                    </span>
                </a>
            </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 h:bg_primary-4">
                <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>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong 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;">
                        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.
                    </span>
                </a>
            </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 h:bg_primary-4">
                <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>
                <a  class="expanded-click-area not-link h:undecorated font-size_up block" href="#">
                    <strong 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;">
                        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.
                    </span>
                </a>
            </li>        </ul>
    </div>
</div>
      Copy Code