# User Profile Card

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

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

```html
<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>

<!-- Header Section -->

  

  
    {{ rows.0.`Full Name` }}

    
      ✉️
      {{ rows.0.`Email` }}
    

    
      📍
      
        {{ rows.0.`Location` }}
      
    
  

<!-- Metrics Section -->

  
    {{ rows.0.values.`Total Orders` }}
    Total Orders
  

  
    {{ rows.0.values.`Lifetime Value` }}
    Lifetime Value
  

  
    {{ rows.0.values.`Avg Order Value` }}
    Avg Order
  

<!-- Details Section -->

  
    Status
    {{ rows.0.`Status` }}
  

  
    Member Since
    {{ rows.0.`Member Since` }}
  

  
    Last Order
    {{ rows.0.`Last Order Date` }}
  

  
    User ID
    {{ rows.0.`User ID` }}
  

```

## 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](https://media.holistics.io/fad18386-sample-data-record-lookup.csv)

This template displays only the first row:

```csv
User ID,Email,Full Name,Profile Image URL,Location,Status,Member Since,Last Order Date,Total Orders,Lifetime Value,Avg Order Value
1005,chaisson.barb@thedoghousemail.com,Chaisson Barb,https://i.pravatar.cc/150?img=5,Berlin,VIP,Jun 2022,Nov 2024,45,6230,138
1002,ciubal.samuel@desilota.com,Ciubal Samuel,https://i.pravatar.cc/150?img=2,Mumbai,Active,Mar 2023,Oct 2024,18,2890,161
1004,homes.dale@ivebeenframed.com,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