Templates
The following information outlines when and how to use the colors on the website.
The following information outlines when and how to build selections and pricing grid..
<div class="bg-light">
<div class="row">
<div class="col-12 col-md-4 lead">
<div class="card card-select card-body"><span class="lead">Traveler Cost</span></div>
</div>
<div class="col-6 col-md-4">
<div class="card card-select card-body">
<div class="form-group"><label for="medMax">Maximum Medical Coverage <a data-toggle="popover" data-content="Descriptive information to help the customer" data-sf-ec-immutable="">
<svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor"><title>More Information</title>
<use xlink:href="ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"></use></svg>
</a> </label>
<select class="form-control" id="medMax">
<option>$10,000</option>
<option>$50,000</option>
<option>$100,000</option>
<option>$500,000</option>
<option>$1,000,000</option>
<option>$2,000,000</option>
<option>$5,000,000</option>
</select>
</div>
</div>
</div>
<div class="col-6 col-md-4">
<div class="card card-select card-body">
<div class="form-group"><label for="deductible">Deductible
<svg class="text-blue mx-1" width="18" height="18" fill="currentColor"><title>Info</title>
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"></use></svg>
</label>
<select class="form-control" id="deductible">
<option>$0</option>
<option>$100</option>
<option>$500</option>
<option>$1,000</option>
<option>$2,500</option>
<option>$5,000</option>
</select>
</div>
</div>
</div>
</div><!--/row-->
<div class="cost-grid">
<div class="row no-gutters">
<div class="col-12 col-md-3"><div class="card card-insureds card-body d-flex justify-content-md-between"><strong>John (Primary)</strong> <span class="font-italic">Age: 43</span></div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$32.90</div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$36.50</div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$47.90</div></div>
<div class="col-12 col-md-3"><div class="card card-insureds card-body d-flex justify-content-md-between"><strong>Kelly</strong> <span class="font-italic">Age: 43</span></div></div>
<div class="col-4 col-md-3">;<div class="card card-benefit card-body">$30.90</div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$31.50</div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$41.90</div></div>
<div class="col-12 col-md-3"><div class="card card-insureds card-body d-flex justify-content-md-between"><strong>Joan</strong> <span class="font-italic">Age: 65</span></div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$72.00</div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$77.40</div></div>
<div class="col-4 col-md-3"><div class="card card-benefit card-body">$102.90</div></div>
</div>
</div>
</div>
<!--container-->