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​

KineticAI 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). KineticAI can generate an AMP4Email twin, built after the kinetic version using the finished kinetic HTML as its parity reference. kinetic.email is an approved AMP4Email sender, so Gmail renders the AMP version of emails sent from the platform (recipients need dynamic email enabled in their Gmail settings).

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