Tabs — Comparison / Options Variant

What it does

• Tab strip across the top — clearly labeled tabs let the learner switch between options with one click
• Parallel content layout — every tab follows the same internal structure (overview, key features, pros/cons) so comparisons are easy
• Active-tab indicator — the current tab is visibly highlighted so the learner never loses their place
• Smooth content swap — switching tabs fades or slides the panel rather than jarring the page
• Keyboard friendly — left/right arrow navigation moves through the tabs

Best use cases

• Personal finance — comparing account types, retirement vehicles, mortgage products
• SaaS and subscription products — plan tier comparison, feature breakdown by tier
• Real estate — comparing loan types, neighborhood profiles, inspection reports
• Healthcare — comparing treatment options, insurance plans, procedure types
• Education and certification — comparing certification paths, degree options, course tracks

What you can change with your DNA

When you run this through the remix skill, your CCOS DNA — brand, voice, audience — drives these decisions automatically:

• Colors — slots for page background, tab bar background, active tab color, panel background, and accent
• Fonts — two roles: a display font for tab labels and headings, plus a body font for panel content
• Copy — title, intro line, tab labels, and the parallel content per tab (overview, feature list, pros/cons, summary)
• Images — optional icon per tab, plus an image or chart slot per panel
• Behavior — choose the number of tabs, the default open tab, and the swap animation style