EmailReveal

The EmailReveal component provides an elegant way to display contact information with privacy-conscious reveal functionality. It integrates tooltips, icons, and accessibility features while maintaining clean visual design and spam protection.

<EmailReveal user="hello" domain="example.com" />

API Reference

Props

State Management

• Initial State: Icon button with “Click to reveal” tooltip
• Revealed State: Email address displayed with mailto link
• Interactive Elements: Hover effects and focus management

Design Philosophy

Privacy-First Approach

The reveal pattern provides:

• Spam protection by hiding email from bots
• User control over when contact info is exposed
• Progressive disclosure reducing visual clutter
• Professional appearance with interactive polish

Accessibility Integration

Built with accessibility in mind:

• Proper ARIA labels for screen readers
• Keyboard navigation support throughout
• Focus management with visible indicators
• Meaningful hover states and feedback

Features

Integrated Tooltip System

Uses the design system’s Tooltip component:

• Contextual hints before and after reveal
• Position control (bottom placement by default)
• Theme compatibility with light/dark modes
• Smooth transitions matching component feel

Icon Integration

Leverages the Icon component system:

• Semantic mail icon for clear communication
• Consistent sizing (24px for visual balance)
• Color integration using primary color (Jasper)
• Hover effects with brightness adjustment

Visual Design

Clean, minimal approach:

• Typography hierarchy using design system tokens
• Proper spacing with consistent scale
• Color strategy focusing attention appropriately
• Professional polish suitable for business contexts

Usage Examples

Basic Implementation

<script>
import EmailReveal from '$lib/shared/components/interactive/EmailReveal.svelte';
</script>

<EmailReveal user="contact" domain="company.com" />

In Contact Sections

<section class="contact">
  <h2>Get in Touch</h2>
  <div class="contact-methods">
    <EmailReveal user="hello" domain="yoursite.com" />
    <p>Available Monday through Friday, 9AM-5PM EST</p>
  </div>
</section>

Multiple Contact Points

<div class="team-contacts">
  <div class="contact-card">
    <h3>Sales</h3>
    <EmailReveal user="sales" domain="company.com" />
  </div>

  <div class="contact-card">
    <h3>Support</h3>
    <EmailReveal user="support" domain="company.com" />
  </div>

  <div class="contact-card">
    <h3>General</h3>
    <EmailReveal user="info" domain="company.com" />
  </div>
</div>

Implementation Details

Component Structure

The component follows a clean architecture:

1. Conditional rendering based on revealed state
2. Tooltip integration for user guidance
3. Icon system usage for visual consistency
4. Event handling for interaction management

State Transitions

Smooth interaction flow:

1. Initial: Icon with reveal tooltip
2. Click: State changes to revealed
3. Revealed: Email shown with mailto tooltip
4. Click email: Opens default mail client

Styling Strategy

Uses design system tokens:

• Typography: Caption for headings, body for content
• Colors: Primary for focus, muted for descriptions
• Spacing: Consistent scale throughout
• Layout: Flexbox for alignment and responsiveness

Best Practices

Content Guidelines

1. Use clear descriptions that explain the purpose
2. Keep user/domain split logical for your use case
3. Provide context about response expectations
4. Consider multiple contact methods for different purposes

User Experience

1. Make reveal purpose clear with good tooltip text
2. Ensure email opens correctly in user’s mail client
3. Test on various devices for touch and click interactions
4. Consider loading states if used with dynamic content

Privacy Considerations

1. Understand spam protection limits (bots can still find revealed emails)
2. Consider additional protection for highly sensitive addresses
3. Document reveal behavior for users who need to know
4. Test with screen readers for accessibility compliance

Advanced Usage

Custom Descriptions

<EmailReveal user="collaborate" domain="studio.com">
  <p slot="description">
    For partnership opportunities and creative collaborations.
    We typically respond within 24 hours.
  </p>
</EmailReveal>

Integration with Forms

<div class="contact-options">
  <div class="option">
    <h3>Quick Contact</h3>
    <EmailReveal user="quick" domain="help.com" />
  </div>

  <div class="option">
    <h3>Detailed Inquiry</h3>
    <ContactForm />
  </div>
</div>

Accessibility Features

• ARIA labels provide context for assistive technology
• Focus indicators show keyboard navigation clearly
• Semantic markup uses appropriate HTML elements
• Screen reader support announces state changes appropriately

Browser Support

• Modern browsers with CSS custom properties support
• Progressive enhancement works without JavaScript
• Touch devices support tap interactions properly
• Keyboard navigation works across all supported browsers