ठूलो शीर्षक हेडर
भित्र गहिरो पसेको पर्दामा 'यो कहाँ हो' भन्ने कुरा एक ठूलो लाइनले ठोकी दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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;
}कसरी प्रयोग गर्ने
- एक पर्दामा एक h1 — ठूलो शीर्षक नै त्यो h1 हो
- विवरण एक वाक्य; शीर्षकले भन्न नसक्ने कुरा मात्र लेख्नुहोस्
- स्क्रोल गर्दा ठूलो शीर्षकलाई सानो एक लाइनमा खुम्च्याउनुहोस् — पछाडि बटन त्यहीँ राख्नुहोस्
- ट्याबको पहिलो पर्दामा नभई एक तह भित्र पसेको पर्दामा चलाउनुहोस्
ध्यान दिनुपर्ने कुरा
- padding-top मा --dc-safe-top नराखे पछाडि बटन स्टाटस बारमुनि पर्छ
- खाली ‹ मात्र राखी dc-sr नाम छुटाए स्क्रिन रिडरले 'लिंक' मात्र पढ्छ
- २८px को शीर्षक सजिलै दुई लाइन हुन्छ; दुईसम्म ठीक, तीन भए शीर्षक छोट्याउनुहोस्