A layoff. A sabbatical. Caring for a parent. Most calculators pretend it never happens — this one shows you exactly what a career break does to your retirement: how long your cash holds out before you'd crack a 401(k) early, and what the shortfall costs you later. Drop it into your own article in one script tag, and it carries its own identity into your page.
Sibling of <retirement-calc-aca> — the coverage half of the same "what if I step away from work early" question.
Full explanation: What a Job Loss Really Costs Your Retirement →
See it in context
Here's exactly what that looks like — a live instance embedded inside a sample article, using someone else's fonts and colors, not ours. Themed light to blend into a light blog (it ships dark, on-brand, by default).
That's the exact <retirement-calc-careerbreak> widget, unmodified — same script tag, same engine as the full app. See the full picture → · Jump to the embed code ↓
A 50-year-old with $60K in accessible savings and $400K in a 401(k), saving $18K/year, considers a 2-year break at 55 spending $6,000/mo (no severance — a voluntary sabbatical). Their cash covers about 19 months — so a 24-month break outlasts it and forces an early 401(k) withdrawal: a $2,994 penalty. The lasting cost: $1,883/mo less in retirement, every month for life — or about 4 more years of working to rebuild it. That's the real price of the break, and it's the exact figure this calculator's engine returns for that plan.
Everything below is for embedding this calculator on your own site — integration code, theming, and events.
Pick colors that match your site, then copy the CSS snippet at the bottom. (Starts on a light palette — the calculator ships dark, so this previews the most common override.)
retirement-calc-careerbreak {
--rc-accent: #4f8ec9;
--rc-bg: #ffffff;
--rc-surf: #f7f9fc;
--rc-text: #1a1f2e;
}
Drop this into your HTML:
<script src="https://app.retirementscenario.com/embed/v1/career-break.js"></script>
<retirement-calc-careerbreak></retirement-calc-careerbreak>
Or pre-seed values relevant to your audience:
<retirement-calc-careerbreak
current-age="48"
retirement-age="65"
accessible="90000"
pretax="420000"
annual-contribution="22000"
gap-start-age="50">
</retirement-calc-careerbreak>
| Attribute | Default | Range |
|---|---|---|
current-age | 45 | 25 – 64 |
retirement-age | 65 | current-age+1 – 75 |
accessible | 120000 | 0 – 5,000,000 (cash + taxable + Roth contributions — penalty-free) |
pretax | 300000 | 0 – 10,000,000 (401k / traditional IRA) |
annual-contribution | 24000 | 0 – 200,000 (saved per year, until the break) |
ss-monthly | 2500 | 0 – 8,000 (est. monthly Social Security at claim) |
gap-start-age | 52 | current-age – (retirement-age−1) |
refsrc | (none) | partner attribution tag |
Set on the sliders, not attributes: break length, monthly spending during the break, and (job-loss lens only) severance + unemployment income. The lens toggle — job loss vs sabbatical — lives in the widget header; the job-loss lens folds in severance for the first months of the gap, the sabbatical lens assumes none.
Honest scope: a focused single-person model. Flat effective tax on pre-tax draws, ~6% growth, retirement through age 90. Doesn't model a reduced-income sabbatical, a spouse's earnings, ACA subsidies, or a lower salary on return — the full app handles households, real taxes, and ACA. A projection, not a prediction. No data leaves the browser.
The widget ships dark (on-brand for our own articles). Override CSS custom properties on the host to match your site — for a light blog, set the surface/text vars:
retirement-calc-careerbreak {
--rc-accent: #4f8ec9; /* primary — big number, slider thumb, CTA */
--rc-accent2: #3dd68c; /* positive/secondary accent */
--rc-bg: #ffffff; /* card background */
--rc-surf: #f7f9fc; /* sub-surface (result area, slider track) */
--rc-border: rgba(20,30,50,0.10);
--rc-text: #1a1f2e;
--rc-muted: #6a7280;
--rc-red: #f05c5c; /* "runs dry" verdict */
--rc-amber: #f59e0b; /* "cracks the 401(k)" verdict */
--rc-font: inherit; /* pick up your page's font */
}
The element emits two custom events you can listen to (both bubble + composed, so they cross the shadow boundary):
document.querySelector('retirement-calc-careerbreak')
.addEventListener('rc-calculated', (e) => {
console.log('Lens:', e.detail.lens); // 'jobloss' | 'sabbatical'
console.log('Cash runway (months):', e.detail.cashRunwayMonths);
console.log('Cracks 401(k) early?', e.detail.crackedPretax);
console.log('Runs dry before retirement?', e.detail.wentBroke);
console.log('Early-withdrawal penalty ($):', e.detail.penaltyPaid);
console.log('Retirement income cost ($/mo):', e.detail.monthlyIncomeCost);
console.log('Extra working years to rebuild:', e.detail.retireDelayYears);
console.log('Total nest-egg cost ($):', e.detail.nestEggCost);
console.log('Inputs:', e.detail.inputs);
});
document.querySelector('retirement-calc-careerbreak')
.addEventListener('rc-cta-clicked', (e) => {
console.log('User clicked CTA to:', e.detail.url);
});