Arches: Arches

Arches:Arches

Multi Product Brand Style System by the American College of Cardiology

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

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

    Annual ABIM MOC fee*

    • secondary

    Used for Non-Member

  • secondary

    $900/5 year
    purchase plan

    or

    $300/1 year
    purchase plan

    Annual ABIM MOC fee*

    • accent

    Used for Any Reduced Pricing

  • accent

    $900/5 year
    purchase plan

    or

    $300/1 year
    purchase plan

    Annual ABIM MOC fee*
    • 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>
    Copy Code