Created
February 27, 2026 01:32
-
-
Save milstan/bec474f1c7363da5b3fc964c58cbce0f to your computer and use it in GitHub Desktop.
Leadbay — Contact table column mockups for #3052
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Leadbay — Contact Column Mockups</title> | |
| <style> | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| background: #f5f6f8; | |
| color: #1a1a2e; | |
| padding: 40px; | |
| line-height: 1.5; | |
| } | |
| h1 { font-size: 14px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } | |
| h2 { font-size: 20px; font-weight: 700; color: #1a1a2e; margin-bottom: 16px; } | |
| .section { margin-bottom: 48px; } | |
| .card { | |
| background: #fff; | |
| border-radius: 12px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); | |
| overflow: hidden; | |
| } | |
| /* Toolbar */ | |
| .toolbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 12px 16px; | |
| border-bottom: 1px solid #e5e7eb; | |
| background: #fafbfc; | |
| } | |
| .tab-group { display: flex; gap: 2px; } | |
| .tab { | |
| padding: 6px 14px; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: #6b7280; | |
| cursor: pointer; | |
| } | |
| .tab.active { background: #1a1a2e; color: #fff; } | |
| .search { | |
| flex: 1; | |
| padding: 6px 12px 6px 32px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat; | |
| max-width: 240px; | |
| } | |
| .toggle-wrapper { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: #374151; | |
| margin-left: auto; | |
| white-space: nowrap; | |
| } | |
| .toggle { | |
| width: 36px; height: 20px; | |
| background: #3b82f6; | |
| border-radius: 10px; | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .toggle::after { | |
| content: ''; | |
| width: 16px; height: 16px; | |
| background: #fff; | |
| border-radius: 50%; | |
| position: absolute; | |
| top: 2px; right: 2px; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.2); | |
| } | |
| .toggle.off { background: #d1d5db; } | |
| .toggle.off::after { right: auto; left: 2px; } | |
| .sort-btn { | |
| padding: 6px 12px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 6px; | |
| font-size: 13px; | |
| color: #6b7280; | |
| background: #fff; | |
| cursor: pointer; | |
| } | |
| /* Table */ | |
| table { width: 100%; border-collapse: collapse; } | |
| thead th { | |
| padding: 8px 12px; | |
| text-align: left; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: #9ca3af; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| border-bottom: 1px solid #e5e7eb; | |
| background: #fafbfc; | |
| } | |
| tbody td { | |
| padding: 10px 12px; | |
| font-size: 13px; | |
| border-bottom: 1px solid #f3f4f6; | |
| vertical-align: middle; | |
| } | |
| tbody tr:hover { background: #f8fafc; } | |
| tbody tr.selected { background: #eff6ff; } | |
| /* Checkbox */ | |
| .cb { | |
| width: 16px; height: 16px; | |
| border: 1.5px solid #d1d5db; | |
| border-radius: 4px; | |
| display: inline-block; | |
| } | |
| /* Status dot */ | |
| .status { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| padding: 2px 8px 2px 6px; | |
| border-radius: 12px; | |
| } | |
| .status .dot { | |
| width: 7px; height: 7px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| .status.wanted { background: #dbeafe; color: #1d4ed8; } | |
| .status.wanted .dot { background: #3b82f6; } | |
| .status.inbound { background: #fef3c7; color: #92400e; } | |
| .status.inbound .dot { background: #f59e0b; } | |
| .status.default { background: #f3f4f6; color: #6b7280; } | |
| .status.default .dot { background: #9ca3af; } | |
| .status.won { background: #d1fae5; color: #065f46; } | |
| .status.won .dot { background: #10b981; } | |
| /* Contact cell */ | |
| .contact-cell { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| min-width: 0; | |
| } | |
| .contact-icon { | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 13px; | |
| flex-shrink: 0; | |
| } | |
| .contact-icon.person { | |
| background: #ede9fe; | |
| color: #7c3aed; | |
| } | |
| .contact-icon.company { | |
| background: #fef3c7; | |
| color: #d97706; | |
| } | |
| .contact-icon.enrich { | |
| background: #f3f4f6; | |
| color: #6b7280; | |
| } | |
| .contact-info { | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 0; | |
| gap: 1px; | |
| } | |
| .contact-name { | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: #1a1a2e; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| .contact-name .title { | |
| font-weight: 400; | |
| color: #6b7280; | |
| } | |
| .contact-phone { | |
| font-size: 12px; | |
| color: #3b82f6; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .contact-phone:hover { text-decoration: underline; } | |
| .contact-email { | |
| font-size: 12px; | |
| color: #3b82f6; | |
| text-decoration: none; | |
| white-space: nowrap; | |
| } | |
| .contact-enrich-label { | |
| font-size: 12px; | |
| color: #9ca3af; | |
| white-space: nowrap; | |
| } | |
| .contact-empty { | |
| color: #d1d5db; | |
| font-size: 13px; | |
| } | |
| .enrich-badge { | |
| font-size: 11px; | |
| padding: 1px 6px; | |
| background: #f3f4f6; | |
| color: #6b7280; | |
| border-radius: 8px; | |
| white-space: nowrap; | |
| } | |
| .phone-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 3px; | |
| font-size: 11px; | |
| color: #9ca3af; | |
| } | |
| /* Company name */ | |
| .company-name { | |
| font-weight: 600; | |
| color: #1a1a2e; | |
| } | |
| .company-sector { | |
| font-size: 11px; | |
| color: #9ca3af; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 180px; | |
| } | |
| /* Score */ | |
| .score { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 22px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| border-radius: 6px; | |
| } | |
| .score.high { background: #d1fae5; color: #065f46; } | |
| .score.medium { background: #fef3c7; color: #92400e; } | |
| .score.low { background: #f3f4f6; color: #6b7280; } | |
| /* Section labels */ | |
| .mockup-label { | |
| display: inline-block; | |
| margin-top: 8px; | |
| margin-bottom: 4px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| color: #fff; | |
| background: #7c3aed; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| } | |
| .mockup-note { | |
| font-size: 12px; | |
| color: #6b7280; | |
| margin-top: 2px; | |
| margin-bottom: 12px; | |
| } | |
| /* Discover compact */ | |
| .discover-contact { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: #6b7280; | |
| } | |
| .discover-contact .title-badge { | |
| font-weight: 500; | |
| color: #374151; | |
| } | |
| .discover-contact .icon-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 2px; | |
| font-size: 11px; | |
| } | |
| .mini-icon { | |
| width: 14px; height: 14px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 10px; | |
| } | |
| .separator { color: #d1d5db; } | |
| /* Variant highlight */ | |
| .variant-row { position: relative; } | |
| .variant-row::after { | |
| content: attr(data-variant); | |
| position: absolute; | |
| right: 8px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 10px; | |
| font-weight: 600; | |
| color: #fff; | |
| background: #7c3aed; | |
| padding: 1px 6px; | |
| border-radius: 4px; | |
| opacity: 0.9; | |
| } | |
| .legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| margin-top: 12px; | |
| padding: 12px 16px; | |
| background: #fafbfc; | |
| border-radius: 8px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| color: #6b7280; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ===== SECTION 1: MONITOR TABLE ===== --> | |
| <div class="section"> | |
| <h1>Mockup 1</h1> | |
| <h2>Monitor Table — Contact Column (toggle ON)</h2> | |
| <div class="card"> | |
| <div class="toolbar"> | |
| <div class="tab-group"> | |
| <div class="tab">Discover</div> | |
| <div class="tab active">Monitor</div> | |
| <div class="tab">Activate</div> | |
| </div> | |
| <input class="search" placeholder="Search leads..." /> | |
| <div class="toggle-wrapper"> | |
| <div class="toggle"></div> | |
| Show contacts | |
| </div> | |
| <button class="sort-btn">Sort ↓</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th style="width:32px"></th> | |
| <th>Company</th> | |
| <th>Location</th> | |
| <th>Size</th> | |
| <th>Status</th> | |
| <th style="min-width: 260px">Recommended contact</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Row 1: Org contact with phone (BEST CASE) --> | |
| <tr class="selected"> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Dassault Systemes</div> | |
| <div class="company-sector">Enterprise Software</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>5,001-10K</td> | |
| <td><span class="status wanted"><span class="dot"></span>wanted</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">J. Martin, <span class="title">VP Sales</span></div> | |
| <a class="contact-phone" href="tel:+33612345678">📞 +33 6 12 34 56 78</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 2: Org contact with email, no phone --> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">BioMerieux SA</div> | |
| <div class="company-sector">Biotechnology</div> | |
| </td> | |
| <td>Lyon, FR</td> | |
| <td>10,001+</td> | |
| <td><span class="status wanted"><span class="dot"></span>wanted</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">C. Bernard, <span class="title">CTO</span></div> | |
| <a class="contact-email" href="mailto:c.bernard@biomerieux.com">✉️ c.bernard@biomerieux.com</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 3: Org contact, no phone or email --> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Capgemini</div> | |
| <div class="company-sector">IT Consulting</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>10,001+</td> | |
| <td><span class="status won"><span class="dot"></span>won</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">P. Dubois, <span class="title">Director</span></div> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 4: No org contacts, company phone + recommended title --> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">OVHcloud</div> | |
| <div class="company-sector">Cloud Infrastructure</div> | |
| </td> | |
| <td>Roubaix, FR</td> | |
| <td>1,001-5K</td> | |
| <td><span class="status inbound"><span class="dot"></span>inbound</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon company">🏢</div> | |
| <div class="contact-info"> | |
| <a class="contact-phone" href="tel:+33320001234">📞 +33 3 20 00 12 34</a> | |
| <span class="contact-enrich-label">Company phone · ask for CEO</span> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 5: Only enrichable contacts --> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Doctolib</div> | |
| <div class="company-sector">Health Tech</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>1,001-5K</td> | |
| <td><span class="status wanted"><span class="dot"></span>wanted</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon enrich">🔍</div> | |
| <div class="contact-info"> | |
| <div class="contact-name" style="color: #6b7280;">VP Sales</div> | |
| <span class="contact-enrich-label">5 contacts to enrich</span> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 6: Only company phone, no title --> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Atos SE</div> | |
| <div class="company-sector">IT Services</div> | |
| </td> | |
| <td>Bezons, FR</td> | |
| <td>10,001+</td> | |
| <td><span class="status default"><span class="dot"></span>default</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon company">🏢</div> | |
| <div class="contact-info"> | |
| <a class="contact-phone" href="tel:+33173260000">📞 +33 1 73 26 00 00</a> | |
| <span class="contact-enrich-label">Company phone</span> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <!-- Row 7: Nothing --> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Startup XYZ</div> | |
| <div class="company-sector">SaaS</div> | |
| </td> | |
| <td>Bordeaux, FR</td> | |
| <td>1-10</td> | |
| <td><span class="status default"><span class="dot"></span>default</span></td> | |
| <td> | |
| <span class="contact-empty">—</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="legend"> | |
| <div class="legend-item"> | |
| <div class="contact-icon person" style="width:20px;height:20px;font-size:10px">👤</div> | |
| Personal contact (org contact) | |
| </div> | |
| <div class="legend-item"> | |
| <div class="contact-icon company" style="width:20px;height:20px;font-size:10px">🏢</div> | |
| Company switchboard | |
| </div> | |
| <div class="legend-item"> | |
| <div class="contact-icon enrich" style="width:20px;height:20px;font-size:10px">🔍</div> | |
| Contact to enrich | |
| </div> | |
| <div class="legend-item"> | |
| <span style="color:#3b82f6">📞 phone</span> | |
| Click to call (tel: link) | |
| </div> | |
| <div class="legend-item"> | |
| <span style="color:#3b82f6">✉️ email</span> | |
| Click to email (mailto: link) | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===== SECTION 2: DISCOVER TABLE (Compact) ===== --> | |
| <div class="section"> | |
| <h1>Mockup 2</h1> | |
| <h2>Discover Table — Contact Column (lightweight)</h2> | |
| <div class="card"> | |
| <div class="toolbar"> | |
| <div class="tab-group"> | |
| <div class="tab active">Discover</div> | |
| <div class="tab">Monitor</div> | |
| <div class="tab">Activate</div> | |
| </div> | |
| <input class="search" placeholder="Search leads..." /> | |
| <div class="toggle-wrapper"> | |
| <div class="toggle"></div> | |
| Show contacts | |
| </div> | |
| <button class="sort-btn">Sort ↓</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th style="width:32px"></th> | |
| <th>Company</th> | |
| <th>Location</th> | |
| <th>Size</th> | |
| <th>Score</th> | |
| <th>Contact hints</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Dassault Systemes</div> | |
| <div class="company-sector">Enterprise Software</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>5,001-10K</td> | |
| <td><span class="score high">92</span></td> | |
| <td> | |
| <div class="discover-contact"> | |
| <span class="title-badge">VP Sales</span> | |
| <span class="separator">·</span> | |
| <span class="icon-badge">📞</span> | |
| <span class="separator">·</span> | |
| <span class="enrich-badge">👤 3</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Doctolib</div> | |
| <div class="company-sector">Health Tech</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>1,001-5K</td> | |
| <td><span class="score high">87</span></td> | |
| <td> | |
| <div class="discover-contact"> | |
| <span class="title-badge">CEO</span> | |
| <span class="separator">·</span> | |
| <span class="enrich-badge">5 contacts</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">OVHcloud</div> | |
| <div class="company-sector">Cloud Infrastructure</div> | |
| </td> | |
| <td>Roubaix, FR</td> | |
| <td>1,001-5K</td> | |
| <td><span class="score medium">74</span></td> | |
| <td> | |
| <div class="discover-contact"> | |
| <span class="title-badge">CTO</span> | |
| <span class="separator">·</span> | |
| <span class="icon-badge">📞</span> | |
| <span class="separator">·</span> | |
| <span class="enrich-badge">8 contacts</span> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Startup XYZ</div> | |
| <div class="company-sector">SaaS</div> | |
| </td> | |
| <td>Bordeaux, FR</td> | |
| <td>1-10</td> | |
| <td><span class="score low">52</span></td> | |
| <td><span class="contact-empty">—</span></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- ===== SECTION 3: ACTIVATE TABLE ===== --> | |
| <div class="section"> | |
| <h1>Mockup 3</h1> | |
| <h2>Activate Table — Ready to Prospect (toggle ON)</h2> | |
| <div class="card"> | |
| <div class="toolbar"> | |
| <div class="tab-group"> | |
| <div class="tab">Discover</div> | |
| <div class="tab">Monitor</div> | |
| <div class="tab active">Activate</div> | |
| </div> | |
| <input class="search" placeholder="Search leads..." /> | |
| <div class="toggle-wrapper"> | |
| <div class="toggle"></div> | |
| Show contacts | |
| </div> | |
| <button class="sort-btn">Sort ↓</button> | |
| </div> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th style="width:32px"></th> | |
| <th>Company</th> | |
| <th>Location</th> | |
| <th>Size</th> | |
| <th>Score</th> | |
| <th style="min-width: 260px">Recommended contact</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Schneider Electric</div> | |
| <div class="company-sector">Industrial Automation</div> | |
| </td> | |
| <td>Rueil, FR</td> | |
| <td>10,001+</td> | |
| <td><span class="score high">94</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">A. Leroy, <span class="title">Sales Director</span></div> | |
| <a class="contact-phone" href="tel:+33698765432">📞 +33 6 98 76 54 32</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Criteo</div> | |
| <div class="company-sector">AdTech</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>1,001-5K</td> | |
| <td><span class="score high">88</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">S. Kim, <span class="title">Head of Partnerships</span></div> | |
| <a class="contact-email" href="mailto:s.kim@criteo.com">✉️ s.kim@criteo.com</a> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">Mirakl</div> | |
| <div class="company-sector">Marketplace Platform</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>501-1K</td> | |
| <td><span class="score medium">76</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon enrich">🔍</div> | |
| <div class="contact-info"> | |
| <div class="contact-name" style="color: #6b7280;">COO</div> | |
| <span class="contact-enrich-label">3 contacts to enrich</span> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td><span class="cb"></span></td> | |
| <td> | |
| <div class="company-name">ContentSquare</div> | |
| <div class="company-sector">Analytics</div> | |
| </td> | |
| <td>Paris, FR</td> | |
| <td>501-1K</td> | |
| <td><span class="score medium">71</span></td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon company">🏢</div> | |
| <div class="contact-info"> | |
| <a class="contact-phone" href="tel:+33155350000">📞 +33 1 55 35 00 00</a> | |
| <span class="contact-enrich-label">Company phone · ask for VP Sales</span> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- ===== SECTION 4: CELL VARIANTS REFERENCE ===== --> | |
| <div class="section"> | |
| <h1>Reference</h1> | |
| <h2>All Contact Cell Variants (single-line compact)</h2> | |
| <div class="card" style="padding: 20px;"> | |
| <table style="max-width: 500px;"> | |
| <thead> | |
| <tr> | |
| <th style="width: 24px">#</th> | |
| <th>Contact cell</th> | |
| <th style="font-size:10px">Data source</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">1</td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person" style="width:24px;height:24px;font-size:11px">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">J. Martin, <span class="title">VP Sales</span></div> | |
| <a class="contact-phone" href="#">📞 +33 6 12 34 56 78</a> | |
| </div> | |
| </div> | |
| </td> | |
| <td style="font-size:11px;color:#9ca3af">recommended_contact<br>+ phone_number</td> | |
| </tr> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">2</td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person" style="width:24px;height:24px;font-size:11px">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">C. Bernard, <span class="title">CTO</span></div> | |
| <a class="contact-email" href="#">✉️ c.bernard@biomerieux.com</a> | |
| </div> | |
| </div> | |
| </td> | |
| <td style="font-size:11px;color:#9ca3af">recommended_contact<br>+ email (future)</td> | |
| </tr> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">3</td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon person" style="width:24px;height:24px;font-size:11px">👤</div> | |
| <div class="contact-info"> | |
| <div class="contact-name">P. Dubois, <span class="title">Director</span></div> | |
| </div> | |
| </div> | |
| </td> | |
| <td style="font-size:11px;color:#9ca3af">recommended_contact<br>(no phone/email)</td> | |
| </tr> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">4</td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon company" style="width:24px;height:24px;font-size:11px">🏢</div> | |
| <div class="contact-info"> | |
| <a class="contact-phone" href="#">📞 +33 3 20 00 12 34</a> | |
| <span class="contact-enrich-label">Company phone · ask for CEO</span> | |
| </div> | |
| </div> | |
| </td> | |
| <td style="font-size:11px;color:#9ca3af">phone_numbers<br>+ recommended_title</td> | |
| </tr> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">5</td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon company" style="width:24px;height:24px;font-size:11px">🏢</div> | |
| <div class="contact-info"> | |
| <a class="contact-phone" href="#">📞 +33 1 73 26 00 00</a> | |
| <span class="contact-enrich-label">Company phone</span> | |
| </div> | |
| </div> | |
| </td> | |
| <td style="font-size:11px;color:#9ca3af">phone_numbers only</td> | |
| </tr> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">6</td> | |
| <td> | |
| <div class="contact-cell"> | |
| <div class="contact-icon enrich" style="width:24px;height:24px;font-size:11px">🔍</div> | |
| <div class="contact-info"> | |
| <div class="contact-name" style="color: #6b7280;">VP Sales</div> | |
| <span class="contact-enrich-label">5 contacts to enrich</span> | |
| </div> | |
| </div> | |
| </td> | |
| <td style="font-size:11px;color:#9ca3af">recommended_title<br>+ contacts_count</td> | |
| </tr> | |
| <tr> | |
| <td style="font-size:11px;color:#7c3aed;font-weight:700">7</td> | |
| <td><span class="contact-empty">—</span></td> | |
| <td style="font-size:11px;color:#9ca3af">nothing available</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment