कार्ड थुप्रो
लामो स्क्रिनलाई कार्डमा टुक्रा पारी थुपारेर एउटा खण्ड कहाँ सकिन्छ आँखाले छुट्याउन दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<div class="dc-stack">
<a class="dc-stack__card" href="#">
<span class="dc-stack__kicker">오늘 마감</span>
<span class="dc-stack__title">식품 포장 · 평택</span>
<span class="dc-stack__meta">일당 130,000원 · 08:00~17:00</span>
<span class="dc-stack__foot">
<span class="dc-stack__tag">초보 가능</span>
<span class="dc-stack__tag">기숙사</span>
</span>
</a>
<a class="dc-stack__card" href="#">
<span class="dc-stack__title">용접 보조 · 김해</span>
<span class="dc-stack__meta">일당 160,000원 · 주 5일</span>
<span class="dc-stack__foot">
<span class="dc-stack__tag">경력 1년</span>
<span class="dc-stack__tag">통근 버스</span>
</span>
</a>
<a class="dc-stack__card" href="#">
<span class="dc-stack__title">호텔 객실 정리 · 제주</span>
<span class="dc-stack__meta">월급 2,450,000원 · 4대 보험</span>
<span class="dc-stack__foot">
<span class="dc-stack__tag">숙식 제공</span>
</span>
</a>
</div>.dc-stack {
display: flex; flex-direction: column; gap: var(--dc-3);
font-family: var(--dc-font);
}
.dc-stack__card {
display: flex; flex-direction: column; gap: var(--dc-1);
min-height: 72px; padding: var(--dc-4);
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
background: var(--dc-surface); box-shadow: var(--dc-sh-1);
color: var(--dc-text); text-decoration: none;
transition: background var(--dc-fast);
}
.dc-stack__card:active { background: var(--dc-sunken); }
.dc-stack__kicker {
font-size: 11px; font-weight: 800; letter-spacing: .02em;
color: var(--dc-danger);
}
.dc-stack__title { font-size: 16px; font-weight: 700; }
.dc-stack__meta { font-size: 13px; color: var(--dc-text-sub); }
.dc-stack__foot {
display: flex; flex-wrap: wrap; gap: var(--dc-1);
margin-top: var(--dc-2);
}
.dc-stack__tag {
padding: 3px var(--dc-2);
border-radius: var(--dc-r-full);
background: var(--dc-sunken);
font-size: 11px; font-weight: 700; color: var(--dc-text-sub);
}
.dc-stack--overlap { gap: 0; }
.dc-stack--overlap .dc-stack__card {
border-radius: var(--dc-r-lg);
border-color: var(--dc-line-bold);
box-shadow: var(--dc-sh-2);
}
.dc-stack--overlap .dc-stack__card:not(:last-child) {
/* 겹치는 24px 은 아래 여백으로만 덮는다 — 글자가 가려지면 스택이 아니라 버그다 */
padding-bottom: calc(var(--dc-4) + var(--dc-6));
}
.dc-stack--overlap .dc-stack__card + .dc-stack__card {
margin-top: calc(var(--dc-6) * -1);
padding-top: var(--dc-6);
}
.dc-stack--overlap .dc-stack__kicker {
/* 쿠폰 유효기간은 급한 일이 아니다 — 빨강은 '오늘 마감' 에만 쓴다 */
color: var(--dc-text-sub);
}
.dc-stack--grouped {
gap: 0; overflow: hidden;
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
background: var(--dc-surface);
}
.dc-stack--grouped .dc-stack__card {
border: 0; border-radius: 0; box-shadow: none;
min-height: 64px; padding: var(--dc-3) var(--dc-4);
}
.dc-stack--grouped .dc-stack__card + .dc-stack__card {
border-top: 1px solid var(--dc-line);
}कसरी प्रयोग गर्ने
- एक कार्डमा एउटै कुरा राख्नुहोस् — दुई शीर्षक चाहिए भने कार्ड पनि दुईटा हुन्छ
- कार्डबीचको खाली ठाउँ कार्डभित्रको padding भन्दा साँघुरो नबनाउनुहोस्, नत्र एउटै कार्ड देखिन्छ
- सूची लामो भए कार्ड नछोपेर क्रमै राख्नुहोस्; छोपेर राख्ने शैली कुपनजस्तो थोरै कार्डमा मात्र
ध्यान दिनुपर्ने कुरा
- पूरै कार्ड थिच्न मिल्ने भए भित्र अर्को लिङ्क नराख्नुहोस्
- सबै कार्डको छायाँ एउटै राख्नुहोस् — फरक छायाँले नचाहिँदो वरीयता देखाउँछ
- छोपेर राख्दा तलको कार्डको शीर्षक लाइनसम्म नढाक्नुहोस्