Panel - Basic
Panel - Wrap content with a panel. Used to describe content that should stand out.
Contents:
Basic Panel
.row
.small-5.columns.small-centered.panel.small.radius
.row
.small-5.columns.small-text-center
i.ss-pricetag.ss-icon.medium
.small-7.columns
p Ready to shop? We've got you covered.
.small-12.columns
a.button.action.radius.expand href="https://www.policygenius.com"
| Get Quotes
Form Panel with Icon
.row
.small-5.columns.small-centered.form-panel.small.radius
span.form-panel-icon
i.ss-write.ss-icon
.row
.small-5.columns.small-text-center
i.ss-pricetag.ss-icon.medium
.small-7.columns
p Ready to shop? We've got you covered.
.small-12.columns
a.button.action.radius.expand href="https://www.policygenius.com"
| Get Quotes
Stacked Sidebar Panel
.row
.small-5.columns.small-centered.sidebar-panel
.row.multi-cols
.small-6.columns
p.header Coverage
p.value $20,000
.small-6.columns
p.header Term
p.value 30 years
.small-5.columns.small-centered.sidebar-panel.primary
.row.multi-cols
.small-12.columns
p.header Monthly Estimate
p.value $56
Sizing Panels
Adjust panel sizing using foundation columns.
.row
.small-12.columns.small-centered.panel.detail.small.radius
.row
.small-4.columns
p Content
.small-4.columns
p Ready to shop? We've got you covered.
.small-4.columns
a.button.action.radius.expand href="https://www.policygenius.com"
| Get Quotes
Styling Panels
Change panels by appending one of the following classes to the panel:
.detail.correct.process
Change sidebar panels by appending one of the following classes to the panel:
.primary.secondary
.row
.small-6.columns.panel.detail.small.radius
.row
.small-5.columns.small-text-center
i.ss-pricetag.ss-icon.medium
.small-7.columns
p Ready to shop? We've got you covered.
.small-12.columns
a.button.action.radius.expand href="https://www.policygenius.com"
| Get Quotes
/
.small-6.columns
.row
.small-10.columns.small-centered.sidebar-panel
.row.multi-cols
.small-6.columns
p.header Coverage
p.value $20,000
.small-6.columns
p.header Term
p.value 30 years
.small-10.columns.small-centered.sidebar-panel.primary
.row.multi-cols
.small-12.columns
p.header Monthly Estimate
p.value $56
Panel - Call to Action
Panel - Call to Action are used to specify a call to action.
Contents:
With Portrait (centered by default)
Title Heading
Supertitle DescriptionSubtitle Heading
or.panel-cta
.primary.text-center
.portrait
/ portrait can be changed to label
h1.title Title Heading
span.supertitle Supertitle Description
h2.subtitle Subtitle Heading
span.divider or
/ divider can be span text or horizontal rule
.button.action Chat With an Expert
Portrait Left
Title Heading
Supertitle DescriptionSubtitle Heading
or.panel-cta
.primary.text-center
.portrait.left
/ portrait can be changed to label
h1.title Title Heading
span.supertitle Supertitle Description
h2.subtitle Subtitle Heading
span.divider or
/ divider can be span text or horizontal rule
.button.action Chat With an Expert
Portrait Right
Title Heading
Supertitle DescriptionSubtitle Heading
or.panel-cta
.primary.text-center
.portrait.right
/ portrait can be changed to label
h1.title Title Heading
span.supertitle Supertitle Description
h2.subtitle Subtitle Heading
span.divider or
/ divider can be span text or horizontal rule
.button.action Chat With an Expert
With Label
label
Title Heading
Supertitle DescriptionSubtitle Heading
or.panel-cta
.primary.text-center
.label
| label
/ label can be changed to portrait
h1.title Title Heading
span.supertitle Supertitle Description
h2.subtitle Subtitle Heading
span.divider or
/ divider can be span text or horizontal rule
.button.action Chat With an Expert
Sizing
Adjust panel sizing using foundation columns.
label
Title Heading
Supertitle DescriptionSubtitle Heading
.row
.panel-cta.medium-6.columns.medium-centered
.primary.text-center
.label
| label
/ label can be changed to portrait
h1.title Title Heading
span.supertitle Supertitle Description
h2.subtitle Subtitle Heading
hr.divider
/ divider can be span text or horizontal rule
.button.action Chat With an Expert
Styling
- Use
.primaryfor the base styles - Use
.secondaryfor the alternative styles
Title Heading
Supertitle DescriptionSubtitle Heading
or.panel-cta
.secondary.text-center
.portrait
/ portrait can be changed to label
h1.title Title Heading
span.supertitle Supertitle Description
h2.subtitle Subtitle Heading
span.divider or
/ divider can be span text or horizontal rule
.button.action Chat With an Expert
Extending
To extend our panel-cta with custom styling, we can introduce new styling classes inside the .panel-cta container class.
We can adjust font colors and background colors or any other necessary styling adjustments.
.panel-cta {
.NEW-STYLE {
@include panel-cta(PADDING-VALUE, NEW-COLOR);
.portrait {
@include panel-cta-callout(circle, PORTRAIT-SIZE, center);
@include panel-cta-callout-color(circle, PORTRAIT-BG-COLOR, 1px solid $panel-cta-portrait-border-color);
}
.label {
@include panel-cta-callout-color(label, $panel-cta-label-secondary-bg-color);
color: $panel-cta-label-primary-font-color;
}
.title {
color: $panel-cta-primary-font-color;
}
.subtitle{
color: $panel-cta-primary-font-color;
}
.supertitle {
color: $panel-cta-primary-font-color;
}
.divider {
color: $panel-cta-secondary-font-color;
}
hr {
&.divider {
border-color: $panel-cta-divider-secondary-color;
}
}
}
}
Panel - Filter Panel
Extends Panel Component
Panel - Filter Panel is used to adjust information being displayed on the page.
Contents:
Basic Filter Panel
.row
.small-4.columns.small-centered.panel.panel-filter
.row
.small-12.columns
section.panel-section.hero
.small-12.columns.text-center
img.panel-section-logo src="holder.js/170x50?auto=yes" width="170" alt="PolicyGenius"
.small-12.columns
img.panel-hero-img src="holder.js/200x200?auto=yes" width="200" alt="PolicyGenius Rep"
.panel-section.panel-hero-content
h3.panel-heading-super Free & Friendly
a.panel-heading.link href="tel:1-800-000-000" 1-800 000 0000
a.button.primary.radius href="https://www.policygenius.com/"
| Chat with an Expert
section.panel-section
.small-12.columns
a.button.primary.radius.expand.has-icon href="https://www.policygenius.com/"
span.ss-icon.ss-floppydisk
| Save your progress
.small-12.columns
a.button.primary.radius.expand.has-icon href="https://www.policygenius.com"
span.ss-icon.ss-help
| Why PolicyGenius?
hr.panel-divider
section.panel-section
.small-12.columns.slider
fieldset
legend
h5.panel-heading Adjust your policy
.slider.round
label#coverage-label.slider-heading Coverage
span#coverage-value.slider-value $500,000
.range-slider data-slider="" data-options="start:100000; end: 1000000; step: 50000; display_selector: #coverage-value;"
span.range-slider-handle role="slider" tabindex="0" aria-labelledby="coverage-label"
span.range-slider-active-segment
.slider.round
label.slider-heading id="term" Term
span#term.slider-value 20 Years
.range-slider data-slider="" data-options="display_selector: #term;"
span.range-slider-handle role="slider" tabindex="0" aria-labelledby="term"
span.range-slider-active-segment
.small-12.columns
fieldset
legend.panel-input-heading Show Prices
ul.panel-input.radio-list
.row
.small-6.columns
li.radio.animated-checkbox.primary.animated-checkbox-fill
input.animated_radio.optional.radius type="radio" value="m" name="prices" id="m" checked="checked"
label.collection_radio_buttons for="m" Monthly
.small-6.columns
li.radio.animated-checkbox.primary.animated-checkbox-fill
input.animated_radio.optional.radius type="radio" value="a" name="prices" id="a"
label.collection_radio_buttons for="a" Annually
sub.panel-heading-sub
| (Save up to 15%)
hr.panel-divider
section.panel-section
.small-12.columns
h5.panel-heading Edit your info
a.button.radius.expand.neutral.has-icon
span.ss-icon.ss-plus
| Edit Your Health
a.button.radius.expand.neutral.has-icon
span.ss-icon.ss-user
| Edit Your Basics
a.button.radius.expand.neutral.has-icon
span.ss-icon.ss-calculator
| Calculate Coverage & Term
Panel - Table Panel
Panel - Table Panel is used to display tabular data inside of a panel.
Contents:
Basic Table Panel
.row
.small-4.small-centered.columns
.panel.panel-table.radius.end
.panel-table-header.text-center
img.panel-section-logo src="http://i.imgur.com/hyXZsI7.png" width="170" alt="PolicyGenius"
h4.panel-heading.text-center Price Finder
.row
.small-12.columns
.progress.thin
span.meter style="width: 50%"
.row
.small-12.columns
p.panel-heading.text-center Dynamic Message Goes Here
hr.panel-divider
.row
.small-12.columns
table.table.table-center
thead
tr
th.table-heading width="35%"
i.table-heading-sub Prices are Yearly
th.table-heading
| 15
h6.table-heading-sub Years
th.table-heading
| 20
h6.table-heading-sub Years
th.table-heading
| 25
h6.table-heading-sub Years
tbody
tr
th.table-heading
| 4
h6.table-heading-sub Million
td.table-item ---
td.table-item ---
td.table-item
a.table-link href="#"
.table-item-fill $285
tr
th.table-heading
| 4.5
h6.table-heading-sub Million
td.table-item
a.table-link href="#"
.table-item-fill $285
td.table-item.active
a.table-link href="#"
.table-item-fill $285
td.table-item ---
tr
th.table-heading
| 5
h6.table-heading-sub Million
td.table-item
a.table-link href="#"
.table-item-fill $285
td.table-item.featured
a.table-link href="#"
.table-item-fill $285
td.table-item
a.table-link href="#"
.table-item-fill $285
Table - Basic
Table - Table is used to describe and highlight prices from our quoting engine in tabular formatting.
Contents:
Basic Table
.row
.small-12.columns
table.table.table-center
thead
tr
th.table-heading Prices are Yearly
th.table-heading
| 15
h6.table-heading-sub Years
th.table-heading
| 20
h6.table-heading-sub Years
th.table-heading
| 25
h6.table-heading-sub Years
tbody
tr
th.table-heading
| 4
h6.table-heading-sub Million
td.table-item ---
td.table-item ---
td.table-item
a.table-link href="#"
.table-item-fill $285
tr
th.table-heading
| 4.5
h6.table-heading-sub Million
td.table-item
a.table-link href="#"
.table-item-fill $285
td.table-item
a.table-link href="#"
.table-item-fill $285
td.table-item ---
tr
th.table-heading
| 5
h6.table-heading-sub Million
td.table-item
a.table-link href="#"
.table-item-fill $285
td.table-item
a.table-link href="#"
.table-item-fill $285
td.table-item
a.table-link href="#"
.table-item-fill $285
Table - Results Table
Extends Card Component
Table - Results Table is used to describe and highlight prices from our quoting engine in tabular formatting.
Contents:
Basic Results Table
Our Advice
Price
Insurer
Financial Strength
Customer Satisfaction
PolicyGenius Promise
- No annoying calls/emails
- Based on unbiased research
- With you from start to covered!
Coverage
$500,000
Term
20 Years
Underwriting Class
Preferred Best non-tobaccoPlan Name
SI - Trendsetter Express 20 (Choice/Std)Turnaround
3-5 Weeks (average)
We've done the research
Read more about this policy & Lincoln Financial.row
.table-results
.row
.medium-12.columns
.table-head
h5.table-cell.table-title
| Our Advice
i.table-icon.ss-icon.ss-dropdown
h5.table-cell.table-title
| Price
i.table-icon.ss-icon.ss-dropdown
h5.table-cell.table-title
| Insurer
i.table-icon.ss-icon.ss-dropdown
h5.table-cell.table-title
| Financial Strength
i.table-icon.ss-icon.ss-dropdown
h5.table-cell.table-title
| Customer Satisfaction
i.table-icon.ss-icon.ss-dropdown
.row
.medium-12.columns
.table-row.visible
.table-cell.term-description.highlight
p.term-lead Best Price
sub.term-sub-description.has-tip.tip-bottom title="This is a tooltip." data-tooltip="" What's this'?
.table-cell.table-price.price
span.currency-sign $
span.dollars 530
span.cents .55
abbr.abbreviation.full title="Monthly" Monthly
.table-cell.term-description
img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=88ff88&txtclr=ffffff&txt=banner&w=150&h=100&txttrack=1"
.table-cell.term-rating
| A+
sub.term-sub-description A.M. Best
.table-cell.term-rating
| A+
sub.term-sub-description BBB Rating
.table-cell.term-description
a.table-submit.button.action href="" Apply Now
.table-cell.small.term-description
a.table-details href=""
i.icon-plus +
.table-row.details
.table-cell.large
h6.term-title PolicyGenius Promise
ul.table-list.define.it-is
li No annoying calls/emails
li Based on unbiased research
li With you from start to covered!
.table-cell.medium.shift-1.divider
.medium-12.columns
h6.term-title Coverage
p.term-description.price $500,000
.medium-12.columns
h6.term-title Term
p.term-description.price 20 Years
.table-cell.large.term-description
.medium-12.columns
ul.table-list.clear-list
li
h6.term-title Underwriting Class
| Preferred Best non-tobacco
li
h6.term-title Plan Name
| SI - Trendsetter Express 20 (Choice/Std)
li
h6.term-title Turnaround
| 3-5 Weeks (average)
.table-cell.large.term-description
.medium-2.columns
i.ss-icon.ss-openbook.highlight-icon
.medium-10.columns
h6.term-title We've done the research
a.link Read more about this policy & Lincoln Financial
.table-row
.table-cell
.table-cell
span.term-sub-title Quote available from a PolicyGenius expert
.table-cell.term-description
img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=88ff88&txtclr=ffffff&txt=banner&w=150&h=100&txttrack=1"
.table-cell.term-rating
| A+
sub.term-sub-description A.M. Best
.table-cell.term-rating
| A+
sub.term-sub-description BBB Rating
.table-cell.term-description
a.table-submit.button.action href="" Apply Now
.table-cell.small.term-description
a.table-details href=""
i.icon-plus +
Form - Progress Bar
Form - Progress Bar is used to indicate level of completition.
Contents:
Basic Progress Bar
.row
.progress.thin
span.meter style="width: 50%"
Form - Sliders
Form - Sliders is used to control a range of values.
Contents:
Range Slider
.row
.small-6.small-centered.columns
.slider.round
label.slider-heading id="term-label" Term
span#term-value.slider-value 20 Years
.range-slider data-slider="" data-options="display_selector: #term-value;"
span.range-slider-handle role="slider" tabindex="0" aria-labelledby="term-label"
span.range-slider-active-segment
Gradient Slider
.row
.small-12.small-centered.columns
.slider.gradient.round
.range-slider data-slider="" data-options="display_selector: #term-value;"
span.range-slider-handle role="slider" tabindex="0" aria-labelledby="term-label"
span.range-rating Below Average
span.range-slider-active-segment
Form - Input
Form - Input
Contents:
Basic Input
.row
.small-6.small-centered.columns
form
.row.collapse.collapse-input
.small-8.columns
input.weight.required.radius.border type="number" value="0" name="weight" aria-labelledby="pounds"
.small-4.columns
span.postfix.primary.radius#pounds lbs.
Cards
Extends Card Component
Card - Pricing Card is used to describe and highlight prices from our quoting engine.
Contents:
Basic Pricing Card
.card-container.row
.medium-6.columns
.card-pricing.active
.card-inner
.header
.header-item.small-8.columns
.header-item.price
span.currency-sign $
span.dollars 530
span.cents .55
abbr.header-abbr.abbreviation.full title="Monthly" Monthly
a.header-item.small-4.columns.action.js-details
i.header-icon.icon-plus +
| Details
.body
.insurer
img.insurer-logo src="https://placeholdit.imgix.net/~text?txtsize=30&bg=88ff88&txtclr=ffffff&txt=banner&w=150&h=100&txttrack=1"
a.sub-link href="#" Tell me more
dl.body-term
dt.term-title RATINGS
dd.term-definition
span.term-rating A+
| A.M. Best
dd.term-definition
span.term-rating A+
| Better Business Bureau
span.sub-link.has-tip.tip-bottom title="This is a tooltip." data-tooltip="" What are these?
.footer
span.footer-inset-arrow
.footer-inner
.footer-row.row
.medium-6.columns
h6.term-title Coverage
p.footer-term-description.term-description.highlight $500,000
.medium-6.columns
h6.term-title Term
p.footer-term-description.term-description.highlight 20 Years
.footer-row.row
.medium-12.columns
h6.term-title Underwriting Class
p.term-description Preferred Best non-tobacco
.footer-row.row
.medium-12.columns
h6.term-title Plan Name
p.term-description SI - Trendsetter Express 20 (Choice/Std)
.footer-row.row
.medium-12.columns
h6.term-title Turnaround
p.term-description 3-5 Weeks (average)
.highlight-row.footer-row.row
.medium-2.columns
i.ss-icon.ss-openbook.highlight-icon
.medium-10.columns
h6.term-title We've done the research
a.link Read more about this policy & Lincoln Financial
a.card-submit.button.action Apply Now
.card-outer.text-center
a.sub-link Save for Later
.medium-6.columns
.card-pricing.visible
.card-inner
.header
.header-item.small-8.columns
.header-item.price
span.currency-sign $
span.dollars 530
span.cents .55
abbr.header-abbr.abbreviation.full title="Monthly" Monthly
a.header-item.small-4.columns.action.js-details
i.header-icon.icon-plus +
| Details
.body
.insurer
img.insurer-logo src="https://placeholdit.imgix.net/~text?txtsize=30&bg=88ff88&txtclr=ffffff&txt=banner&w=150&h=100&txttrack=1"
a.sub-link href="#" Tell me more
dl.body-term
dt.term-title RATINGS
dd.term-definition
span.term-rating A+
| A.M. Best
dd.term-definition
span.term-rating A+
| Better Business Bureau
span.sub-link.has-tip.tip-bottom title="This is a tooltip." data-tooltip="" What are these?
.footer
span.footer-inset-arrow
.footer-inner
.footer-row.row
.medium-6.columns
h6.term-title Coverage
p.footer-term-description.term-description.highlight.price $500,000
.medium-6.columns
h6.term-title Term
p.footer-term-description.term-description.highlight.price 20 Years
.footer-row.row
.medium-12.columns
h6.term-title Underwriting Class
p.term-description Preferred Best non-tobacco
.footer-row.row
.medium-12.columns
h6.term-title Plan Name
p.term-description SI - Trendsetter Express 20 (Choice/Std)
.footer-row.row
.medium-12.columns
h6.term-title Turnaround
p.term-description 3-5 Weeks (average)
.highlight-row.footer-row.row
.medium-2.columns
i.ss-icon.ss-openbook.highlight-icon
.medium-10.columns
h6.term-title We've done the research
a.link Read more about this policy & Lincoln Financial
a.card-submit.button.action Apply Now
.card-outer.text-center
a.sub-link Save for Later
Insurer Card
Basics & Ratings
We only sell policies that we would recommend.
Founded
1868
PolicyGenius Research
When Applying
How's the application process?
Why this rating?
- PROS
- + Electronic application
- + Turnaround time: 18 days (better than average)
- + Fast-track process for issue-free medical history
- + Policy delivery by email
- CONS
- - Application form longer than average
- - Extra phone interview with underwriter required
After you're a customer
How modernized are their services?
Why this rating?
- WHAT'S DIGITAL/ONLINE?
- Changing Address
- Changing payment info
- WHAT'S PAPER/FAX BASED
- Updating beneficiaries
Common features
This policy, like all term life policies offered on our site, provides life coverage for a specific period of time (the term). The key features of this policy are standard across all the term policies we offer:
- Level premium - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
- Good value - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
- Regulated - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
- No-risk obligation for you - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
- No exclusions - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
- Terminal illness benefit - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
- Convertible - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
Sample Policy
Click here to download a pdf sample of a typical policy.
Unique features
- Very competitive underwriting
Details
- Unique features
- Very competitive underwriting
- Minimum amount available
- $100,000
- Terms available
- 10, 15, 20, 30
- Discount for paying annually versus monthly
- 8%
- Payment methods available
- Check, Auto bank draft, No credit cards accepted.
- Is coverage available without a medical exam?
- No
- Is temporary coverage during underwriting available?
- Yes, up to $1 million max
- What is the rule for accelerating the death benefit?
- You may accelerate all, or a portion, of the death benefit if you are diagnosed with a qualifying terminal illness (12, or 24 months in some states, max life expectancy).
- What is the rule for converting the policy?
- If issued before age 65, the policy is convertible until the earlier of the end of the term period or on the age 70 policy anniversary.
Your MetLife policy is just $34/MO. Apply Now
.card-insurer.row
.medium-12.columns
.row.has-border.bottom
.medium-12.columns.card-column.highlight
.medium-3.columns
.insurer
img.insurer-logo src="https://placeholdit.imgix.net/~text?txtsize=30&bg=88ff88&txtclr=ffffff&txt=banner&w=150&h=100&txttrack=1"
.medium-3.columns.text-center
.price
h6.term-title Cost
span.currency-sign $
span.dollars 530
span.cents .55
span.abbreviation.full Monthly
.medium-2.columns.text-center
h6.term-title Coverage
p.term-description.large $500,000
.medium-2.columns.text-center
h6.term-title Term
p.term-description.large 20 Years
.medium-2.columns.text-center
a.button.chunky.action-secondary.radius.insurer-button.expand Apply Now
.row.has-border.bottom
.medium-6.columns.card-column
h4.term-description Basics & Ratings
.medium-6.columns.card-column.text-right
p.term-heading
i.ss-icon.ss-alert
| We only sell policies that we would recommend.
.row.has-border.bottom
.medium-2.columns.text-center.card-column
h6.term-title Founded
p.term-description.large 1868
.medium-3.columns.text-center.card-column
h6.term-title PolcyHolders
p.term-description.large 6.5 Million
a.sub-link href="#" What's this?
.medium-2.columns.text-center.card-column
h6.term-title A.M. Best Rating
p.term-description.large A+
a.sub-link href="#" What's this?
.medium-2.columns.text-center.card-column
h6.term-title BBB Rating
p.term-description.large A-
a.sub-link href="#" What's this?
.medium-3.columns.text-center.card-column
h6.term-title JD Power
p.term-description.large 3 out of 5
a.sub-link href="#" What's this?
.row.has-border.bottom
.medium-12.columns.card-column
h4.term-description PolicyGenius Research
.row.has-border.bottom
.medium-7.columns.card-column
h6.term-title When Applying
p.term-description How's the application process?
br
.slider.gradient.round.is-disabled
.range-slider data-slider="" data-options="display_selector: #term-value;"
span.range-slider-handle role="slider" tabindex="0" aria-labelledby="term-label"
span.range-rating Below Average
span.range-slider-active-segment
.medium-5.columns.card-column
p.term-heading Why this rating?
ul.no-bullet.card-list.small.no-spacing.subtle
li PROS
li + Electronic application
li + Turnaround time: 18 days (better than average)
li + Fast-track process for issue-free medical history
li + Policy delivery by email
ul.no-bullet.card-list.small.no-spacing.subtle
li CONS
li - Application form longer than average
li - Extra phone interview with underwriter required
.row.has-border.bottom
.medium-7.columns.card-column
h6.term-title After you're a customer
p.term-description How modernized are their services?
br
.slider.gradient.round.is-disabled
.range-slider data-slider="" data-options="display_selector: #term-value;"
span.range-slider-handle role="slider" tabindex="0" aria-labelledby="term-label"
span.range-rating Below Average
span.range-slider-active-segment
.medium-5.columns.card-column
p.term-heading Why this rating?
ul.no-bullet.card-list.small.no-spacing.subtle
li WHAT'S DIGITAL/ONLINE?
li Changing Address
li Changing payment info
ul.no-bullet.card-list.small.no-spacing.subtle
li WHAT'S PAPER/FAX BASED
li Updating beneficiaries
.row.has-border.bottom
.medium-7.columns
.row
.medium-12.columns.card-column.has-border.bottom
h4.term-description Common features
.medium-12.columns.card-column.has-border.bottom
p.term-lead This policy, like all term life policies offered on our site, provides life coverage for a specific period of time (the term). The key features of this policy are standard across all the term policies we offer:
ul.define.it-is.card-list.small.subtle
li
b.term-heading Level premium
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
li
b.term-heading Good value
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
li
b.term-heading Regulated
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
li
b.term-heading No-risk obligation for you
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
li
b.term-heading No exclusions
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
li
b.term-heading Terminal illness benefit
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
li
b.term-heading Convertible
| - which means the cost of the policy (the premium you pay) is fixed for the entire term of the policy. It will not icnrease during the term of the policy.
.medium-12.columns.card-column.has-border.bottom
ul.no-bullet.card-list.small.subtle
li.term-heading
h4.term-description Sample Policy
.medium-12.columns.card-column
p
a href="#" Click here
| to download a pdf sample of a typical policy.
.medium-5.columns.has-border.left
.row
.medium-12.columns.card-column.has-border.bottom
h4.term-description Unique features
.medium-12.columns.card-column.has-border.bottom
ul.no-bullet.card-list.small.subtle
li Very competitive underwriting
.medium-12.columns.card-column.has-border.bottom
ul.no-bullet.card-list.small.subtle
li.term-heading
h4.term-description Details
.medium-12.columns.card-column
ul.no-bullet.card-list.small.subtle
li.term-heading Unique features
li Very competitive underwriting
li.term-heading Minimum amount available
li $100,000
li.term-heading Terms available
li 10, 15, 20, 30
li.term-heading Discount for paying annually versus monthly
li 8%
li.term-heading Payment methods available
li Check, Auto bank draft, No credit cards accepted.
li.term-heading Is coverage available without a medical exam?
li No
li.term-heading Is temporary coverage during underwriting available?
li Yes, up to $1 million max
li.term-heading What is the rule for accelerating the death benefit?
li You may accelerate all, or a portion, of the death benefit if you are diagnosed with a qualifying terminal illness (12, or 24 months in some states, max life expectancy).
li.term-heading What is the rule for converting the policy?
li If issued before age 65, the policy is convertible until the earlier of the end of the term period or on the age 70 policy anniversary.
.row
.medium-12.columns.text-right.card-column
p.term-lead.large.end
| Your MetLife policy is just
b $34/MO.
a.button.chunky.action-secondary.radius.insurer-button.expand Apply Now
Reveal Modal - Basic
Reveal Modal - a basic modal to display hidden content.
Contents:
Styling Content inside
Classes available:
.modal-lead- used for copy i.e:p.modal-lead Some content here.modal-title- used for headings, large titles i.e:h3.modal-title Heading here
Basic Modal
.row
.small-6.small-centered.columns
a href="#" data-reveal-id="modal-basic" Click to open
#modal-basic.reveal-modal.primary data-options="animation: 'fade';" data-reveal="" aria-labelledby="modal-title" aria-hidden="true" role="dialog"
.modal-header
h3.modal-title
| Your health class
a.close-reveal-modal aria-label="Close" ×
.modal-body
h5.modal-title 3 things you NEED to know
ol.modal-list
li
span.modal-list-lead Insurance companies use your health class, called your
b underwriting class
span.modal-list-lead to determine rates.
li
span.modal-list-lead Insurance companies use your health class, called your
b underwriting class
span.modal-list-lead to determine rates.
li
span.modal-list-lead Insurance companies use your health class, called your
b underwriting class
span.modal-list-lead to determine rates.
.modal-footer
a.button.large.radius.action-secondary href="#"
| Save & Continue Applying
a.button.small.subtle.modal-button-subtle href="#" Apply Later
Reveal modal with video
.row
.small-6.small-centered.columns
a.js-modal-trigger href="javascript:void(0);" Click to Open
.reveal-modal-overlay.text-center
.reveal-modal.has-video.secondary aria-labelledby="modal-title" aria-hidden="true" role="dialog"
.modal-video-container
.row.modal-body.no-gutter
video#video.modal-video loop="" poster="holder.js/350x150?auto=yes"
source src="/assets/loader-animation-save.webm" type="video/webm"
source src="/assets/loader-animation-save.mp4" type="video/mp4"
img.modal-video-placeholder alt="Why is PolicyGenius different?" src="holder.js/350x150?auto=yes"
.row
.progress.thin
span.meter.js-video-progress style="width: 10%"
.row.modal-footer
.small-4.columns.modal-content-group.small-push-1
p.modal-lead.large
b Save your progress.
p.modal-lead.large
| (You've come so far!)
.small-6.columns.small-pull-1
.row.collapse.collapse-input.modal-content-group
.small-9.columns
input.modal-input.radius type="text" placeholder="Enter your email please" name="email"
.small-3.columns
a.button.primary.modal-button.postfix.radius href="#" Save
p.modal-input-note
strong.modal-caps NO SPAM. EVER.
| We have it too.
.modal-confirmation-container
.row.modal-body
.small-12.columns.text-center.modal-content-group.center-y
h2.modal-title
b
i All set!
h2.modal-title
| We found
b 17
| policy matches.
p.modal-title
| (Pssst.... your 2 best choices are at the top.)
a.close-reveal-modal aria-label="Close"
i.ss-icon.ss-delete
.row
.progress.thin
span.meter.js-video-progress style="width: 100%"
.row.modal-footer
.small-12.columns.text-center.modal-content-group
p.modal-lead.large
b Nice!
p.modal-lead.large We'll email you a link to our recommandations.
Layout - Application Page
Layout - Application page
Contents:
Application Page Layout
Continue
Why apply through PolicyGenius?
First things first...
- 1
Basics
- 2
Contact Info
.row
.small-12.columns
.sidebar-layout
.sidebar-layout-content.application
.row.text-center
.sidebar-content-group
h2.sidebar-title.large
i Nice Choice!
p.sidebar-lead.subtle
i Not sure? No worries. We'll make sure it's the right fit.
.medium-4.medium-centered.columns
.card-container
.card-pricing.active.text-left
.card-pricing-inner
.header
.header-item.small-8.columns
.header-item.price
span.currency-sign $
span.dollars 530
span.cents .55
abbr.header-abbr.abbreviation title="Monthly" Monthly
a.header-item.small-4.columns.action.js-details
i.header-icon.icon-plus +
| Details
.body
.body-insurer
img.body-insurer-logo src="https://placeholdit.imgix.net/~text?txtsize=30&bg=88ff88&txtclr=ffffff&txt=banner&w=150&h=100&txttrack=1"
a.sub-link href="#" Tell me more
dl.body-term
dt.term-title RATINGS
dd.term-definition
span.term-rating A+
| A.M. Best
dd.term-definition
span.term-rating A+
| Better Business Bureau
span.sub-link.has-tip.tip-bottom title="This is a tooltip." data-tooltip="" What are these?
.footer
span.footer-inset-arrow
.footer-inner
.footer-row.row
.medium-6.columns
h6.term-title Coverage
p.footer-term-description.term-description.highlight $500,000
.medium-6.columns
h6.term-title Term
p.footer-term-description.term-description.highlight 20 Years
.footer-row.row
.medium-12.columns
h6.term-title Underwriting Class
p.term-description Preferred Best non-tobacco
.footer-row.row
.medium-12.columns
h6.term-title Plan Name
p.term-description SI - Trendsetter Express 20 (Choice/Std)
.footer-row.row
.medium-12.columns
h6.term-title Turnaround
p.term-description 3-5 Weeks (average)
.highlight-row.footer-row.row
.medium-2.columns
i.ss-icon.ss-openbook.highlight-icon
.medium-10.columns
h6.term-title We've done the research
a.link Read more about this policy & Lincoln Financial
a.card-submit.button.action Apply Now
.medium-12.medium-centered.columns
ul.steps
li.steps-item.no-bullet
svg.steps-divider
line.line x1="0" x2="0" y1="0" y2="100%"
li.steps-item.no-bullet
p.steps-heading Continue
p.steps-heading
i.ss-icon.ss-navigatedown
li.steps-item.no-bullet
svg.steps-divider.large
line.line x1="0" x2="0" y1="0" y2="100%"
.medium-12.columns
.sidebar-content-group.row
.medium-12.columns
h2.sidebar-title.large
i Why apply through PolicyGenius?
.medium-4.columns
img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=88ff88&txtclr=ffffff&txt=lorem&w=292&h=292&txttrack=1" width="292"
p.sidebar-lead.large
b Helpful experts avilable if you want them.
.medium-4.columns
img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=8888ff&txtclr=ffffff&txt=lorem&w=292&h=292&txttrack=1" width="292"
p.sidebar-lead.large
b No calls from agents.
.medium-4.columns
img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=ff8888&txtclr=ffffff&txt=lorem&w=292&h=292&txttrack=1" width="292"
p.sidebar-lead.large
b Don't get lost in paperwork.
.application-form.heading.row
svg.steps-divider.vertical.right.extend
line.line x1="0" x2="0" y1="0" y2="100%"
.medium-6.columns
h2.sidebar-title.large.text-left
i First things first...
svg.steps-divider.horizontal.bottom.extend
line.line x1="0" x2="100%" y1="0" y2="0"
.application-form.form-primary-dark.body.row
svg.steps-divider.vertical.left.extend
line.line x1="0" x2="0" y1="0" y2="100%"
.medium-6.columns
ul.steps.has-number.text-left
li.steps-item.active
.steps-item-header
span.steps-bullet 1
h5.steps-heading
b Basics
.steps-item-body.row
.medium-6.columns
.label-row
label
| First Name
abbr title="required" *
input.radius type="text"
.medium-6.columns
.label-row
label
| Last Name
abbr title="required" *
input.radius type="text"
.medium-12.columns
.label-row
label
| Email
abbr title="required" *
input.radius type="text"
li.steps-item
.steps-item-header
span.steps-bullet 2
h5.steps-heading
b Contact Info
.steps-item-body.row
.medium-6.columns
.label-row
label
| First Name
abbr title="required" *
input.radius type="text"
.medium-6.columns
.label-row
label
| Last Name
abbr title="required" *
input.radius type="text"
Layout - Breadcrumb Progress
Layout - Breadcrumb progress bar to indicate user progression.
Contents:
- Layout
- Use the foundation grid to size the list elements
.small-4.columnsetc...
- Use the foundation grid to size the list elements
Breadcrumb Progress Bar
.row
.small-12.columns
.breadcrumb
ul.breadcrumb-progress
li.breadcrumb-progress-item.is-complete
a href="#"
span.breadcrumb-progress-step 1
| Select a policy
li.breadcrumb-progress-item.is-active
a href="#"
span.breadcrumb-progress-step 2
| Apply with PolicyGenius
li.breadcrumb-progress-item
a.is-disabled href="#"
span.breadcrumb-progress-step 3
| Get approved & covered
li.breadcrumb-progress-item
a href="#"
i.ss-icon.ss-user
| Account
Layout - No Results
Layout - No results page
Contents:
Hmmm... No policy matches
Try adjusting the coverage & term over there on the left.
Still no luck?
Reach out to us at 1-800-345-6783
.row
.small-6.small-centered.columns.text-center.no-results
.no-results-content-group
h2.no-results-title
strong Hmmm... No policy matches
p.no-results-lead
| Try adjusting the
a.no-results-link href="#"
i coverage & term
| over there on the left.
.no-results-hero
img src="holder.js/250" width="250"
.no-results-content-group
p.no-results-lead
strong
i Still no luck?
p.no-results-lead
| Reach out to us at
a.no-results-link href="tel:1800-345-6783" 1-800-345-6783
Layout - Steps
Steps - Used to indicate user progression / multiple steps
Contents:
Vertical Steps
- Default is vertical
- Available classes:
no-bullet: removes the step bullet (useful for divisions in the steps for headings etc)steps-item.active: attach to a steps item to indicate the step is either completed or activesteps-heading: attach to a heading element to describe the stepssteps-lead: used for text in the stepssteps-divider: remove this for the last item in the stepssteps-divider.dotted: change the style of the divider to dotted
The online application
Your policy
Basics
Financial info
Confirm health
Activities & Beneficiaries
Policy questions
Submit for review
.row
.small-6.small-centered.columns
ul.steps
li.steps-item.no-bullet
p.steps-heading.small.subtle.text-uppercase The online application
li.steps-item.active
span.steps-bullet
span.steps-divider
p.steps-lead Your policy
li.steps-item
span.steps-bullet
span.steps-divider
p.steps-lead Basics
li.steps-item
span.steps-bullet
span.steps-divider
p.steps-lead Financial info
li.steps-item
span.steps-bullet
span.steps-divider
p.steps-lead Confirm health
li.steps-item
span.steps-bullet
span.steps-divider
p.steps-lead Activities & Beneficiaries
li.steps-item
span.steps-bullet
span.steps-divider
p.steps-lead Policy questions
li.steps-item
span.steps-bullet
p.steps-lead Submit for review
Steps with numbers
The online application
- 1
Your policy
Content goes here. - 2
Your policy
Content goes here. - 3
Your policy
Content goes here. - 4
Your policy
Content goes here. - 5
Your policy
Content goes here. - 6
Your policy
Content goes here. - 7
Your policy
Content goes here.
.row
.small-6.small-centered.columns
ul.steps.has-number
li.steps-item.no-bullet
p.steps-heading.small.subtle.text-uppercase The online application
li.steps-item.active
span.steps-divider
.steps-item-header
span.steps-bullet 1
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
li.steps-item
span.steps-divider
.steps-item-header
span.steps-bullet 2
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
li.steps-item
span.steps-divider
.steps-item-header
span.steps-bullet 3
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
li.steps-item
span.steps-divider
.steps-item-header
span.steps-bullet 4
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
li.steps-item
span.steps-divider
.steps-item-header
span.steps-bullet 5
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
li.steps-item
span.steps-divider
.steps-item-header
span.steps-bullet 6
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
li.steps-item
.steps-item-header
span.steps-bullet 7
p.steps-lead Your policy
.steps-item-body.row
.medium-6.columns
| Content goes here.
Tooltip - Basic
Tooltip - shows hidden content on hover.
Contents:
Basic Tooltip
.row
.small-12.columns.small-centered
.pg-tooltip aria-haspopup="true" aria-hidden="true"
| What are these?
.pg-tooltip-popup.primary role="tooltip"
span.pg-tooltip-sub Some content goes here.