Source: dist/css/acc_boot.css, line 9521
7.3.2.2.3.2 Price Table SimpleCard Light
Price tables can be simplified to but always should have the associated action button.
Example s
.primary
Used for Member
primary
$860 /Annual Dues
- 150Application Fee
.secondary
Used for Non-Member
secondary
$860 /Annual Dues
- 150Application Fee
.accent
Used for Any Reduced Pricing
accent
$860 /Annual Dues
- 150Application Fee
<li data-element="data-table" class="bg_[modifier class]-4 c_black br_round relative color_inherit inherit_all p_4 p_5:md reading-typography shadow_bevel-light">
<header class="font_display font_4">
<h2 data-element="table-title" class="font-size_down-2 font_medium m-b_0 capitalize">[modifier class]</h2>
<h3 data-element="table-price" class="font-size_up-2 lh_2">
<span class="font_bold">$860</span>
<span>/Annual Dues</span>
</h3>
</header>
<main>
</main>
<hr class="br_dashed br_solid br_white-4 m-t_2">
<ul class="flex flex_column font-size_1 font_medium gap-y_3 m-l_4 p-b_4 p-x_3 ul_none">
<li class="text-indent_n1">
<span class="font_bold opacity_8"><em class="fa-solid fa-usd m-r_2 " aria-hidden="true"></em>150</span>Application Fee
</li>
</ul>
<footer class="m-b_n3:md m-t_auto">
<a class="btn btn-secondary" href="#">Join Now</a>
</footer>
<abbr title="United States Dollar" class="absolute b_4 block font_n1 font_xbold lh_0 m-r_2 opacity_5 r_4 z_1">USD</abbr>
</li>