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

Khối mở đầu

Khối đầu trang, nơi người mới có năm giây để biết chỗ này làm gì cho họ và nên bấm gì tiếp.

Bố cục

Xem trước trực tiếp

Nguồn

<section class="dc-hero">
  <div class="dc-hero__body">
    <p class="dc-hero__eyebrow">한국에서 일하는 사람을 위해</p>
    <h1 class="dc-hero__title">내 비자로 일할 수 있는 자리만 보여 줍니다</h1>
    <p class="dc-hero__lead">E-9, H-2, F-4 — 비자를 고르면 지원할 수 없는 공고는 목록에서 사라집니다. 가입하지 않고 먼저 둘러보세요.</p>
    <div class="dc-hero__actions">
      <button type="button" class="dc-hero__btn">일자리 찾기</button>
      <button type="button" class="dc-hero__btn dc-hero__btn--ghost">회사로 가입하기</button>
    </div>
    <p class="dc-hero__note">6개 언어로 볼 수 있습니다 · 구직자 수수료 없음</p>
  </div>
</section>
.dc-hero { padding:var(--dc-8) var(--dc-6); border:1px solid var(--dc-line); border-radius:var(--dc-r-lg); background:linear-gradient(180deg, var(--dc-brand-soft), var(--dc-surface)); font-family:var(--dc-font); }
.dc-hero__body { max-width:640px; margin-inline:auto; text-align:center; }
.dc-hero__eyebrow { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-brand-text); }
.dc-hero__title { margin:0; font-size:34px; font-weight:800; line-height:1.22; letter-spacing:-.01em; color:var(--dc-text); }
.dc-hero__lead { margin:var(--dc-4) 0 0; font-size:16px; line-height:1.65; color:var(--dc-text-sub); }
.dc-hero__actions { display:flex; flex-wrap:wrap; gap:var(--dc-3); justify-content:center; margin-top:var(--dc-6); }
.dc-hero__btn { min-height:48px; padding:0 var(--dc-6); border:1px solid transparent; border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:16px; font-weight:700; transition:background var(--dc-fast); }
.dc-hero__btn:hover { background:var(--dc-brand-hi); }
.dc-hero__btn--ghost { background:var(--dc-surface); border-color:var(--dc-line-field); color:var(--dc-text); }
.dc-hero__btn--ghost:hover { background:var(--dc-sunken); }
.dc-hero__note { margin:var(--dc-4) 0 0; font-size:13px; color:var(--dc-text-mute); }
.dc-hero__art { display:flex; align-items:center; justify-content:center; min-height:210px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-sunken); }
.dc-hero__artmark { font-size:13px; color:var(--dc-text-mute); }
.dc-hero--media { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--dc-7); align-items:center; }
.dc-hero--media .dc-hero__body { max-width:none; margin-inline:0; text-align:left; }
.dc-hero--media .dc-hero__actions { justify-content:flex-start; }
.dc-hero--compact { padding:var(--dc-6); }
.dc-hero--compact .dc-hero__title { font-size:22px; }
@media (max-width:760px) {
  .dc-hero { padding:var(--dc-7) var(--dc-4); }
  .dc-hero--compact { padding:var(--dc-5) var(--dc-4); }
  .dc-hero__title { font-size:26px; }
  .dc-hero--media { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
  .dc-hero__btn { width:100%; }
}

Cách dùng

  • Viết tiêu đề theo điều người ta nhận được, không phải theo tên sản phẩm — "Chỉ việc mà visa của bạn làm được"
  • Tối đa hai nút: một nút chính, thêm một nút cho nhóm người dùng khác
  • Không cần ảnh nếu ảnh chẳng nói thêm gì. Khối chỉ có chữ còn hơn ảnh trang trí

Điểm cần lưu ý

  • Tiêu đề này là h1 duy nhất của trang
  • Đừng giữ cỡ chữ máy tính trên điện thoại — 34px sẽ thành bốn dòng chật chội

Tiếp theo