Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Đầu trang hồ sơ

Cho biết người này là ai và việc có thể làm ngay bây giờ là theo dõi họ hay sửa hồ sơ của mình.

Phương tiện

Xem trước trực tiếp

Nguồn

<header class="dc-ph">
  <div class="dc-ph__top">
    <span class="dc-ph__avatar" aria-hidden="true">김</span>
    <dl class="dc-ph__stats">
      <div class="dc-ph__stat">
        <dt class="dc-ph__stat-k">기록</dt>
        <dd class="dc-ph__stat-v">128</dd>
      </div>
      <div class="dc-ph__stat">
        <dt class="dc-ph__stat-k">팔로워</dt>
        <dd class="dc-ph__stat-v">2,410</dd>
      </div>
      <div class="dc-ph__stat">
        <dt class="dc-ph__stat-k">팔로잉</dt>
        <dd class="dc-ph__stat-v">86</dd>
      </div>
    </dl>
  </div>
  <div class="dc-ph__ident">
    <h1 class="dc-ph__name">김도현</h1>
    <p class="dc-ph__handle">@dohyun · 3공구 현장 기사</p>
    <p class="dc-ph__bio">타설·양생 기록 담당입니다. 사진은 매일 퇴근 전에 올립니다.</p>
  </div>
  <div class="dc-ph__actions">
    <button class="dc-ph__btn dc-ph__btn--primary" type="button">팔로우</button>
    <button class="dc-ph__btn" type="button">메시지</button>
    <button class="dc-ph__icon" type="button">
      <span aria-hidden="true">⋮</span><span class="dc-sr">더보기</span>
    </button>
  </div>
</header>
.dc-ph {
  /* 사진 위에 올라가는 글자와 배지는 두 테마에서 같은 쪽이어야 한다. 스크림이
     밝은 모드에서도 어두우므로 글자는 늘 밝은 쪽, 배지 바탕은 늘 어두운 쪽이다.
     고정색을 적는 대신 토큰을 양쪽에서 뒤집어 그 두 값을 만든다. */
  --dc-on-media: var(--dc-text-on);
  display: grid;
  gap: var(--dc-4);
  padding: var(--dc-4);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
@media (prefers-color-scheme: dark) {
  .dc-ph {
    --dc-on-media: var(--dc-text);
  }
}
.dc-ph__top {
  display: flex;
  align-items: center;
  gap: var(--dc-4);
}
.dc-ph__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--dc-r-full);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--dc-brand) 72%, var(--dc-sunken)),
    color-mix(in srgb, var(--dc-info) 58%, var(--dc-sunken)));
  color: var(--dc-on-media);
  font-size: 26px;
  font-weight: 700;
}
.dc-ph__stats {
  flex: 1 1 auto;
  display: flex;
  justify-content: space-around;
  gap: var(--dc-2);
  margin: 0;
}
.dc-ph__stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  min-width: 56px;
}
.dc-ph__stat-k {
  font-size: 12px;
  color: var(--dc-text-sub);
}
.dc-ph__stat-v {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--dc-text);
}
.dc-ph__ident { display: grid; gap: var(--dc-1); }
.dc-ph__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dc-text);
}
.dc-ph__handle {
  font-size: 13px;
  color: var(--dc-text-mute);
}
.dc-ph__bio {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dc-text-sub);
}
.dc-ph__actions {
  display: flex;
  align-items: center;
  gap: var(--dc-2);
}
.dc-ph__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 44px;
  padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-size: 15px;
  font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-ph__btn:active { background: var(--dc-sunken); }
.dc-ph__btn--primary {
  border-color: transparent;
  background: var(--dc-brand);
  color: var(--dc-text-on);
}
.dc-ph__btn--primary:active { background: var(--dc-brand-hi); }
.dc-ph__btn--wide { flex: 1 1 100%; }
.dc-ph__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface);
  color: var(--dc-text);
  font-size: 18px;
  line-height: 1;
}
.dc-ph__icon:active { background: var(--dc-sunken); }
.dc-ph--cover { gap: 0; padding: 0; }
.dc-ph__cover {
  height: 132px;
  background:
    radial-gradient(120% 90% at 78% 20%,
      color-mix(in srgb, var(--dc-ok) 46%, var(--dc-sunken)),
      transparent 60%),
    linear-gradient(150deg,
      color-mix(in srgb, var(--dc-brand) 46%, var(--dc-sunken)),
      var(--dc-sunken));
}
.dc-ph--cover .dc-ph__top {
  margin-top: calc(-1 * var(--dc-8));
  padding: 0 var(--dc-4);
  align-items: flex-end;
}
.dc-ph--cover .dc-ph__avatar {
  width: 84px;
  height: 84px;
  border: 3px solid var(--dc-surface);
  box-shadow: var(--dc-sh-2);
}
.dc-ph--cover .dc-ph__ident { padding: var(--dc-4) var(--dc-4) 0; }
.dc-ph--cover .dc-ph__actions { padding: var(--dc-4); }

Cách dùng

  • Tối đa ba con số; thêm con thứ tư thì chẳng con nào đọng lại
  • Ở hồ sơ của chính mình, một nút rộng "Sửa hồ sơ" thay cho theo dõi — đừng để giống trang người khác
  • Giới thiệu hai dòng là đủ, phần còn lại cắt bớt; nhân vật chính của màn hình nằm bên dưới
  • Không có ảnh thì dùng chữ đầu của tên — vòng tròn xám trống trông như tải lỗi

Điểm cần lưu ý

  • column-reverse đưa số lên trên nhãn về mặt hình ảnh, nhưng trình đọc vẫn đọc "Người theo dõi 2.410" — hãy kiểm tra xem có hiểu được không
  • Nếu các con số bấm được, hãy biến chúng thành nút hoặc liên kết; thẻ dd bấm vào không xảy ra gì
  • Khi ảnh đại diện trồi lên trên ảnh bìa, hãy viền nó để tách khỏi ảnh

Tiếp theo