Template Web [Editar]

Nome

Ativo

HTML

<style>body { font-family: Arial, sans-serif; background: rgba(245, 245, 245, 1); margin: 0 }
.card-container { max-width: 420px; margin: auto; background: rgba(255, 255, 255, 1); border-radius: 16px; overflow: hidden }
.header { text-align: center; padding: 30px 20px; background: linear-gradient(135deg, rgba(13, 110, 253, 1), rgba(0, 198, 255, 1)); color: rgba(255, 255, 255, 1) }
.avatar { width: 110px; height: 110px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 1); object-fit: cover }
.header h1 { margin: 10px 0 5px; font-size: 22px }
.header p { margin: 0; font-size: 14px }
.company { font-size: 12px; opacity: 0.8 }
.actions { display: flex; gap: 10px; padding: 15px }
.btn { flex: 1; text-align: center; padding: 12px; border-radius: 10px; color: rgba(255, 255, 255, 1); text-decoration: none; font-weight: bold }
.call { background: rgba(40, 167, 69, 1) }
.whatsapp { background: rgba(37, 211, 102, 1) }
.email { background: rgba(0, 123, 255, 1) }
.section { padding: 15px }
.item { display: flex; gap: 10px; margin-bottom: 10px }
.item a { text-decoration: none; color: rgba(51, 51, 51, 1) }
.social { display: flex; justify-content: space-around; padding: 10px }
.social a { color: rgba(13, 110, 253, 1); text-decoration: none }
.save { padding: 20px }
.save-btn { background: rgba(0, 0, 0, 1); display: block }</style>

<br><br>
<div class="card-container">

    
    <div class="header">
        <img class="avatar" src="{{PhotoUrl}}">
        <h1>{{DisplayName}}</h1>
        <p>{{JobTitle}}</p>
        <span class="company">{{CompanyName}}</span>
    </div>

    
    <div class="actions">
        <a class="btn call">Ligar</a>
        <a href="https://wa.me/{{Mobile}}" class="btn whatsapp">WhatsApp</a>
        <a class="btn email">Email</a>
    </div>

    
    <div class="section">
        <div class="item">
            <span>📞</span>
            <a>{{Mobile}}</a>
        </div>

        <div class="item">
            <span>✉️</span>
            <a>{{Email}}</a>
        </div>

        <div class="item">
            <span>🌐</span>
            <a href="{{Site}}" target="_blank">{{Site}}</a>
        </div>
    </div>

    
    <div class="social">
        <a href="{{LinkedIn}}" target="_blank">LinkedIn</a>
        <a href="{{Instagram}}" target="_blank">Instagram</a>
        <a href="{{Facebook}}" target="_blank">Facebook</a>
    </div>

    
    <div class="save">
        <a href="/contact/vcard/{{Id}}" class="btn save-btn">
            Guardar contacto
        </a>
    </div>

</div>

Tokens disponíveis:
{{displayName}}, {{jobTitle}}, {{email}}, {{mobile}}, {{site}}, {{whatsapp}}, {{vcard}}, {{publicUrl}}