1.0.3 • Published 8 years ago
@moodxd/component-card v1.0.3
MoO Card
Card is how product information, such as price, features and plan selection, is handled. There are three versions of the Card:
Standard
<div class="Card">
<div class="Card-header">
<h1 class="Card-heading">Cancer, Heart Attack & Stroke Insurance</h1>
</div>
<div class="Card-body">
<p>Provides benefits in a lump-sum payment upon diagnosis of cancer, heart attack or stroke.</p>
<ul>
<li>Benefit Amounts: $10,000 to $100,000</li>
<li>Policy Term: 10-, 15-, 20-, and 30-years or Lifetime</li>
<li>Coverage Type: Individual, Individual Plus Child/Children, or Family</li>
<li>Policy Issue Ages: 18-89</li>
</ul>
<a class="Button Button--teal" href="#">Contact an agent</a>
</div>
</div>Standard with Feature List
Contains a .FeatureList of product information links with a select plan .Button call to action
<div class="Card">
<div class="Card-header">
<h3 class="Card-heading">Card</h3>
</div>
<div class="Card-body">
<div class="FeatureList u-cf">
<p class="FeatureList-heading">Covers</p>
<ul class="FeatureList-list">
<li class="FeatureList-row" data-glossary-id="basic-benefits">
<a class="FeatureList-item">Basic Benefits</a>
</li>
<li class="FeatureList-row" data-glossary-id="skilled-nursing-facility-coinsurance">
<div class="FeatureList-itemAppend">NA</div>
<a class="FeatureList-item">Skilled Nursing Facility Coinsurance</a>
</li>
<li class="FeatureList-row is-disabled" data-glossary-id="medicare-part-a-deductible">
<div class="FeatureList-itemAppend">NA</div>
<a class="FeatureList-item">Medicare Part A Deductible <small>(Hospital Insurance)</small>
</a>
</li>
<li class="FeatureList-row is-disabled" data-glossary-id="medicare-part-b-deductible">
<div class="FeatureList-itemAppend">NA</div><a class="FeatureList-item">Medicare Part B Deductible <small>(Medical Insurance)</small>
</a>
</li>
<li class="FeatureList-row is-disabled" data-glossary-id="medicare-part-b-excess-charges">
<div class="FeatureList-itemAppend">NA</div>
<a class="FeatureList-item">Medicare Part B Excess Charges</a>
</li>
<li class="FeatureList-row is-disabled" data-glossary-id="foreign-travel-emergency">
<div class="FeatureList-itemAppend">NA</div>
<a class="FeatureList-item">Foreign Travel Emergency</a>
</li>
</ul>
<a class="Button Button--teal" href="apply.php?p=A">Select this Plan</a>
</div>
</div>
</div>Quote
Contains the Standard and adds .Price elements that display a product’s monthly and/or yearly cost
<div class="Card Card--quote">
<div class="Card-header">
<h3 class="Card-heading">Plan A</h3>
</div>
<div class="Card-body">
<div class="Card-benefit Quote-sentence">
<div class="Field">
<input class="Input" value="$10,000" />
</div>
<p class="u-inlineBlock">benefit</p>
</div>
<div class="Card-term Quote-sentence">
<div class="Dropdown">
<a href="#change-plan" class="Dropdown-trigger Button Button--outline" data-openable>
<label class="Dropdown-label">Change Plan</label>
<img class="Dropdown-arrow" src="//cdn.mutualofomaha.com/images/corporate/pixel.png">
</a>
<div id="change-plan" class="Dropdown-listWrap">
<ul class="Dropdown-list selection-list">
<li class="Dropdown-item">
<a href="#" class="Dropdown-itemLink" data-plan="A" data-dollar="156" data-cents="98">
<div class="u-floatLeft">
Plan A
</div>
<div class="u-floatRight">
$156.98
</div>
</a>
</li>
<li class="Dropdown-item is-selected">
<a href="#" class="Dropdown-itemLink" data-plan="F" data-dollar="227" data-cents="51">
<div class="u-floatLeft">
Plan F
</div>
<div class="u-floatRight">
$227.51
</div>
</a>
</li>
<li class="Dropdown-item">
<a href="#" class="Dropdown-itemLink" data-plan="G" data-dollar="182" data-cents="44">
<div class="u-floatLeft">
Plan G
</div>
<div class="u-floatRight">
$182.44
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="Card-ageCoverage">Coverage to age 80</div>
<div class="Price">
<span class="Price-amount">$156.98</span>
<span class="Price-period">per<br /> month</span>
</div>
</div>
<a class="Button Button--teal" href="#">Contact an Agent</a>
</div>Premium
Contains an alternate version of the .Price layout while adding .Dropdown elements so a customer can switch the selected plan. The .Dropdown includes the plan’s name and estimated price. After selecting a new plan, the page refreshes or updates all plan information displayed
<div class="Card Card--planPremium">
<header class="Card-header">
<h3 class="Card-heading">
Your Plan
</h3>
</header>
<div class="Card-body">
<div class="Card--planPremium-plan">
Plan F
</div>
<div class="Price">
<span class="Price-amount">$227.51*</span>
<span class="Price-period">per<br>month</span>
<span class="Price-periodAbbrev">/mo.</span>
</div>
<div class="Dropdown">
<a href="#change-plan" class="Dropdown-trigger Button Button--outline" data-openable>
<label class="Dropdown-label">Change Plan</label>
<img class="Dropdown-arrow" src="//cdn.mutualofomaha.com/images/corporate/pixel.png">
</a>
<div id="change-plan" class="Dropdown-listWrap">
<ul class="Dropdown-list selection-list">
<li class="Dropdown-item">
<a href="#" class="Dropdown-itemLink" data-plan="A" data-dollar="156" data-cents="98">
<div class="u-floatLeft">
Plan A
</div>
<div class="u-floatRight">
$156.98
</div>
</a>
</li>
<li class="Dropdown-item is-selected">
<a href="#" class="Dropdown-itemLink" data-plan="F" data-dollar="227" data-cents="51">
<div class="u-floatLeft">
Plan F
</div>
<div class="u-floatRight">
$227.51
</div>
</a>
</li>
<li class="Dropdown-item">
<a href="#" class="Dropdown-itemLink" data-plan="G" data-dollar="182" data-cents="44">
<div class="u-floatLeft">
Plan G
</div>
<div class="u-floatRight">
$182.44
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>1.0.6-alpha.5334747e
8 years ago
1.0.3
8 years ago