{% include '@style-variables' -%}
{% include '@self-resources' %}
<div class="wrapper">
<section krt-if="state == 1">
<div class="card">
<div class="card-body">
<!-- 閉じるボタン -->
<button type="button" class="btn btn-close karte-close"
aria-label="閉じる"
>
<i class="icon #{style.closeIcon}" aria-hidden="true"></i>
</button>
<!-- 見出し -->
<h1 class="card-heading">
#{heading}
</h1>
<!-- 詳細テキスト -->
<p class="card-detail">
#{detail}
</p>
<!-- サムネールリスト -->
<ul class="card-list list-thumb columns">
<li>
<a href="#{list.link1}">
<figure>
<img src="#{list.image1}" alt="">
<figcaption>
#{list.heading1}<br>
#{list.detail1}
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#{list.link2}">
<figure>
<img src="#{list.image2}" alt="">
<figcaption>
#{list.heading2}<br>
#{list.detail2}
</figcaption>
</figure>
</a>
</li>
<li>
<a href="#{list.link3}">
<figure>
<img src="#{list.image3}" alt="">
<figcaption>
#{list.heading3}<br>
#{list.detail3}
</figcaption>
</figure>
</a>
</li>
</ul>
<!-- ボタン -->
<div class="card-button">
<ul class="button-block">
<li>
<a class="btn _fit-width"
href="#{btnLink}"
>
#{btnLabel}
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
/* ベース */
figure { margin: 0 }
img {
max-width: 100%;
vertical-align: bottom;
}
button {
margin: 0;
width: auto;
height: auto;
font-family: inherit;
cursor: pointer;
}
a *,
button * { cursor: inherit }
.wrapper {
position: relative;
height: 100%;
text-align: left;
font-size: 12px;
line-height: 1.66667;
}
.wrapper * {
box-sizing: border-box;
white-space: inherit;
font-size: 100%;
line-height: inherit;
}
/* ボタン */
.btn {
transition: .2s;
display: inline-block;
border-radius: 4px;
border: solid 1px transparent;
padding: 13px 16px;
background: #{style.colorMain};
color: #fff;
vertical-align: middle;
text-decoration: none;
text-align: center;
line-height: 1.25;
}
.btn:hover,
.btn:focus { opacity: .75 }
.btn._fit-width { width: 100% }
/* 閉じるボタン */
.btn-close {
position: absolute;
z-index: 1;
border-radius: 50%;
line-height: 1;
transition: .25s;
top: 7px;
right: 7px;
padding: 6px;
background: 0;
color: #{style.closeColor};
}
.btn-close:hover,
.btn-close:focus {
opacity: .5;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.btn-close .icon {
display: inline-block;
vertical-align: top;
}
/* ボタンブロック */
.button-block li { list-style: none }
.button-block.columns > li {
-webkit-flex-basis: calc(~"25% - 10px");
flex-basis: calc(~"25% - 10px");
}
.button-block:not(.columns) li + li { margin-top: 10px }
/* カラム */
.columns {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: -10px 0 0 -10px;
}
.columns > li {
-webkit-flex-grow: 1;
flex-grow: 1;
margin: 10px 0 0 10px;
}
.columns > li { list-style: none }
.card .columns > li {
-webkit-flex-basis: calc(~"25% - 10px");
flex-basis: calc(~"25% - 10px");
}
/* カード */
.card {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
box-shadow: 0 5px 16px rgba(0,0,0,.05), 0 8px 14px rgba(0,0,0,.08);
border-radius: 8px;
width: 320px;
max-width: 90vw;
max-height: calc(~"100vh - 160px");
overflow-y: auto;
background: #{style.colorBg} no-repeat 50%;
background-size: cover;
color: #{style.colorText};
}
.card-body { padding: 18px 20px 0 }
.card-body::after {
display: block;
height: 18px;
content: "";
position: relative;
z-index: -1;
}
.card-body {
position: relative;
overflow: inherit;
}
/* - 見出し */
.card-heading {
color: #{style.colorMain};
font-weight: 600;
font-size: 16px;
line-height: 1.375;
}
.card-heading:not(:last-child) { margin-bottom: .5em }
/* - 詳細テキスト */
.card-detail:not(:last-child) { margin-bottom: 12px }
/* - ボタン */
.card-button:not(:first-child) { margin-top: 16px }
/* - リスト */
.card-list:not(:last-child) { margin-bottom: 12px }
/* サムネールリスト */
.list-thumb a {
transition: .2s;
display: block;
color: inherit;
text-decoration: none;
}
.list-thumb a:hover,
.list-thumb a:focus { opacity: .75 }
.list-thumb figure { text-align: center }
.list-thumb figcaption {
margin-top: .5em;
text-align: left;
line-height: 1.5;
}
name,folder,folder_name,label,data_type,value,preview_value,help,is_required,is_hidden
colorMain,style,スタイル,メインカラー,color,#333,,,,
colorText,style,スタイル,テキストカラー,color,#333,,,,
colorBg,style,スタイル,背景カラー,color,#fff,,,,
closeIcon,style,スタイル,閉じるアイコン,icon,krt-icon-close05,,,,1
closeColor,style,スタイル,閉じるアイコン カラー,color,#999,,,,
image1,list,リスト,画像1,image,https://img-cf.karte.io/image/5a8faf1a7e6a3808aec0cb29::template1_01.png,,,,
heading1,list,リスト,見出し1,text,Coffee Maker,,,,
detail1,list,リスト,詳細1,text,"¥4,752",,,,
link1,list,リスト,リンク1,url,https://example.com/,,,,
image2,list,リスト,画像2,image,https://img-cf.karte.io/image/5a8fafb77e6a3808aec0cb31::template1_02.png,,,,
heading2,list,リスト,見出し2,text,Drip set,,,,
detail2,list,リスト,詳細2,text,"¥3,800",,,,
link2,list,リスト,リンク2,url,https://example.com/,,,,
image3,list,リスト,画像3,image,https://img-cf.karte.io/image/5a8fafc57e6a3808aec0cb36::template1_03.png,,,,
heading3,list,リスト,見出し3,text,kettle,,,,
detail3,list,リスト,詳細3,text,"¥4,800",,,,
link3,list,リスト,リンク3,url,https://example.com/,,,,
heading,,,見出し,text,厳選、コーヒーアイテム,,,,
detail,,,詳細テキスト,text,コーヒー好きためのアイテム揃えました。,,,,
btnLabel,,,ボタン ラベル,text,» ONLINE SHOP,,,,
btnLink,,,ボタン リンク先,text,https://example.com/,,,,