Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Header judul besar

Untuk layar yang sudah masuk ke dalam, di mana satu baris huruf besar harus memastikan kita di mana.

Navigasi

Pratinjau langsung

Sumber

<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;
}

Cara memakainya

  • Satu h1 per layar, dan judul besar itulah h1-nya
  • Deskripsi cukup satu kalimat, hanya menyampaikan yang tidak bisa dikatakan judul
  • Saat digulir, ringkas judul besar menjadi satu baris pendek — biarkan tombol kembali di tempatnya
  • Pakai di layar satu tingkat ke dalam, bukan di layar pertama sebuah tab

Hal yang perlu diwaspadai

  • Tanpa --dc-safe-top pada padding-top, tombol kembali jatuh di bawah status bar
  • Tanda ‹ tanpa nama dc-sr hanya dibacakan sebagai "tautan"
  • Pada 28px judul mudah turun ke baris kedua; dua baris wajar, tiga baris berarti judulnya terlalu panjang

Berikutnya