Kinetic Email Techniques

Kinetic emails use pure CSS and HTML form elements to create interactive experiences inside the inbox. No JavaScript is required — interactivity is achieved through the CSS :checked pseudo-class on hidden <input> elements.

The Core Pattern

<!-- Hidden input (the state holder) -->
<!--[if !mso]><!-->
<input type="radio" id="tab1" name="tabs" checked style="display:none">
<!--<![endif]-->

<!-- Label (the trigger) -->
<label for="tab1">Tab 1</label>

<!-- Content (shown/hidden based on :checked) -->
<style>
  #tab1:checked ~ .content .panel-1 { display: block !important; }
</style>

Key principles:

1. Hidden inputs store state (checked/unchecked)
2. Labels trigger state changes (clicking a label toggles its input)
3. CSS :checked selectors show/hide content based on input state
4. MSO conditional comments hide inputs from Outlook (which doesn't support them)
5. Fallback content uses table-based layout visible to all clients

Techniques

Tabs

Input type: Radio buttons (same name = mutually exclusive)

Users see a row of tab labels. Clicking a tab shows its content panel and hides others. Most common kinetic technique.

Use cases: Product details, feature comparisons, FAQ sections

Carousel

Input type: Radio buttons + navigation arrows/dots

Image or content slider with previous/next arrows and indicator dots. One panel visible at a time.

Use cases: Product galleries, image showcases, story slides

Survey

Input type: Radio buttons (progressive disclosure)

Questions revealed one at a time. Selecting an answer automatically shows the next question.

Use cases: Customer feedback, preference collection, NPS surveys

Quiz

Input type: Similar to survey, with correct/incorrect reveals

Interactive quiz with answer options. Selecting an answer reveals whether it's correct or incorrect.

Use cases: Educational content, engagement campaigns, gamification

Accordion

Input type: Checkboxes (multiple can be open simultaneously)

Expandable/collapsible sections with plus/minus indicators. Unlike tabs, multiple sections can be open at once.

Use cases: FAQ sections, detailed product specs, terms & conditions

Menu (Hamburger)

Input type: Checkbox (toggle open/close)

A hamburger menu icon that toggles an overlay navigation panel. Includes a close button label.

Use cases: Mobile-optimized navigation, extensive link lists

Stepper

Input type: Radio buttons with progress indicator

Multi-step wizard flow. Progress bar shows current position. Each step is a panel with forward/back navigation.

Use cases: Onboarding flows, multi-part tutorials, checkout previews

Toggle

Input type: Checkbox (simple on/off)

Binary switch for showing/hiding content. Often styled as a visual toggle switch.

Use cases: Dark mode switch, show/hide details, opt-in toggles

AMP4Email

Framework: AMP HTML components

Uses Google's AMP for Email framework (amp-carousel, amp-accordion, amp-bind, amp-form, amp-list, amp-selector). Requires AMP validation and is only supported in Gmail (and Yahoo experimentally).

Use cases: Real-time content, form submissions, dynamic data

Email Client Support

Technique	Apple Mail	Gmail	Yahoo	Outlook	Samsung
Tabs	Full	Full	Full	Fallback	Full
Carousel	Full	Full	Full	Fallback	Full
Survey	Full	Full	Full	Fallback	Full
Quiz	Full	Full	Full	Fallback	Full
Accordion	Full	Full	Full	Fallback	Full
Menu	Full	Full	Partial	Fallback	Full
Stepper	Full	Full	Full	Fallback	Full
AMP4Email	None	Full	Partial	None	None

Full: Complete interactive experience Partial: Some limitations Fallback: Static content shown (tables only, no interactivity) None: Not supported

Critical Rules

1. 6 separate <style> blocks — Prevents Gmail from stripping all styles if one selector fails
2. MSO conditional comments — <!--[if !mso]><!-->...<!--<![endif]--> hides interactive content from Outlook
3. 6-digit hex colors only — Never use rgb(), rgba(), or named colors (Outlook ignores them)
4. Inline styles on fallback — Outlook has limited <style> support
5. Table structure for fallback — Outlook doesn't support <div> layout
6. Triple-redundancy hiding — display: none !important; max-height: 0 !important; overflow: hidden !important
7. Lightswitch pattern — Default-checked checkbox that controls kinetic content visibility