This module currently relies heavily on the vertical card to provide structure. Please use this module as a means to organize vertical cards into a table for easy comparison.
There are 2 versions: (1) a plain table and (2) a table with a sticky header. Any row or data can be made in a 'sticky' header, just ensure that your sticky header's columns match the columns of the table on which it is 'stuck'.
Oscar Health Insurance | Oscar Health Insurance |
On Exchange Plan Classic Bronze Dep29 Classi9 | On Exchange Plan Classic nze Dep29 Classic Bronze Dep29 |
Monthly Premium $125 /month | Monthly Premium $125 /month |
Deductible $3,500 /year | Deductible $3,500 /year |
Max Out of Pocket $5,400 /year | Max Out of Pocket $5,400 /year |
Your Prescriptions Full price before deductible $10 after deductible | Your Prescriptions Full price before deductible $10 after deductible |
Doctors in Network | Doctors in Network |
Benefits Doctor visitsGenericAlways free Primary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | Benefits Doctor visitsGenericAlways free Primary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible |
Estimated Annual Cost $1,746 /year | Estimated Annual Cost $1,746 /year |
Network Type EPO | Network Type EPO |
Network Size 50K Primary care doctors 84K Specialists 16 Hospitals/Medical Centers 56 Urgent Care Centers | Network Size 50K Primary care doctors 84K Specialists 16 Hospitals/Medical Centers 56 Urgent Care Centers |
Provider Map |
.mod-plan-comparison-table
.sbs-wrapper
.plan-comparison-table-card-wrapper
.mod-vertical-card.vertical
table.sbs-table
tr.sbs-table-row.sbs-table-row-title
td.sbs-table-col
.mod-vertical-card-header.connected-bottom
h2.mod-vertical-card-title Oscar Health Insurance
td.sbs-table-col
.mod-vertical-card-header.connected-bottom
h2.mod-vertical-card-title Oscar Health Insurance
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-header.connected-top
.mod-vertical-card-details
.mod-vertical-card-stars
.com-rating.compact.narrow
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star
.i-star
.i-help
.mod-vertical-card-tier
strong
| Bronze Plan
i.i-help
.mod-vertical-card-actions
a.button.action.full-width.i-clock href='#' Quick Enroll
a.button.outline.full-width.mini href='#' View Details
a.mod-vertical-card-hint href="#" What is a Quick Enroll plan?
td.sbs-table-col
.mod-vertical-card-header.connected-top
.mod-vertical-card-details
.mod-vertical-card-stars
.com-rating.compact.narrow
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star
.i-star
.i-help
.mod-vertical-card-tier
strong
| Bronze Plan
i.i-help
.mod-vertical-card-actions
a.button.action.full-width.i-clock href='#' Quick Enroll
a.button.outline.full-width.mini href='#' View Details
a.mod-vertical-card-hint href="#" What is a Quick Enroll plan?
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| On Exchange Plan
i.i-help
.mod-vertical-card-tier
strong Classic Bronze Dep29 Classi9
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| On Exchange Plan
i.i-help
.mod-vertical-card-tier
strong Classic nze Dep29 Classic Bronze Dep29
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Monthly Premium
i.i-help
.mod-vertical-card-price
.sign-vertical
.icon-discount-white
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
ul.mod-icon-list.condensed
li.icon-checkmark Under $200
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Monthly Premium
i.i-help
.mod-vertical-card-price
.sign-vertical
.icon-discount-white
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
ul.mod-icon-list.condensed
li.icon-checkmark Under $200
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Deductible
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $3,500
span.mod-vertical-card-price-period.small
' /year
ul.mod-icon-list.condensed
li.icon-checkmark Under $4,000
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Deductible
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $3,500
span.mod-vertical-card-price-period.small
' /year
ul.mod-icon-list.condensed
li.icon-checkmark Under $4,000
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Max Out of Pocket
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $5,400
span.mod-vertical-card-price-period.small
' /year
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Max Out of Pocket
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $5,400
span.mod-vertical-card-price-period.small
' /year
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Your Prescriptions
i.i-help
div.mod-vertical-card-description-item
b Full price
span
| before deductible
i.i-help
div.mod-vertical-card-description-item
b $10
span
| after deductible
i.i-help
ul.mod-icon-list.condensed
li.icon-close-accent
span.bold Prozac
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Your Prescriptions
i.i-help
div.mod-vertical-card-description-item
b Full price
span
| before deductible
i.i-help
div.mod-vertical-card-description-item
b $10
span
| after deductible
i.i-help
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Doctors in Network
i.i-help
ul.mod-icon-list.condensed
li.icon-checkmark
.text-truncation
.truncate Dr. Jones Frankenstein Frankenstein Frankenstein
li.icon-checkmark
.text-truncation
.truncate Dr. Smith
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Doctors in Network
i.i-help
ul.mod-icon-list.condensed
li.icon-checkmark
.text-truncation
.truncate Dr. Jones Jones Jones Jones
li.icon-checkmark
.text-truncation
.truncate Dr. Frankenstein Frankenstein
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Benefits
i.i-help
h4.mod-vertical-card-underlined Doctor visits
h5.mod-vertical-card-minititle Generic
div.mod-vertical-card-description-item
b Always free
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Benefits
i.i-help
h4.mod-vertical-card-underlined Doctor visits
h5.mod-vertical-card-minititle Generic
div.mod-vertical-card-description-item
b Always free
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Estimated Annual Cost
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $1,746
small.mod-vertical-card-price-period
' /year
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Estimated Annual Cost
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $1,746
small.mod-vertical-card-price-period
' /year
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Type
i.i-help
h2.mod-vertical-card-title EPO
ul.mod-icon-list.condensed
li.icon-checkmark No referral needed to see a specialist
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Type
i.i-help
h2.mod-vertical-card-title EPO
ul.mod-icon-list.condensed
li.icon-checkmark No referral needed to see a specialist
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Size
i.i-help
.mod-vertical-card-dl
.mod-vertical-card-dl-row
.mod-vertical-card-dt 50K
.mod-vertical-card-dd Primary care doctors
.mod-vertical-card-dl-row
.mod-vertical-card-dt 84K
.mod-vertical-card-dd Specialists
.mod-vertical-card-dl-row
.mod-vertical-card-dt 16
.mod-vertical-card-dd Hospitals/Medical Centers
.mod-vertical-card-dl-row
.mod-vertical-card-dt 56
.mod-vertical-card-dd Urgent Care Centers
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Size
i.i-help
.mod-vertical-card-dl
.mod-vertical-card-dl-row
.mod-vertical-card-dt 50K
.mod-vertical-card-dd Primary care doctors
.mod-vertical-card-dl-row
.mod-vertical-card-dt 84K
.mod-vertical-card-dd Specialists
.mod-vertical-card-dl-row
.mod-vertical-card-dt 16
.mod-vertical-card-dd Hospitals/Medical Centers
.mod-vertical-card-dl-row
.mod-vertical-card-dt 56
.mod-vertical-card-dd Urgent Care Centers
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
h2.mod-vertical-card-title Provider Map
.mod-card-form.filter
label.teal
.checkbox.flip
input type='checkbox'
span.truncate Oscar Blue Cross Blue
p MegaClassis Gold Silver Bronze
td.sbs-table-col
.mod-vertical-card-section
h2.mod-vertical-card-title
.mod-card-form.filter
label.pink
.checkbox.flip
input type='checkbox'
span.truncate Oscar Blue Cross Blue
p MegaClassis Gold Silver Bronze
NOTE: The JavaScript in this example is for demonstration purposes only. In the PG flow, this logic is implemented in React and it heaviliy utitlizes a library called react-sticky.
$125 /month | $125 /month | $125 /month |
Oscar Health Insurance | Oscar Health Insurance Oscar Health Insurance | Oscar Health Insurance |
On Exchange Plan Classic Bronze D | On Exchange Plan Classic Bronze Dep29 Classi9 | On Exchange Plan Classic Bronze Dep29 Classi9 |
Monthly Premium $125 /month | Monthly Premium $125 /month | Monthly Premium $125 /month |
Max Out of Pocket $5,400 /year | Max Out of Pocket $5,400 /year | Max Out of Pocket $5,400 /year |
Your Prescriptions $2,700/person plan deductible $13000/family plan deductible | Your Prescriptions $2,700/person plan deductible $13000/family plan deductible | Your Prescriptions $2,700/person plan deductible $13000/family plan deductible |
Primary Visit Full price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | Primary Visit Full price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | |
Primary Visit Full price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | Primary Visit Full price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | |
The plan has a tiered provider network. That means you'll have access to two levels of coverage. | The plan has a tiered provider network. That means you'll have access to two levels of coverage. | The plan has a tiered provider network. That means you'll have access to two levels of coverage. |
Doctors in Network | Doctors in Network | Doctors in Network |
Benefits Doctor visitsGenericAlways free Primary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | Benefits Doctor visitsGenericAlways free Primary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | Benefits Doctor visitsGenericAlways free Primary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible |
PrescriptionsPrimary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | PrescriptionsPrimary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible | PrescriptionsPrimary VisitFull price before deductible 10$ after deductible Specialist Visit30$ after deductible 10$ after deductible |
Estimated Annual Cost $1,746 /year | Estimated Annual Cost $1,746 /year | Estimated Annual Cost $1,746 /year |
Network Type EPO | Network Type EPO | Network Type EPO |
Network Size 50K Primary care doctors 84K Specialists 16 Hospitals/Medical Centers 56 Urgent Care Centers | Network Size 50K Primary care doctors 84K Specialists 16 Hospitals/Medical Centers 56 Urgent Care Centers | Network Size 50K Primary care doctors 84K Specialists 16 Hospitals/Medical Centers 56 Urgent Care Centers |
Provider Map |
.mod-plan-comparison-table
.sbs-wrapper.sbs-sticky-wrapper
.plan-comparison-table-card-wrapper
.mod-vertical-card
table.sbs-table
tr.sbs-sticky-row
td.sbs-table-col
.sticky-card-section
.sticky-card-price
.sign-vertical
.icon-discount-white
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
.button.action.sticky-card-button Apply
td.sbs-table-col
.sticky-card-section
.sticky-card-price
.sign-vertical
.icon-discount-white
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
.button.action.sticky-card-button Apply
td.sbs-table-col
.sticky-card-section
.sticky-card-price
.sign-vertical
.icon-discount-white
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
.button.action.sticky-card-button Apply
tr.sbs-table-row.sbs-table-row-title
td.sbs-table-col
.mod-vertical-card-header.connected-bottom
h2.mod-vertical-card-title Oscar Health Insurance
td.sbs-table-col
.mod-vertical-card-header.connected-bottom
h2.mod-vertical-card-title Oscar Health Insurance Oscar Health Insurance
td.sbs-table-col
.mod-vertical-card-header.connected-bottom
h2.mod-vertical-card-title Oscar Health Insurance
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-header.connected-top
.mod-vertical-card-details
.mod-vertical-card-stars
.com-rating.compact.narrow
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star
.i-star
.i-help
.mod-vertical-card-tier
strong
| Bronze Plan
i.i-help
.mod-vertical-card-actions
a.button.action.full-width.i-clock href='#' Quick Enroll
a.button.outline.full-width.mini href='#' View Details
a.mod-vertical-card-hint href="#" What is a Quick Enroll plan?
td.sbs-table-col
.mod-vertical-card-header.connected-top
.mod-vertical-card-details
.mod-vertical-card-stars
.com-rating.compact.narrow
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star
.i-star
.i-help
.mod-vertical-card-tier
strong
| Bronze Plan
i.i-help
.mod-vertical-card-actions
a.button.action.full-width.i-clock href='#' Quick Enroll
a.button.outline.full-width.mini href='#' View Details
a.mod-vertical-card-hint href="#" What is a Quick Enroll plan?
td.sbs-table-col
.mod-vertical-card-header.connected-top
.mod-vertical-card-details
.mod-vertical-card-stars
.com-rating.compact.narrow
.stars
.i-star.active
.i-star.active
.i-star.active
.i-star
.i-star
.i-help
.mod-vertical-card-tier
strong
| Bronze Plan
i.i-help
.mod-vertical-card-actions
a.button.action.full-width.i-clock href='#' Quick Enroll
a.button.outline.full-width.mini href='#' View Details
a.mod-vertical-card-hint href="#" What is a Quick Enroll plan?
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| On Exchange Plan
i.i-help
.mod-vertical-card-tier
strong Classic Bronze D
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| On Exchange Plan
i.i-help
.mod-vertical-card-tier
strong Classic Bronze Dep29 Classi9
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| On Exchange Plan
i.i-help
.mod-vertical-card-tier
strong Classic Bronze Dep29 Classi9
tr.sbs-table-row.sticky-start-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Monthly Premium
i.i-help
.mod-vertical-card-price
.sign-vertical
.icon-discount-white
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
ul.mod-icon-list.condensed
li.icon-checkmark Under $200
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Monthly Premium
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
ul.mod-icon-list.condensed
li.icon-checkmark Under $200
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Monthly Premium
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $125
small.mod-vertical-card-price-period
' /month
ul.mod-icon-list.condensed
li.icon-checkmark Under $200
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Deductible
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $3,500
span.mod-vertical-card-price-period.small
' /year
ul.mod-icon-list.condensed
li.icon-checkmark Under $4,000
a.mod-vertical-card-hint href="#" No per person deductible
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Deductible
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $3,500
span.mod-vertical-card-price-period.small
' /year
ul.mod-icon-list.condensed
li.icon-checkmark Under $4,000
a.mod-vertical-card-hint href="#" No per person deductible
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Deductible
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $3,500
span.mod-vertical-card-price-period.small
' /year
ul.mod-icon-list.condensed
li.icon-checkmark Under $4,000
a.mod-vertical-card-hint href="#" No per person deductible
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Max Out of Pocket
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $5,400
span.mod-vertical-card-price-period.small
' /year
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Max Out of Pocket
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $5,400
span.mod-vertical-card-price-period.small
' /year
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Max Out of Pocket
i.i-help
.mod-vertical-card-price
strong.mod-vertical-card-price-value.small $5,400
span.mod-vertical-card-price-period.small
' /year
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Your Prescriptions
i.i-help
div.mod-vertical-card-description-item
b $2,700/person
span
| plan deductible
i.i-help
div.mod-vertical-card-description-item
b $13000/family
span
| plan deductible
i.i-help
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Your Prescriptions
i.i-help
div.mod-vertical-card-description-item
b $2,700/person
span
| plan deductible
i.i-help
div.mod-vertical-card-description-item
b $13000/family
span
| plan deductible
i.i-help
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Your Prescriptions
i.i-help
div.mod-vertical-card-description-item
b $2,700/person
span
| plan deductible
i.i-help
div.mod-vertical-card-description-item
b $13000/family
span
| plan deductible
i.i-help
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-section
ul.mod-icon-list.condensed
li.icon-checkmark
.list-truncation
span.truncate Prozac
td.sbs-table-col
.mod-vertical-card-section
ul.mod-icon-list.condensed
li.icon-checkmark
.list-truncation
span.truncate Prozac
.spacer-xs
span Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
.spacer-s
span Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
ul.mod-icon-list.condensed
li.icon-checkmark
.list-truncation
span.truncate Prozac
.spacer-xs
span Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
.spacer-s
span Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-section
ul.mod-icon-list.condensed
li.icon-checkmark
.list-truncation
span.truncate Cipro
td.sbs-table-col
.mod-vertical-card-section
ul.mod-icon-list.condensed
li.icon-checkmark
.list-truncation
span.truncate Cipro
.spacer-xs
span Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
.spacer-s
span Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
ul.mod-icon-list.condensed
li.icon-checkmark
.list-truncation
span.truncate Cipro
.spacer-xs
span Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
.spacer-s
span Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-section-intro
| The plan has a tiered provider network. That means you'll have access to two levels of coverage.
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-section-intro
| The plan has a tiered provider network. That means you'll have access to two levels of coverage.
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-section-intro
| The plan has a tiered provider network. That means you'll have access to two levels of coverage.
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Doctors in Network
i.i-help
ul.mod-icon-list.condensed
li.icon-checkmark
.text-truncation
.truncate Dr. Jones Frankenstein Frankenstein Frankenstein
li.icon-checkmark
.text-truncation
.truncate Dr. Smith
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Doctors in Network
i.i-help
ul.mod-icon-list.condensed
li.icon-checkmark
.text-truncation
.truncate Dr. Jones Jones Jones Jones
li.icon-checkmark
.text-truncation
.truncate Dr. Frankenstein Frankenstein
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Doctors in Network
i.i-help
ul.mod-icon-list.condensed
li.icon-checkmark
.text-truncation
.truncate Dr. Jones Jones Jones Jones
li.icon-checkmark
.text-truncation
.truncate Dr. Frankenstein Frankenstein
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Benefits
i.i-help
h4.mod-vertical-card-underlined Doctor visits
h5.mod-vertical-card-minititle Generic
div.mod-vertical-card-description-item
b Always free
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Benefits
i.i-help
h4.mod-vertical-card-underlined Doctor visits
h5.mod-vertical-card-minititle Generic
div.mod-vertical-card-description-item
b Always free
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Benefits
i.i-help
h4.mod-vertical-card-underlined Doctor visits
h5.mod-vertical-card-minititle Generic
div.mod-vertical-card-description-item
b Always free
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
tr.sbs-table-row.clear
td.sbs-table-col
.mod-vertical-card-section
h4.mod-vertical-card-underlined Prescriptions
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
h4.mod-vertical-card-underlined Prescriptions
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
td.sbs-table-col
.mod-vertical-card-section
h4.mod-vertical-card-underlined Prescriptions
h5.mod-vertical-card-minititle Primary Visit
div.mod-vertical-card-description-item
b Full price
span before deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
h5.mod-vertical-card-minititle Specialist Visit
div.mod-vertical-card-description-item
b 30$
span after deductible
div.mod-vertical-card-description-item
b 10$
span after deductible
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Estimated Annual Cost
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $1,746
small.mod-vertical-card-price-period
' /year
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Estimated Annual Cost
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $1,746
small.mod-vertical-card-price-period
' /year
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Estimated Annual Cost
i.i-help
.mod-vertical-card-price
span.mod-vertical-card-price-value $1,746
small.mod-vertical-card-price-period
' /year
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Type
i.i-help
h2.mod-vertical-card-title EPO
ul.mod-icon-list.condensed
li.icon-checkmark No referral needed to see a specialist
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Type
i.i-help
h2.mod-vertical-card-title EPO
ul.mod-icon-list.condensed
li.icon-checkmark No referral needed to see a specialist
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Type
i.i-help
h2.mod-vertical-card-title EPO
ul.mod-icon-list.condensed
li.icon-checkmark No referral needed to see a specialist
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Size
i.i-help
.mod-vertical-card-dl
.mod-vertical-card-dl-row
.mod-vertical-card-dt 50K
.mod-vertical-card-dd Primary care doctors
.mod-vertical-card-dl-row
.mod-vertical-card-dt 84K
.mod-vertical-card-dd Specialists
.mod-vertical-card-dl-row
.mod-vertical-card-dt 16
.mod-vertical-card-dd Hospitals/Medical Centers
.mod-vertical-card-dl-row
.mod-vertical-card-dt 56
.mod-vertical-card-dd Urgent Care Centers
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Size
i.i-help
.mod-vertical-card-dl
.mod-vertical-card-dl-row
.mod-vertical-card-dt 50K
.mod-vertical-card-dd Primary care doctors
.mod-vertical-card-dl-row
.mod-vertical-card-dt 84K
.mod-vertical-card-dd Specialists
.mod-vertical-card-dl-row
.mod-vertical-card-dt 16
.mod-vertical-card-dd Hospitals/Medical Centers
.mod-vertical-card-dl-row
.mod-vertical-card-dt 56
.mod-vertical-card-dd Urgent Care Centers
td.sbs-table-col
.mod-vertical-card-section
.mod-vertical-card-caption
| Network Size
i.i-help
.mod-vertical-card-dl
.mod-vertical-card-dl-row
.mod-vertical-card-dt 50K
.mod-vertical-card-dd Primary care doctors
.mod-vertical-card-dl-row
.mod-vertical-card-dt 84K
.mod-vertical-card-dd Specialists
.mod-vertical-card-dl-row
.mod-vertical-card-dt 16
.mod-vertical-card-dd Hospitals/Medical Centers
.mod-vertical-card-dl-row
.mod-vertical-card-dt 56
.mod-vertical-card-dd Urgent Care Centers
tr.sbs-table-row
td.sbs-table-col
.mod-vertical-card-section
h2.mod-vertical-card-title Provider Map
.mod-card-form.filter
label.teal
.checkbox.flip
input type='checkbox'
span.truncate Oscar Blue Cross Blue
p MegaClassis Gold Silver Bronze
td.sbs-table-col
.mod-vertical-card-section
h2.mod-vertical-card-title
.mod-card-form.filter
label.pink
.checkbox.flip
input type='checkbox'
span.truncate Oscar Blue Cross Blue
p MegaClassis Gold Silver Bronze
td.sbs-table-col
.mod-vertical-card-section
h2.mod-vertical-card-title
.mod-card-form.filter
label.pink
.checkbox.flip
input type='checkbox'
span.truncate Oscar Blue Cross Blue
p MegaClassis Gold Silver Bronze
$(document).ready(function() {
$('.sbs-sticky-wrapper').stickyScrollRow();
});
(function($) {
$.fn.stickyScrollRow = function() {
return this.each(function() {
var $this = $(this),
$stickyRow = $this.find('.sbs-sticky-row'),
$innerTable = $this.find('.sbs-table');
if ($stickyRow) {
var $stickyCols = $stickyRow.find('.sbs-table-col');
function init() {
// init styles for '.sbs-sticky-row'
// when used in the React app, 'position' and 'top' are set by React Sticky
// for the purposes of demonstration in the styleguide, these styles need to be added
initStyles({
'position': 'fixed',
'top': '0',
});
resizeFixed();
}
function initStyles(styles) {
for (var style in styles) {
$stickyRow.css(style, styles[style]);
}
}
function resizeFixed() {
if ($(this).width() <= 1023) {
$stickyRow.css('display', 'none');
}
var $comparisonWidthRow = $($innerTable.find('.sbs-table-row')[0]);
$stickyCols.each(function(index) {
$comparisonWidth = $($comparisonWidthRow.children()[index]).outerWidth();
$(this).css('width', $comparisonWidth + 'px');
});
}
function scrollFixed() {
var $stickyStartRow = $('.sticky-start-row'),
offset = $(this).scrollTop(),
tableTop = $innerTable.offset().top,
tableBottom = tableTop + $innerTable.height(),
startOffsetTop = $stickyStartRow.offset().top + $stickyStartRow.height(),
stickyRowTop = $stickyRow.offset().top,
stickyRowBottom = stickyRowTop + $stickyRow.height();
if (offset < startOffsetTop || stickyRowBottom > tableBottom - 100) {
$stickyRow.fadeOut(150);
} else {
if ($(this).width() <= 1023) {
$stickyRow.css('display', 'none');
} else {
$stickyRow.fadeIn(150);
$stickyRow.css('display', 'flex');
}
}
}
$(window).on('resize', resizeFixed);
$(window).on('scroll', scrollFixed);
init();
}
})
}
})(jQuery);