Profile Hero
A digital business card hero with a circular avatar, role tags, tagline, and one-tap contact actions.
Profile Hero
A digital business card hero for public staff or personal profile pages. It centres a circular avatar, name, and role tags above a tagline, then offers a Save Contact button (downloads a vCard) and a row of Call / Email / LINE actions that open the phone dialer, mail client, or LINE directly.
Role tags are not pills — they render as a single dot-separated accent line (Role • Role • Role) under the name, tinted with the theme accent unless a tag sets a custom colour.
Adding in Strapi
- Go to Content Manager > Pages > select your page
- In the Design dynamic zone, click "Add component"
- Select "Heroes" > "Profile Hero"
- Upload an avatar image and enter the person's name
- Optionally add role tags, a tagline, and contact details (phone, email, LINE URL)
- Optionally customise the button labels (e.g. for Thai pages)
- Save and publish
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| avatar | Media (image) | Yes | Profile photo, cropped to a circle — use a square image |
| name | String | Yes | Full display name, also used in the vCard |
| organization | String | No | Company or organisation name (vCard ORG) |
| jobTitle | String | No | Job title (vCard TITLE) |
| roleTags | Component (repeatable) | No | Roles shown under the name as one dot-separated accent line, each with a label and colour |
| tagline | Text | No | Short bio line shown under the tags |
| phone | String | No | Phone number in international format (e.g. +66812345678) |
| No | Email address for the Email button and vCard | ||
| lineUrl | String | No | LINE profile URL (https://line.me/...) |
| saveContactLabel | String | No | Save Contact button label (default "Save Contact") |
| callLabel | String | No | Call button label (default "Call") |
| emailLabel | String | No | Email button label (default "Email") |
| lineLabel | String | No | LINE button label (default "LINE") |
Variants
Default
The full business card layout: avatar, name, role tags, tagline, gold Save Contact CTA, and the Call / Email / LINE button row.
Best for: Staff profile pages where visitors should save the contact or reach out in one tap.
Thai
The same layout with Thai content and translated button labels — all labels are editor-controlled per locale.
MinimalFields
Only the required fields (name) plus role-tag-free rendering. Buttons only appear when their corresponding field is filled in.
Tips
- Use a square avatar of at least 400x400 pixels; it is displayed as a circle.
- Enter phone numbers in international format so
tel:links dial correctly abroad. - Each contact button renders only when its field is set — leave fields empty to hide buttons.
- The Save Contact button downloads a vCard built from name, organization, jobTitle, phone, email, LINE URL, and the avatar photo.