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

7.3.1.3.1 Linked Icon & Description

The Compound Icon and Text List Item that is linked an assoicated action is styled differently with a background hover effect.

Sub.ClassList.Grid.Item - Gridlist Item Classes

Data Elements:

Example

Default styling

Pass Your Boards with Confidence Nostrum et eveniet perspiciatis in mollitia et enim consequatur dolorem deserunt.

NOTE:

If a link is required to be include in the description keep it to a single link. If each item has links you can use the expaneded-click-area to improve hit areas of the links.

<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>

Code Sample

Copy Code