Card 卡片

將資訊收納到容易理解的區塊。

網頁版卡片類型

適用平台：官網、網銀

種類 enable

1. 圖、標、內文、陰影
  • 外框陰影：x0,y0,blur8,#5fc7b9 20% 圓角4px
  • 圖片寬度：Min 卡片寬度1/2、Max卡片寬度3/4
  • 標題：置中 企業色#00a19b font-weight：medium
  • 內文：#1C1C1C font-weight：regular 文字對齊置左

2. 圖、標、內文、線條
  • 線條：#d9d9d9 1px

3. 標、文、超連結

4. 圖、標、文、按鈕
  • 圖片寬度：Min 卡片寬度1/2、Max卡片寬度3/4
  • 按鈕群組距離邊界16px，中間間距8px
  • 如果只有一個，則置中對齊
  • 標題後不可接箭頭

5. 橫式卡片
  • 圖片尺寸：正方形

6. 圖片卡片
  • 底圖為滿版
  • 下方文字區域占比整張卡片1/3，底色#F5F5F5 80%
  • 標題後面+箭頭

app卡片類型

適用平台：行動銀行

種類 enable

1. 一般卡片(按鈕)

  • 按鈕可分一個或兩個形式，兩個即是寬度均分
  • 外框陰影：x0,y0,blur8,#5fc7b9 20% 圓角16px
  • 分隔線： #D9D9D9 1px
  • 標題：#1C1C1C Medium

2. 橫向卡片
  • 內文、圖片、按鈕置上對齊
  • 標題：#1C1C1C Medium
  • 外框陰影：x0,y0,blur8,#5fc7b9 20% 圓角16px

3. 上圖下文、按鈕
  • 外框陰影：x0,y0,blur8,#5fc7b9 20% 圓角16px
  • 分隔線： #D9D9D9 1px
  • 標題：#1C1C1C Medium

直式卡片類型

SAMPLE

陰影卡片

卡片標題

卡片敘述卡片敘述卡片敘述卡片敘述卡片敘述

線框卡片

卡片標題

卡片敘述卡片敘述卡片卡片敘述卡片

範例按鈕

HTML

                                            
//陰影卡片
<div class="card-wrapper card-wrapper-shadow">
    <a href="http://" target="_blank">
        <img src="img/ui/swiperImg.png" class="card-img" alt="">
        <div class="card-info-body">
            <h3 class="card-title">卡片標題 <img src="img/ui/card_arrow.svg" alt="">
            </h3>
            <p class="card-txt">卡片敘述卡片敘述卡片敘述卡片敘述卡片敘述</p>
        </div>
    </a>
</div>

//線框卡片
<div class="card-wrapper card-wrapper-line">
    <a href="http://" target="_blank">
        <img src="img/ui/swiperImg.png" class="card-img" alt="">
        <div class="card-info-body">
            <h3 class="card-title">卡片標題 <img src="img/ui/card_arrow.svg" alt="">
            </h3>
            <p class="card-txt">卡片敘述卡片敘述卡片</p>
            <a class="card-button" href="#">範例按鈕</a>
        </div>
    </a>
</div>
複製

CSS

                                            
.card-wrapper {
padding: 32px 16px;
display: inline-block;
border-radius: 4px;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.card-wrapper:hover {
opacity: 0.7;
}

.card-wrapper .card-title {
margin: 24px auto;
text-align: center;
color: #00a19b;
}

.card-wrapper .card-button {
width: 100%;
max-width: 12.5rem;
height: 4.0625rem;
border-radius: 4px;
text-align: center;
border: solid 1px #00a19b;
color: #00a19b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
margin: 24px auto 0;
}

.card-wrapper .card-button:hover {
opacity: 0.7;
}

.card-wrapper .card-button:disabled {
background: #acacac;
color: #ffffff;
border: none;
cursor: not-allowed;
}

@media (max-width: 768px) {
.card-wrapper .card-button {
    max-width: 8.75rem;
}
}

.card-wrapper .card-txt {
font-size: 16px;
color: #1c1c1c;
margin-bottom: 0;
}

.card-wrapper-shadow {
-webkit-box-shadow: 0 0 8px rgba(95, 199, 185, 0.2);
box-shadow: 0 0 8px rgba(95, 199, 185, 0.2);
}

.card-wrapper-line {
border: 1px solid #d9d9d9;
}
複製