រំលងទៅខ្លឹមសារ

ក្បាលផ្នែក

បែងចែកទំព័រវែងជាផ្នែកៗ ដោយប្រាប់ក្នុងមួយបន្ទាត់ថា ចាប់ពីទីនេះមានអ្វី។

ប្លង់

មើលជាមុនផ្ទាល់

ប្រភព

<header class="dc-sechead">
  <div class="dc-sechead__text">
    <p class="dc-sechead__eyebrow">제조 · 경기</p>
    <h2 class="dc-sechead__title">지금 모집 중인 일자리</h2>
    <p class="dc-sechead__desc">내 비자로 일할 수 있는 자리만 남겨 둡니다. 매일 아침 다시 확인합니다.</p>
  </div>
  <div class="dc-sechead__actions">
    <a class="dc-sechead__link" href="#">전체 보기</a>
    <button type="button" class="dc-sechead__btn">조건 바꾸기</button>
  </div>
</header>
.dc-sechead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--dc-4); font-family:var(--dc-font); }
.dc-sechead__text { min-width:0; max-width:58ch; }
.dc-sechead__eyebrow { margin:0 0 var(--dc-1); font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--dc-brand-text); }
.dc-sechead__title { margin:0; font-size:22px; font-weight:700; line-height:1.3; color:var(--dc-text); }
.dc-sechead__desc { margin:var(--dc-2) 0 0; font-size:14px; line-height:1.6; color:var(--dc-text-sub); }
.dc-sechead__count { margin-left:var(--dc-2); font-size:14px; font-weight:600; color:var(--dc-text-mute); }
.dc-sechead__actions { display:flex; align-items:center; gap:var(--dc-3); flex-shrink:0; }
.dc-sechead__link { font-size:14px; font-weight:600; color:var(--dc-brand); text-decoration:underline; }
.dc-sechead__btn { min-height:40px; padding:0 var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); font-size:14px; font-weight:600; color:var(--dc-text); transition:background var(--dc-fast); }
.dc-sechead__btn:hover { background:var(--dc-sunken); }
.dc-sechead--center { flex-direction:column; align-items:center; text-align:center; }
.dc-sechead--rule { align-items:center; padding-bottom:var(--dc-3); border-bottom:1px solid var(--dc-line); }
@media (max-width:600px) {
  .dc-sechead { align-items:stretch; }
  .dc-sechead--center { align-items:center; }
  .dc-sechead__actions { width:100%; }
  .dc-sechead__btn { flex:1 1 auto; min-height:44px; }
}

របៀបប្រើ

  • ដាក់ឈ្មោះតាមមាតិកា — "ការងារកំពុងជ្រើសរើស" មិនមែន "បញ្ជី"
  • បន្ថែមបន្ទាត់ពិពណ៌នាតែពេលក្បាលមិនគ្រប់គ្រាន់; បើមិនចាំបាច់ កាត់ចេញ
  • ប៊ូតុងខាងស្ដាំត្រូវប៉ះពាល់តែផ្នែកនេះ; សកម្មភាពទូទាំងទំព័រដាក់នៅក្បាលទំព័រ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

  • ប្រើ h2 ឬ h3 ពិតតាមកម្រិតដែលឃើញ — p ដែលគ្រាន់តែពង្រីក នឹងបាត់ពីបញ្ជីក្បាល
  • ពេលក្បាលនិងប៊ូតុងមិនអាចដាក់មួយជួរ សូមដាក់ប៊ូតុងនៅក្រោម ហើយឲ្យវាពេញទទឹង

បន្ទាប់