Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

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

2.1.1 Product Matrix

The Product Matrix component displays SAP product tracks in a responsive grid layout, allowing users to quickly view program names, focus areas, event dates, and relevant topics. Each product is color-coded according to its associated clinical pathway for immediate recognition and clarity. Subgrids are employed within each product block to ensure content stacks accessibly and cleanly from desktop to mobile views, maintaining visual hierarchy and legibility.

This component is ideal for organizing multiple learning tracks or modules with aligned schedules and curriculum. Use when visual grouping and intuitive scanning of multiple product options are required.

Sub.CMP.ProductMatrix.Item - Product Matrix Item
Sub Components in Design:

    Example

    Default styling

    Remind Yourself of the 2025 CMP Dates & Topics

    <div class="copy-me wrapper-container">
    <h2>Remind Yourself of the 2025 CMP Dates &amp; Topics</h2>
    <ul class="product-grid ul_none m_0 gap_2 gap_3:md columns_4:lg columns_2:md columns_1 m-t_4:lg m-t_2 font_1:lg font_0">
        <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_special-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_special-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_special-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_special-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>        <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_arr-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_arr-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_arr-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_arr-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>        <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_chd-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_chd-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_chd-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_chd-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>        <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_vasc-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_vasc-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_vasc-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_vasc-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>    </ul>
</div>
    Copy Code