3.1 Sub.CMP

3.1.1 Sub.CMP.ProductMatrix

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

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

.special

this pathway color represents ACCSAP

ProductNameSAP

Product Tagline

September 13 - 21, 2025
November 15 - 23, 2025

Case Selection & Management

Go to SAP Page

.invt

this pathway color represents CATHSAP

ProductNameSAP

Product Tagline

September 13 - 21, 2025
November 15 - 23, 2025

Case Selection & Management

Go to SAP Page

.arr

this pathway color represents EPSAP

ProductNameSAP

Product Tagline

September 13 - 21, 2025
November 15 - 23, 2025

Case Selection & Management

Go to SAP Page

.hf

this pathway color represents HFSAP

ProductNameSAP

Product Tagline

September 13 - 21, 2025
November 15 - 23, 2025

Case Selection & Management

Go to SAP Page

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>

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

Code Sample

Copy Code

3.2 Sub.Lava

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

3.2.1 Lava Featured Content

Featured content for the lava component. Contains image, text and a CTA.

Example

Default styling

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

<h2 class="grid items_center justify_center p-x_5:lg p-x_4 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>

<h2 class="grid items_center justify_center p-x_5:lg p-x_4 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>

Code Sample

Copy Code

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

3.2.2 Lava Intro Text

Intro text content for lava pattern.

Example

Default styling

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.

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

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

Code Sample

Copy Code

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

3.2.3 Lava Title

Title and tagline for lava pattern.

Example

Default styling

About
The ACC

Transforming CV Care For All

<h1>About<br> The ACC</h1>
<p class="opacity_7 font_light">Transforming CV Care For All</p>

<h1>About<br> The ACC</h1>
<p class="opacity_7 font_light">Transforming CV Care For All</p>

Code Sample

Copy Code

3.3 Sub.Recipe

3.3.1 Sub.Recipe.LogoWall

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

3.3.1.1 Logo Wall Item

A single logo item for the logo wall.

Example

Default styling

ACC Argentina Chapter

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

Code Sample

Copy Code

3.3.2 Sub.Recipe.PriceTable

3.3.2.1 Sub.Recipe.PriceTable.Bento

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

3.3.2.1.1 Price Bento Price Card

The Bento Pricing Card is a flexible pricing presentation component designed for purchase plan options. It supports multiple price tiers and optional notes, accommodating varied member types and durations. This component ensures consistent styling, responsive behavior, and semantic clarity across different purchase contexts.

Use when: you need to visually present one or more pricing options with supporting content like membership type and terms.

Do not use when: displaying simple, single-line prices or ungrouped price information not related to purchasing tiers.

Example s

primary

Used for Member

primary

$900/5 year
purchase plan

or

$300/1 year
purchase plan

secondary

Used for Non-Member

secondary

$900/5 year
purchase plan

or

$300/1 year
purchase plan

accent

Used for Any Reduced Pricing

accent

$900/5 year
purchase plan

or

$300/1 year
purchase plan

NOTE:

This is a strict structured component so all cards must match eachother content models. Keep it Apples to Apples!

<li data-element="price-card" class="flex flex_column m_0 justify_start br_round bg_[modifier class]-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">[modifier class]</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_[modifier class]-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">[modifier class]</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>

Code Sample

Copy Code

Sub

3.1 Sub.CMP

3.1.1 Sub.CMP.ProductMatrix

3.1.1.1 Product Matrix Item

Example s

.special

ProductNameSAP

.invt

ProductNameSAP

.arr

ProductNameSAP

.hf

ProductNameSAP

NOTE:

3.2 Sub.Lava

3.2.1 Lava Featured Content

Example

Default styling

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

3.2.2 Lava Intro Text

Example

Default styling

3.2.3 Lava Title

Example

Default styling

About The ACC

3.3 Sub.Recipe

3.3.1 Sub.Recipe.LogoWall

3.3.1.1 Logo Wall Item

Example

Default styling

3.3.2 Sub.Recipe.PriceTable

3.3.2.1 Sub.Recipe.PriceTable.Bento

3.3.2.1.1 Price Bento Price Card

Example s

primary

$900/5 year purchase plan

$300/1 year purchase plan

secondary

$900/5 year purchase plan

$300/1 year purchase plan

accent

$900/5 year purchase plan

$300/1 year purchase plan

NOTE:

About
The ACC

$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