Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

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

7.3.1.3.2 Icon & Description: Read More

The Read More Icon and Description is intentionally designed differntly.

Sub.Component.Common.ReadMoreArrow - Read More Arrow
Sub Components in Design:
    Sub.ClassList.Grid.Item - Gridlist Item Classes
    Data Elements:
      NOTE:
      This should be the design when you are including a read more action to go with a Grid List with Text and Descriptions. 
      <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>
      Copy Code