78 lines
1.9 KiB
HTML
78 lines
1.9 KiB
HTML
<!-- 다크 오버레이 카드: 배경 이미지 + 흰 텍스트 오버레이 -->
|
|
<!--
|
|
📋 card-dark-overlay
|
|
─────────────────
|
|
용도: 키워드+짧은 설명을 시각적으로 강조. 이미지 위에 다크 오버레이 + 흰 텍스트.
|
|
슬롯: cards[] (각 카드에 image, title, description)
|
|
Figma 원본: 2-2_01 > 아이콘 카드 5열 (협업지원, 오류감소, 생산성향상 등)
|
|
-->
|
|
<div class="block-card-dark" style="--cd-count: {{ cards|length }}">
|
|
{% for card in cards %}
|
|
<div class="cd-card">
|
|
{% if card.image %}
|
|
<img class="cd-bg" src="{{ card.image }}" alt="">
|
|
{% else %}
|
|
<div class="cd-bg cd-bg-default"></div>
|
|
{% endif %}
|
|
<div class="cd-overlay">
|
|
<div class="cd-title">{{ card.title }}</div>
|
|
{% if card.description %}<div class="cd-desc">{{ card.description }}</div>{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<style>
|
|
.block-card-dark {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--cd-count, 3), 1fr);
|
|
gap: 12px;
|
|
}
|
|
.cd-card {
|
|
position: relative;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
height: 200px;
|
|
}
|
|
.cd-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
.cd-bg-default {
|
|
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
|
}
|
|
.cd-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 2;
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
.cd-title {
|
|
font-size: 18px;
|
|
font-weight: 800;
|
|
line-height: 1.3;
|
|
margin-bottom: 6px;
|
|
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
|
}
|
|
.cd-desc {
|
|
white-space: pre-line;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
opacity: 0.9;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
|
|
white-space: pre-line;
|
|
}
|
|
</style>
|