Luxury Editorial People Card

cards

Editorial executive card with stats dashboard and direct social link channels.

#card#people#editorial#executive#social#stats

Live Interactive Preview

Julian Vance

Creative Director & Founder

142Projects

12.8kFollowers

GitHub Profile@julianv LinkedIn Network/in/julianv Twitter / X@julianv_ui

Component Source Code

Select language in the dropdown

EditorialPeopleCard.tsx

1'use client';
2
3import React from 'react';
4import { FaGithub, FaLinkedin, FaXTwitter } from 'react-icons/fa6';
5import { Award } from 'lucide-react';
6
7export default function EditorialPeopleCard() {
8  return (
9    <div className="w-full max-w-xs sm:max-w-sm rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 shadow-xl text-slate-900 dark:text-slate-100 transition-colors">
10      <div className="flex items-start justify-between">
11        <div className="flex items-center gap-3">
12          <div className="h-14 w-14 rounded-full bg-gradient-to-tr from-amber-500 via-rose-500 to-violet-600 p-0.5 shadow-md shrink-0">
13            <div className="h-full w-full rounded-full bg-slate-900 flex items-center justify-center font-extrabold text-lg text-amber-400">
14              JV
15            </div>
16          </div>
17          <div>
18            <h3 className="text-base font-extrabold tracking-tight">Julian Vance</h3>
19            <p className="text-xs text-slate-500 dark:text-slate-400">Creative Director &amp; Founder</p>
20          </div>
21        </div>
22        <span className="flex h-8 w-8 items-center justify-center rounded-full bg-amber-50 dark:bg-amber-950/60 text-amber-600 dark:text-amber-400">
23          <Award className="h-4 w-4" />
24        </span>
25      </div>
26
27      <div className="mt-4 grid grid-cols-2 gap-2 rounded-2xl border border-slate-100 dark:border-slate-800/80 bg-slate-50/80 dark:bg-slate-800/40 p-3 text-center">
28        <div>
29          <span className="block text-sm font-extrabold text-slate-900 dark:text-white">142</span>
30          <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Projects</span>
31        </div>
32        <div className="border-l border-slate-200 dark:border-slate-800">
33          <span className="block text-sm font-extrabold text-slate-900 dark:text-white">12.8k</span>
34          <span className="text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Followers</span>
35        </div>
36      </div>
37
38      <div className="mt-5 space-y-2">
39        <a
40          href="https://github.com"
41          target="_blank"
42          rel="noreferrer"
43          className="flex items-center justify-between rounded-xl border border-slate-200 dark:border-slate-800 px-3.5 py-2 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition"
44        >
45          <span className="flex items-center gap-2">
46            <FaGithub className="h-3.5 w-3.5 text-slate-500" />
47            <span>GitHub Profile</span>
48          </span>
49          <span className="text-[10px] font-mono text-slate-400">@julianv</span>
50        </a>
51
52        <a
53          href="https://linkedin.com"
54          target="_blank"
55          rel="noreferrer"
56          className="flex items-center justify-between rounded-xl border border-slate-200 dark:border-slate-800 px-3.5 py-2 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition"
57        >
58          <span className="flex items-center gap-2">
59            <FaLinkedin className="h-3.5 w-3.5 text-blue-600" />
60            <span>LinkedIn Network</span>
61          </span>
62          <span className="text-[10px] font-mono text-slate-400">/in/julianv</span>
63        </a>
64
65        <a
66          href="https://twitter.com"
67          target="_blank"
68          rel="noreferrer"
69          className="flex items-center justify-between rounded-xl border border-slate-200 dark:border-slate-800 px-3.5 py-2 text-xs font-semibold text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition"
70        >
71          <span className="flex items-center gap-2">
72            <FaXTwitter className="h-3.5 w-3.5 text-slate-900 dark:text-white" />
73            <span>Twitter / X</span>
74          </span>
75          <span className="text-[10px] font-mono text-slate-400">@julianv_ui</span>
76        </a>
77      </div>
78    </div>
79  );
80}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/cards/EditorialPeopleCard.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import LuxuryEditorialPeopleCard from '@/components/cards/EditorialPeopleCard';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <LuxuryEditorialPeopleCard />
7    </main>
8  );
9}