Templates

Overview

The following information outlines when and how to use the colors on the website.

Cost Grid

The following information outlines when and how to build selections and pricing grid..

Traveler Cost
John (Primary) Age: 43
$32.90
$36.50
$47.90
Kelly Age: 43
$30.90
$31.50
$41.90
Joan Age: 65
$72.00
$77.40
$102.90

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