Source: dist/css/acc_boot.css, line
9246
5.5.3
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:
<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>