src/loan-comparison/_results.html
<section class="comparison-results content-l">
<div class="content-l_col-3-4 content-l_col">
<!-- hide these from screen readers with aria-hidden="true" since they are not in the correct source order -->
<header class="u-mb20 u-mt20">
<div class="input-headers" aria-hidden="true">
<div class="comparison-input-column"></div>
<div class="comparison-input-column comparison-input-column-a"><h3>Scenario A</h3></div>
<div class="comparison-input-column comparison-input-column-b"><h3>Scenario B</h3></div>
</div>
</header>
<table class="lc-results-table expandable expandable__table expandable__no-bg expandable__expanded">
<thead class="u-visually-hidden">
<tr>
<th>Costs</th>
<th>Scenario A</th>
<th>Scenario B</th>
<th>Notes</th>
</tr>
</thead>
<thead class="expandable_target expandable_header">
<tr>
<th scope="row" class="lc-primary-result-heading">
<h4 class="results-section-heading">
<span class="cf-icon cf-icon-mortgage"></span>
Total cash to close
<span class="expandable_header-right expandable_link">
<span class="expandable_cue-open">
<span class="u-visually-hidden">Show</span>
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
<span class="u-visually-hidden">Hide</span>
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</h4>
</th>
<td class="lc-primary-result closing-costs-display-a lc-result-a lc-result">
$3,000
</td>
<td class="lc-primary-result closing-costs-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
</thead>
<tbody class="expandable_content">
<tr class="result__main">
<th scope="row">
<h5>Down Payment <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="down-payment-display-a lc-result-a lc-result">
</td>
<td class="down-payment-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Fees charged by lender <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="lender-fees-display-a lc-result-a lc-result">
</td>
<td class="lender-fees-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__sub">
<th scope="row">
<h6>Discount points or credits</h6>
</th>
<td class="discount-display-a lc-result-a lc-result">
</td>
<td class="discount-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__sub">
<th scope="row">
<h6>Origination and processing fees</h6>
</th>
<td class="processing-fees-display-a lc-result-a lc-result">
</td>
<td class="processing-fees-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Third party fees <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="third-party-fees-display-a lc-result-a lc-result">
</td>
<td class="third-party-fees-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__sub">
<th scope="row">
<h6>Third Party Services</h6>
</th>
<td class="third-party-services-display-a lc-result-a lc-result">
</td>
<td class="third-party-services-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__sub">
<th scope="row">
<h6>Mortgage Insurance</h6>
</th>
<td class="mortgage-insurance-display-a lc-result-a lc-result">
</td>
<td class="mortgage-insurance-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Taxes and government fees <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="taxes-gov-fees-display-a lc-result-a lc-result">
</td>
<td class="taxes-gov-fees-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Prepaid expenses <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="prepaid-expenses-display-a lc-result-a lc-result">
</td>
<td class="prepaid-expenses-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Initial escrow deposit <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="initial-escrow-display-a lc-result-a lc-result">
</td>
<td class="initial-escrow-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
</tbody><!-- .expandable_content -->
</table>
<table class="lc-results-table expandable expandable__table expandable__no-bg expandable__expanded">
<thead class="u-visually-hidden">
<tr>
<th>Costs</th>
<th>Scenario A</th>
<th>Scenario B</th>
<th>Notes</th>
</tr>
</thead>
<thead class="expandable_target expandable_header">
<tr>
<th scope="row" class="lc-primary-result-heading">
<h4 class="results-section-heading">
<span class="cf-icon cf-icon-date"></span>
Monthly payment
<span class="expandable_header-right expandable_link">
<span class="expandable_cue-open">
<span class="u-visually-hidden">Show</span>
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
<span class="u-visually-hidden">Hide</span>
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</h4>
</th>
<td class="lc-primary-result monthly-payment-display-a lc-result-a lc-result">
$3,000
</td>
<td class="lc-primary-result monthly-payment-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
</thead>
<tbody class="expandable_content">
<tr class="result__main">
<th scope="colgroup">
<h5>Principal and interest <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="monthly-principal-interest-display-a lc-result-a lc-result">
</td>
<td class="monthly-principal-interest-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Mortgage Insurance <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="monthly-mortgage-insurance-display-a lc-result-a lc-result">
</td>
<td class="monthly-mortgage-insurance-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Property taxes and insurance (escrow) <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="monthly-taxes-insurance-display-a lc-result-a lc-result">
</td>
<td class="monthly-taxes-insurance-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Homeowner's association dues <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="monthly-hoa-dues-display-a lc-result-a lc-result">
</td>
<td class="monthly-hoa-dues-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
</tbody><!-- .expandable_content -->
</table>
<table class="lc-results-table expandable expandable__table expandable__no-bg expandable__expanded">
<thead class="u-visually-hidden">
<tr>
<th>Costs</th>
<th>Scenario A</th>
<th>Scenario B</th>
<th>Notes</th>
</tr>
</thead>
<thead class="expandable_target expandable_header">
<tr>
<th scope="row" class="lc-primary-result-heading">
<h4 class="results-section-heading">
<span class="cf-icon cf-icon-date"></span>
Overall costs
<span class="expandable_header-right expandable_link">
<span class="expandable_cue-open">
<span class="u-visually-hidden">Show</span>
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="expandable_cue-close">
<span class="u-visually-hidden">Hide</span>
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</h4>
</th>
<td class="lc-primary-result overall-costs-display-a lc-result-a lc-result">
$3,000
</td>
<td class="lc-primary-result overall-costs-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
</thead>
<tbody class="expandable_content">
<tr class="result__main">
<th scope="colgroup">
<h5>Loan term <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="loan-term-display-a lc-result-a lc-result">
</td>
<td class="loan-term-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Principal paid <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="principal-paid-display-a lc-result-a lc-result">
</td>
<td class="principal-paid-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
<tr class="result__main">
<th scope="colgroup">
<h5>Interest and fees paid <span class="lc-tooltip" data-toggle="tooltip" role="tooltip" data-original-title="" title=""><span class="cf-icon cf-icon-help-round"></span></span></h5>
</th>
<td class="interest-fees-paid-display-a lc-result-a lc-result">
</td>
<td class="interest-fees-paid-display-b lc-result-b lc-result">
</td>
<td class="callout-educational">
Educational callout
</td>
</tr>
</tbody><!-- .expandable_content -->
</table>
</div><!-- .content-l_col-3-4 -->
</section> <!-- ./comparison-results -->