Skip to main content

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​

The AI Playground supports seven kinetic techniques: Tabs, Accordion, Survey, Quiz, Menu, Carousel, and Item Cart.

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.

Mobile width budget: max 4 tabs. Label character limits scale with tab count — 16 chars for 2 tabs, 10 for 3, 7 for 4 (~30 chars total). A dedicated QA check enforces this so tab rows never overflow on mobile.

Use cases: Product details, feature comparisons, FAQ sections

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

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

Item Cart​

Input type: Checkboxes (one per item)

Each item has a checkbox that toggles its "in cart" state — an "Add to cart" button that flips to an "Added!" indicator when clicked. The cart state is visual only; a final "View cart" / "Checkout" CTA hands off to the hosted cart on the web.

Use cases: Product grids, multi-item promotions, replenishment emails

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). The playground can generate an AMP4Email twin alongside the kinetic HTML build. Note: AMP sender approval from Google is pending for kinetic.email, so Gmail currently shows the HTML fallback for emails sent from the platform.

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

Email Client Support​

TechniqueApple MailGmailYahooOutlookSamsung
TabsFullFullFullFallbackFull
CarouselFullFullFullFallbackFull
SurveyFullFullFullFallbackFull
QuizFullFullFullFallbackFull
AccordionFullFullFullFallbackFull
MenuFullFullPartialFallbackFull
Item CartFullFullFullFallbackFull
AMP4EmailNoneFullPartialNoneNone

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