Đế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

Tiêu đề lớn

Dành cho màn hình đã đi sâu vào, nơi một dòng chữ lớn phải nói rõ đang ở đâu.

Điều hướng

Xem trước trực tiếp

Nguồn

<header class="dc-bh">
  <div class="dc-bh__bar">
    <button class="dc-bh__back" type="button">
      <span aria-hidden="true">‹</span><span class="dc-sr">뒤로</span>
    </button>
    <button class="dc-bh__act" type="button">
      <span aria-hidden="true">⇪</span><span class="dc-sr">공유</span>
    </button>
  </div>
  <h1 class="dc-bh__title">알림 설정</h1>
  <p class="dc-bh__desc">푸시와 이메일을 따로 켜고 끌 수 있어요. 중요한 배송 알림은 항상 보냅니다.</p>
</header>
.dc-bh {
  padding: 0 var(--dc-4) var(--dc-5);
  padding-top: var(--dc-safe-top);
  background: var(--dc-surface);
  border-bottom: 1px solid var(--dc-line);
  font-family: var(--dc-font);
}
.dc-bh__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 calc(-1 * var(--dc-2));
  padding-top: var(--dc-1);
}
.dc-bh__back,
.dc-bh__act {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--dc-r-full);
  background: transparent; color: var(--dc-text);
  line-height: 1; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-bh__back { font-size: 24px; }
.dc-bh__act { font-size: 18px; }
.dc-bh__back:active,
.dc-bh__act:active { background: var(--dc-sunken); }
.dc-bh__title {
  margin: var(--dc-3) 0 0;
  font-size: 28px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.02em; color: var(--dc-text);
}
.dc-bh__desc {
  margin: var(--dc-2) 0 0;
  font-size: 14px; line-height: 1.6; color: var(--dc-text-sub);
  max-width: 34em;
}
.dc-bh--compact { padding-bottom: var(--dc-2); }
.dc-bh--compact .dc-bh__bar { align-items: center; gap: var(--dc-1); }
.dc-bh--compact .dc-bh__title {
  flex: 1 1 auto; min-width: 0;
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

Cách dùng

  • Mỗi màn hình một h1, và tiêu đề lớn chính là h1 đó
  • Mô tả gói trong một câu, chỉ nói điều tiêu đề không nói được
  • Khi cuộn, thu tiêu đề lớn thành một dòng nhỏ gọn — giữ nút quay lại ở chỗ cũ
  • Dùng ở màn hình đi sâu một cấp, không dùng cho màn hình đầu của một tab

Điểm cần lưu ý

  • Không có --dc-safe-top trong padding-top thì nút quay lại nằm dưới thanh trạng thái
  • Chỉ một dấu ‹ mà thiếu tên dc-sr thì trình đọc chỉ đọc là "liên kết"
  • Cỡ 28px rất dễ xuống dòng; hai dòng thì được, ba dòng là tiêu đề quá dài

Tiếp theo