विभाजक रेखा

खाली ठाउँले मात्र दुई भाग छुट्टिएको नदेखिने बेला एउटै मसिनो रेखा तान्ने टुक्रा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<div class="dc-divide">
  <p class="dc-divide__text">지원 서류는 회사가 확인한 뒤 연락합니다.</p>
  <hr class="dc-divide__rule" />
  <p class="dc-divide__text">연락이 오지 않으면 7일 뒤에 다시 물어볼 수 있습니다.</p>
</div>

.dc-divide { font-family:var(--dc-font); }
.dc-divide__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-divide__rule { height:1px; margin:var(--dc-5) 0; border:0; background:var(--dc-line); }
.dc-divide__labeled { display:flex; align-items:center; gap:var(--dc-3); margin:var(--dc-5) 0; }
.dc-divide__labeled::before, .dc-divide__labeled::after { content:""; flex:1 1 0; height:1px; background:var(--dc-line); }
.dc-divide__label { font-size:12px; font-weight:600; color:var(--dc-text-mute); }
.dc-divide__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--dc-2); margin:0; font-size:13px; color:var(--dc-text-sub); }
.dc-divide__mitem { white-space:nowrap; }
.dc-divide__vr { flex:0 0 auto; width:1px; height:1em; background:var(--dc-line-bold); }

कसरी प्रयोग गर्ने

खाली ठाउँले छुट्टिने भए रेखा नराख्नु — खाली ठाउँ नपुग्दा मात्र रेखा राख्ने
रेखाको माथि र तल समान खाली ठाउँ राख्नु; नमिल्दा रेखा कुन भागको हो भ्रम हुन्छ
छुट्याउनुको कारण भन्न सकिन्छ भने — 'वा' — अक्षरसहितको रेखा प्रयोग गर्नु

ध्यान दिनुपर्ने कुरा

सजावटको रेखामा hr नभई बोर्डर प्रयोग गर्नु, र ठाडो सजावटी रेखामा aria-hidden राख्नु
रेखाको रङ --dc-line मै राख्नु; गाढा बनाए रेखा सामग्रीभन्दा पहिले देखिन्छ

अर्को

एप स्क्रिनको ढाँचा लेआउट एप

स्क्रोलसँगै खुम्चिने हेडर लेआउट एप

कार्ड थुप्रो लेआउट एप

तेर्सो स्क्रोल लाइन लेआउट एप