2.1 Recipes.CMP

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

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

ProductNameSAP
Product Tagline
- September 13 - 21, 2025
- November 15 - 23, 2025
- Case Selection & Management
Go to SAP Page
ProductNameSAP
Product Tagline
- September 13 - 21, 2025
- November 15 - 23, 2025
- Case Selection & Management
Go to SAP Page
ProductNameSAP
Product Tagline
- September 13 - 21, 2025
- November 15 - 23, 2025
- Case Selection & Management
Go to SAP Page
ProductNameSAP
Product Tagline
- September 13 - 21, 2025
- November 15 - 23, 2025
- Case Selection & Management
Go to SAP Page

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

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

Code Sample

Copy Code

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

2.2 Logo Wall

Logo Wall

Sub.Recipe.LogoWall.Item - Logo Wall Item

Sub Components in Design:

Example

Default styling

<div data-note="Copy Me">
    <section>
        <ul class="grid-last-row-center p-t_0 p_4 ul_none no-marker">
            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>        </ul>
    </section>
</div>

<div data-note="Copy Me">
    <section>
        <ul class="grid-last-row-center p-t_0 p_4 ul_none no-marker">
            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>            <li class="item bg_black-_05 br_1 br_black-_01 br_round br_solid  p-b_4 relative  h:bg_black-1 ">
                <a data-name="sponsor__name" class="expanded-click-area undecorated flex flex_column gap-y_4:lg gap-y_3:md gap-y_2" target="_blank" href="https://www.alnylam.com/" rel="noopener">
                    <header class="bg_white br_radius  m-x_4:lg m_3 m-b_2  p_3 shadow_overlap-light w_auto">
                        <div class="relative aspect_16x9 grid columns_1 rows_1 items_center"><img decoding="async" alt="Logo of ACC Argentina Chapter" class="w_90 m-x_auto self_center bg_contain" src="../img/styleguide/logo-8.svg"></div>
                    </header>
                    <div class="c_primary-n3 font_2:lg font_0:md font_n1 font_display font_regular lh_1 p-x_4 text_center undecorated">ACC Argentina Chapter</div>
                </a>
            </li>        </ul>
    </section>
</div>

Code Sample

Copy Code

2.3 Recipes.PriceTable

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

2.3.1 Triple Pricing Bento

In web or UI design, this approach visually arranges content into clearly defined blocks or modules—usually of equal or complementary sizes—within a grid. It helps present multiple options, categories, or pieces of information in a compact, organized, and visually balanced way, often enhancing scannability and user choice.

Use this component to display structured pricing options for multiple membership types. It visually distinguishes tiers like Member, Nonmember, and Fellows in Training or Emeritus Members using clear headings, large pricing, and consistent formatting.

Adapts layout responsively from side-by-side (desktop) to stacked (mobile).
Color-coded backgrounds improve segmentation.
Use when side-by-side price comparisons are needed.
Avoid when only one price is shown — use a simple card instead.

Sub.Recipe.PriceTable.Bento.Card - Price Card

Sub Components in Design:

Example

Default styling

primary

$900/5 year
purchase plan

or

$300/1 year
purchase plan

Annual ABIM MOC fee^*
secondary

$900/5 year
purchase plan

or

$300/1 year
purchase plan

Annual ABIM MOC fee^*
accent

$900/5 year
purchase plan

or

$300/1 year
purchase plan

Annual ABIM MOC fee^*

<ul class="gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg">
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">primary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_secondary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">secondary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_accent-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">accent</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li></ul>

<ul class="gap_4 gap_4:md gap_5:lg ul_none triple-bento font_n2 font_n1:md font_0:lg">
<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_primary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">primary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_secondary-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">secondary</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li><li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_accent-n2 p_5:md p_4 c_white-8 shadow_bevel-bold reading-typography  color_inherit">
    <header item-label="price-tier" class="items_top m-b_3:md m-b_4">
        <h2 data-element="price-card-title" class="font_xbold font_display m-y_0 uppercase font_3:lg font_2:md font_1 lh_0">accent</h2>
    </header>
    <main class="m-t_auto">
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$900</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">5 year <br>purchase plan </span></h3>
        </div>
        <div class="c_inherit flex flex_row font_display font_medium m_0 p-y_3:md p-y_2 opacity_8 m-x_n3">
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
            <span class="flex_shrink p-x_3 lh_1 text_center">
                or
            </span>
            <span class="flex_auto grid">
                <span class="br-t_1 br-tl_radius br_inherit br_solid self_center"></span>
            </span>
        </div>
        <div item-label="price-cost-breakdown">
            <h3 class="flex flex_row font_8:lg font_4 font_6:md gap_2 items_center lh_2 nowrap"><span class="font_bold">$300</span><span class="font_light">/</span><span class="font_n1 font_0:lg font_medium lh_0 m-l_2 self_center wrap">1 year <br />purchase plan </span></h3>
        </div>
    </main>
    <footer class="m-b_n3:md m-t_auto"><div><i class="fa-solid fa-plus p-r_3" aria-hidden="true"></i>Annual ABIM MOC fee<sup class="font_bold">*</sup></div></footer>
</li></ul>

Code Sample

Copy Code

2.4 Recipes.Structures

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

2.4.1 Lava Pattern

This pattern presents a flowing, visually distinctive section used for storytelling or high-impact messaging. Includes image, header, subtext, and optional CTA.

Use for Anchor Pages that are at the Secondary Level of ACC.org Structure (Education, Guidelines, About).
Do not overuse; reserved for distinct thematic emphasis.

Sub.Recipe.PriceTable.Bento.Card - Price Card

Sub Components in Design:

Example

Default styling

About
The ACC

Transforming CV Care For All

ACC Welcomes New President Christopher M. Kramer, MD, FACC, Installs New Officers and Trustees

The ACC welcomed its newest officers and members of the Board of Trustees to their new roles on March 31.

Learn More

The American College of Cardiology (ACC) envisions a world where science, knowledge and innovation optimize cardiovascular care and outcomes.

We believe in the power of community. With more than 60,000 members worldwide spanning the entire cardiovascular team, we serve as the professional home for clinicians and researchers seeking the latest science, research and education. United with our members, chapters and global cardiovascular partners, we are focused on transforming cardiovascular care and improving heart health for all.

<div grid-template="hero-area" class="grid columns_5 rows_4 br_round relative m-b_5:lg m-b_4 isolation_isolate reading-typography font-size_up" style="--custom-font-size-up: 1.125;">
    <div grid-area="background" class=" hero-color-splash br_round relative z_0"></div>
    <div grid-area="breadcrumb" class="grid justify_start relative">
        <nav
            class="bg_white br-br_round grid  inline-block isolation_isolate items_center p-r_5:lg p-x_4 p-r_5  p-y_3 relative">
            <a href="https://www.acc.org/" class="h:c_acc h:underline font_bold c_acc expanded-click-area "><i
                    class="fas fa-chevron-left" aria-hidden="true"></i> <i class="fas fa-home"
                    aria-hidden="true"></i></a>
            <span class="curve"></span>
            <span class="curve alt"></span>
        </nav>
    </div>
    <div grid-area="title"
        class="colum_all row-start_1 row-end_3 color_inherit reading-typography color_inherit c_white z_1 font-size_up"
        style="--custom-font-size-up: 1.125;">
        <h1>About<br> The ACC</h1>
        <p class="opacity_7 font_light">Transforming CV Care For All</p>    </div>
    <div class="bg_white p-t_4 p-l_4 br-tl_round" grid-area="cta">
        <div class="reading-typography color_inherit c_white linear-gradient_custom p_4 p-y_5:lg br_round"
            style="--start-color:#0c152a; --end-color:#172d65; --orgin:to left top;  --custom-font-size-up: 1.06;">
            <h2 class="grid items_center justify_center p-x_5 m-b_2:md m-b_2">
                <img class="br_round inline-block m-auto m-x_auto max-w_10 max-w_15:md r_3 relative w_100" src="https://www.acc.org//-/media/Non-Clinical/Images/2023/03/03/2023-ACC-Leadership-Headshots/Kramer-Christopher-M-600x600.jpg" alt="ACC President Christopher M. Kramer, MD, FACC"></h2>
            <div class="p-x_4:lg p-x_3:md">
                <h3 class="opacity_9"><strong>ACC Welcomes New President Christopher M. Kramer, MD, FACC, Installs New Officers and Trustees</strong></h3>
                <p class="opacity_7">The ACC welcomed its newest officers and members of the Board of Trustees to their new roles on March 31.</p>
                <div class="grid items_center justify_center">
                    <a href="/About-ACC/Leadership/Officers-and-Trustees" class="btn bg_acc-5 h:bg_acc-3 c_acc h:c_acc-n3 item_center self_center inline-block">Learn More</a>
                </div>
            </div>        </div>
    </div>
    <div grid-area="introtext" class="reading-typography p-t_5 p-x_4:md" style="--custom-font-size-up: 1.09;">
        <p>The American College of Cardiology (ACC) envisions a world where science, knowledge and innovation optimize cardiovascular care and outcomes.</p>
        <p>We believe in the power of community. With more than 60,000 members worldwide spanning the entire cardiovascular team, we serve as the professional home for clinicians and researchers seeking the latest science, research and education. United with our members, chapters and global cardiovascular partners, we are focused on transforming cardiovascular care and improving heart health for all. </p>    </div>
    <span grid-area="CTA-curve-tr" class="curve row-end_n5 row-end_4:md col-end_n1 bg_white rotate_270 b_n1 r_n1"></span>
    <span grid-area="CTA-curve-bl" class="b_n1 bg_white col-end_4:md col-end_n4  curve r_n1 rotate_270 row-end_n2:md row-end_n3 "></span>
</div>

<div grid-template="hero-area" class="grid columns_5 rows_4 br_round relative m-b_5:lg m-b_4 isolation_isolate reading-typography font-size_up" style="--custom-font-size-up: 1.125;">
    <div grid-area="background" class=" hero-color-splash br_round relative z_0"></div>
    <div grid-area="breadcrumb" class="grid justify_start relative">
        <nav
            class="bg_white br-br_round grid  inline-block isolation_isolate items_center p-r_5:lg p-x_4 p-r_5  p-y_3 relative">
            <a href="https://www.acc.org/" class="h:c_acc h:underline font_bold c_acc expanded-click-area "><i
                    class="fas fa-chevron-left" aria-hidden="true"></i> <i class="fas fa-home"
                    aria-hidden="true"></i></a>
            <span class="curve"></span>
            <span class="curve alt"></span>
        </nav>
    </div>
    <div grid-area="title"
        class="colum_all row-start_1 row-end_3 color_inherit reading-typography color_inherit c_white z_1 font-size_up"
        style="--custom-font-size-up: 1.125;">
        <h1>About<br> The ACC</h1>
        <p class="opacity_7 font_light">Transforming CV Care For All</p>    </div>
    <div class="bg_white p-t_4 p-l_4 br-tl_round" grid-area="cta">
        <div class="reading-typography color_inherit c_white linear-gradient_custom p_4 p-y_5:lg br_round"
            style="--start-color:#0c152a; --end-color:#172d65; --orgin:to left top;  --custom-font-size-up: 1.06;">
            <h2 class="grid items_center justify_center p-x_5 m-b_2:md m-b_2">
                <img class="br_round inline-block m-auto m-x_auto max-w_10 max-w_15:md r_3 relative w_100" src="https://www.acc.org//-/media/Non-Clinical/Images/2023/03/03/2023-ACC-Leadership-Headshots/Kramer-Christopher-M-600x600.jpg" alt="ACC President Christopher M. Kramer, MD, FACC"></h2>
            <div class="p-x_4:lg p-x_3:md">
                <h3 class="opacity_9"><strong>ACC Welcomes New President Christopher M. Kramer, MD, FACC, Installs New Officers and Trustees</strong></h3>
                <p class="opacity_7">The ACC welcomed its newest officers and members of the Board of Trustees to their new roles on March 31.</p>
                <div class="grid items_center justify_center">
                    <a href="/About-ACC/Leadership/Officers-and-Trustees" class="btn bg_acc-5 h:bg_acc-3 c_acc h:c_acc-n3 item_center self_center inline-block">Learn More</a>
                </div>
            </div>        </div>
    </div>
    <div grid-area="introtext" class="reading-typography p-t_5 p-x_4:md" style="--custom-font-size-up: 1.09;">
        <p>The American College of Cardiology (ACC) envisions a world where science, knowledge and innovation optimize cardiovascular care and outcomes.</p>
        <p>We believe in the power of community. With more than 60,000 members worldwide spanning the entire cardiovascular team, we serve as the professional home for clinicians and researchers seeking the latest science, research and education. United with our members, chapters and global cardiovascular partners, we are focused on transforming cardiovascular care and improving heart health for all. </p>    </div>
    <span grid-area="CTA-curve-tr" class="curve row-end_n5 row-end_4:md col-end_n1 bg_white rotate_270 b_n1 r_n1"></span>
    <span grid-area="CTA-curve-bl" class="b_n1 bg_white col-end_4:md col-end_n4  curve r_n1 rotate_270 row-end_n2:md row-end_n3 "></span>
</div>

Code Sample

Copy Code

Recipes

2.1 Recipes.CMP

2.1.1 Product Matrix

Sub Components in Design:

Example

Default styling

Remind Yourself of the 2025 CMP Dates & Topics

ProductNameSAP

ProductNameSAP

ProductNameSAP

ProductNameSAP

2.2 Logo Wall

Sub Components in Design:

Example

Default styling

2.3 Recipes.PriceTable

2.3.1 Triple Pricing Bento

Sub Components in Design:

Example

Default styling

$900/5 year purchase plan

$300/1 year purchase plan

$900/5 year purchase plan

$300/1 year purchase plan

$900/5 year purchase plan

$300/1 year purchase plan

2.4 Recipes.Structures

2.4.1 Lava Pattern

Sub Components in Design:

Example

Default styling

About The ACC

ACC Welcomes New President Christopher M. Kramer, MD, FACC, Installs New Officers and Trustees

$900/5 year
purchase plan

$300/1 year
purchase plan

$900/5 year
purchase plan

$300/1 year
purchase plan

$900/5 year
purchase plan

$300/1 year
purchase plan

About
The ACC