Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Hero

The first block of a page, where a new visitor has five seconds to learn what this place does for them and what to press next.

Layout

Live preview

Source

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

How to use it

  • Write the headline as what people get, not what the product is — "Only jobs your visa allows", not "Job search service"
  • Two buttons at most: one primary, plus one for a different kind of visitor
  • Skip the image if it adds nothing. A text-only hero beats a decorative photo

Watch out for

  • Make the headline the page's one and only h1
  • Don't keep the desktop type size on a phone — 34px turns into four cramped lines

Next