Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/bespoke_all.css, line 1409

3.1.1.1 Product Matrix Item

This component represents a single SAP product within the Product Matrix. It includes a visually distinct header with branding, a title, and clinical focus. Event dates and curriculum topics are presented in vertically stacked sections, and a call-to-action link at the bottom directs users to the full SAP page. Background and text colors reflect clinical identity, aiding recognition and scanning. Grid and spacing utilities ensure responsive behavior across breakpoints.

Use this component inside a larger Product Matrix layout when promoting individual learning tracks. Ideal for overview pages or dashboards where clear segmentation by topic is required.

Example s

NOTE:

This component will render incorrectly if it is not within the parent grid that helps with its spacing and alignments.

<li class="topic-subgrid m_0 p_0 gap_1 gap_2:md relative">
    <div class="bg_acc-n2 grid items_center p_4 relative overflow_hidden isolation_isolate">
        <a href="~/link.aspx?_id=6ED43FF8C308457E9DA84DC0C4FEF02E&amp;_z=z" class="block c_acc-1 expanded-click-area h:c_acc-4 h:undecorated not-link">
            <h4 class="font_medium c_white lh_0 m_0 font-size_up-1 uppercase z_3"><span class="font_xbold c_[modifier class]-2">ProductName</span>SAP</h4>
            <span class="wrap c_white lh_2 font-size_down-1 block">Product Tagline</span>
            <i class="fa-solid fa-arrow-circle-right fa-3x absolute c_inherit h:c_inherit b_n3 r_n2 z_0" aria-hidden="true"></i>
        </a>
    </div>
    <div class="bg_[modifier class]-3 p-x_4 p-y_3 p-y_4:md">
        <ul class="ul_none m_0">
            <li class="relative"><strong>September 13 - 21, 2025</strong></li>
            <li class="relative"><strong>November 15 - 23, 2025</strong></li>
        </ul>
    </div>
    <div class="bg_[modifier class]-3 p-x_4 p-y_3 p-y_4:md">
        <ul class="ul_square m_0 p-l_4">
            <li>Case Selection &amp; Management</li>
        </ul>
    </div>
    <div class="bg_[modifier class]-3  font_n1 p-x_4 p-y_3 p-y_4:md relative">
        <a href="~/link.aspx?_id=6ED43FF8C308457E9DA84DC0C4FEF02E&amp;_z=z" class="grid items_center justify_center text_center c_acc-n1 h:c_acc-n3 expanded-click-area-after bg_white-1 h:bg_white-4 inset_0 absolute"><span> Go to SAP Page</span></a>
    </div>
</li>
Copy Code