User Profile Card

A detailed profile view combining images, metrics, and contact information in a polished card layout.

Best for: CRM dashboards, customer support tools, user management interfaces

Key techniques: Profile images, metric cards, external links (email, maps), status badges with dynamic classes

Template Code

<style>
  .record-card {
    max-width: 600px;
    background-color: white;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  .record-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
  }

  .record-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .record-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.375rem;
  }

  .record-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
  }

  .record-email {
    font-size: 0.875rem;
    color: #6366F1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .record-email:hover {
    text-decoration: underline;
  }

  .record-location {
    font-size: 0.875rem;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .record-location a {
    color: inherit;
    text-decoration: none;
  }

  .record-location a:hover {
    color: #4B5563;
    text-decoration: underline;
  }

  .record-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #E5E7EB;
  }

  .metric-item {
    padding: 1.25rem;
    text-align: center;
    border-right: 1px solid #E5E7EB;
  }

  .metric-item:last-child {
    border-right: none;
  }

  .metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
  }

  .metric-label {
    font-size: 0.75rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
  }

  .record-details {
    padding: 1.5rem;
  }

  .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #F3F4F6;
  }

  .detail-row:last-child {
    border-bottom: none;
  }

  .detail-label {
    font-size: 0.875rem;
    color: #6B7280;
    font-weight: 500;
  }

  .detail-value {
    font-size: 0.875rem;
    color: #111827;
    font-weight: 600;
  }

  .status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .status-badge.active,
  .status-badge.ACTIVE {
    background-color: #DEF7EC;
    color: #047857;
  }

  .status-badge.vip,
  .status-badge.VIP {
    background-color: #FEF3C7;
    color: #92400E;
  }

  .status-badge.new,
  .status-badge.NEW {
    background-color: #DBEAFE;
    color: #1E3A8A;
  }

  @media (max-width: 640px) {
    .record-header {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 1rem;
    }

    .record-image {
      margin: 0 auto;
    }

    .record-email,
    .record-location {
      justify-content: center;
    }

    .record-metrics {
      grid-template-columns: 1fr;
    }

    .metric-item {
      border-right: none;
      border-bottom: 1px solid #E5E7EB;
    }

    .metric-item:last-child {
      border-bottom: none;
    }
  }
</style>

<div class="record-card">

<!-- Header Section -->
<div class="record-header">
  <img src="{{ rows.0.`Profile Image URL`.raw }}" alt="{{ rows.0.`Full Name`.formatted }}" class="record-image" />

  <div class="record-info">
    <div class="record-name">{{ rows.0.`Full Name` }}</div>

    <a href="mailto:{{ rows.0.`Email`.raw }}" class="record-email">
      <span>✉️</span>
      {{ rows.0.`Email` }}
    </a>

    <div class="record-location">
      <span>📍</span>
      <a href="https://www.google.com/maps/search/?api=1&query={{ rows.0.`Location`.raw }}" target="_blank" rel="noopener">
        {{ rows.0.`Location` }}
      </a>
    </div>
  </div>
</div>

<!-- Metrics Section -->
<div class="record-metrics">
  <div class="metric-item">
    <div class="metric-value">{{ rows.0.values.`Total Orders` }}</div>
    <div class="metric-label">Total Orders</div>
  </div>

  <div class="metric-item">
    <div class="metric-value">{{ rows.0.values.`Lifetime Value` }}</div>
    <div class="metric-label">Lifetime Value</div>
  </div>

  <div class="metric-item">
    <div class="metric-value">{{ rows.0.values.`Avg Order Value` }}</div>
    <div class="metric-label">Avg Order</div>
  </div>
</div>

<!-- Details Section -->
<div class="record-details">
  <div class="detail-row">
    <span class="detail-label">Status</span>
    <span class="status-badge {{ rows.0.`Status`.raw }}">{{ rows.0.`Status` }}</span>
  </div>

  <div class="detail-row">
    <span class="detail-label">Member Since</span>
    <span class="detail-value">{{ rows.0.`Member Since` }}</span>
  </div>

  <div class="detail-row">
    <span class="detail-label">Last Order</span>
    <span class="detail-value">{{ rows.0.`Last Order Date` }}</span>
  </div>

  <div class="detail-row">
    <span class="detail-label">User ID</span>
    <span class="detail-value">{{ rows.0.`User ID` }}</span>
  </div>
</div>

</div>

Required Data Fields

Field	Type	Description
Full Name	Dimension	User's full name
Email	Dimension	Email address
Location	Dimension	City or address
Profile Image URL	Dimension	URL to profile photo
Status	Dimension	Status value (e.g., "active", "vip", "new")
Member Since	Dimension	Registration date
Last Order Date	Dimension	Most recent order date
User ID	Dimension	Unique identifier
Total Orders	Measure	Order count
Lifetime Value	Measure	Total customer value
Avg Order Value	Measure	Average order amount

Sample Data

Import this data into Holistics to use: sample-data-record-lookup.csv

This template displays only the first row:

User ID,Email,Full Name,Profile Image URL,Location,Status,Member Since,Last Order Date,Total Orders,Lifetime Value,Avg Order Value
1005,[email protected],Chaisson Barb,https://i.pravatar.cc/150?img=5,Berlin,VIP,Jun 2022,Nov 2024,45,6230,138
1002,[email protected],Ciubal Samuel,https://i.pravatar.cc/150?img=2,Mumbai,Active,Mar 2023,Oct 2024,18,2890,161
1004,[email protected],Homes Dale,https://i.pravatar.cc/150?img=4,Medan,Active,Feb 2024,Oct 2024,12,1680,140

Customization Tips

• Add more status badge styles by creating new CSS classes (e.g., .status-badge.churned)
• The status badge automatically applies styling based on the raw value matching a CSS class
• Use rows.0 (dot notation) for single-record displays
• External links use .raw values to avoid formatting issues in URLs