1. Default — all settings inherited from theme
Baseline instance. No module overrides. Tab labels use the section text color; the active tab and its underline use the section accent. Panel typography, links and the contained width all come from theme tokens. This intro has a sample link.
Powerful Features
Panel body inherits the theme body typography and the section text color. The links use the section link color.
- Advanced analytics dashboard
- Real-time collaboration tools
- Customizable workflows
Why Choose Us
Switching tabs runs a short fixed fade — there are no per-instance animation-type or duration controls anymore.
- Increase efficiency by 40%
- 24/7 dedicated support
Flexible Pricing Plans
Corners, borders and the divider come from theme tokens. The active tab indicator uses the section accent.
- Free tier available
- No hidden fees
2. Dark section (section_variant_4) — legibility
Only the Section style changed. Title, intro, tab labels and panel body should all use the dark-section text color. The active tab uses the dark-section accent. Compare against instance 1.
Dark Section Overview
This panel body text should use the dark-section text color — no white-on-white, no dark-on-dark.
- Tab labels legible
- Active tab uses dark-section accent
Details
The boxed track tint and active tab tint derive from the section palette, so they read correctly on dark.
FAQ
Links in this panel use the dark-section link color.
3. Custom overrides — vertical + pills + 700px width
Layout set to Vertical, tab style Pills, contained width set to a custom 700px. The active pill fills with the section accent; everything else stays theme-driven.
Vertical Pills
The tab list sits to the left in a 240px column; the panel fills the rest. Active pill is accent-filled.
Custom Width
The whole module is capped at 700px and centered (contained width, custom value).
Theme Colors
No color override exists on this module — tab and panel colors still come from the section palette.
4. Animation — shared entrance reveal
Scroll this into view: the entire module reveals with the theme entrance animation (slide up, theme duration + easing). Tab switching still runs its own short fade independently.
Entrance Reveal
The module animates in as a single block (module scope).
Theme Defaults
Speed and easing come from Foundation > Animations — no module-local keyframes for the entrance.
Resilient
No JavaScript? The module simply stays visible. Reduced motion is honored.