- Home
- Smart Design
- Component
- PC
- Box
Box
- This page is about text containers and how to use them.
Type
Default (thick-line)
Use this to display important fields such as customer information in aEnter text here.
xxxxxxxxxx1
<div class="ec-base-box"> 2
<p>Enter text here.</p>3
</div>Center divider
Use this to create a divider line in the middle.
xxxxxxxxxx1
<div class="ec-base-box gHalf">2
<p>Enter text here.</p>3
<p>Enter text here.</p>4
</div>Thin-line
This box has thinner lines than the default type box.
Thin-line boxes can be used when expanded.
xxxxxxxxxx1
<div class="ec-base-box typeThin">2
<p>Enter text here.</p>3
</div>Background color
Background color is added to the default type box.
xxxxxxxxxx1
<div class="ec-base-box typeBg">2
<p>Enter text here.</p>3
</div>Background color + thin-line
Background color added to thin-line type box
Thin-line boxes can be used when extended.
xxxxxxxxxx1
<div class="ec-base-box typeThinBg"> 2
<p>Enter text here.</p>3
</div>Grid/Margin/Alignment
Box + box
Use this to display a box’s line thickness as 1px when stacking thin-line boxes next to each other.
xxxxxxxxxx1
<div class="ec-base-box typeThin">2
<p>Content to be entered into this field.</p>3
</div>4
<div class="ec-base-box typeThinBg gMerge">5
<p>Content to be entered into this field.</p>6
</div>Center-align
You can edit a box’s size and alignment values by adding CSS style to .ec-base-box in the specified $MODULE (module).
xxxxxxxxxx1
<!--Center align --> 2
<div module="MODULE" class="ec-base-box">3
<div class="ec-base-box typeThinBg">4
<p class="ec-base-help">Enter text here.</p>5
</div>6
<div class="ec-base-box typeThin typeMember gMerge">7
<div class="information">8
<span class="thumbnail"><img src="//img.echosting.cafe24.com/skin/base/member/img_member_default.gif" alt="" /></span>9
<div class="description">10
<p><strong>name</strong>Name is a [group_name] member.</p>11
<dl class="ec-base-desc typeBullet gMedium">12
<dt>Text</dt>13
<dd>content</dd>14
<dt>Text</dt>15
<dd>content</dd>16
</dl>17
</div>18
</div>19
</div>20
</div>21
<!--CSS source example-->22
.Module { width:600px; margin:0 auto; }Application
Terms of Use
Background color + thin-line type box combination is commonly used in Terms of Use.
xxxxxxxxxx1
<div class="ec-base-box typeThinBg">2
<div class="agree">3
<p>Enter text here.</p>4
</div>5
</div>Product selection
Can be used as UI.
xxxxxxxxxx1
<div class="ec-base-box typeProduct">2
<p class="thumbnail"><a href="#none"><img src="//img.echosting.cafe24.com/thumb/75x75.gif" alt="" /></a></p>3
<div class="information">4
<h3>Product name</h3>5
<strong class="txtEm">KRW 10,000</strong>6
<p class="button">7
<a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_prd_detail.gif" alt="View product details" /></a>8
<a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_prd_select.gif" alt="Select product information" /></a>9
<a href="#none"><img src="//img.echosting.cafe24.com/skin/base_ko_KR/board/btn_prd_order.gif" alt="Select orders" /></a>10
</p>11
</div>12
</div>Customer information
UI to show customer information.
xxxxxxxxxx1
<!--Customer information-->2
<div class="ec-base-box typeMember">3
<div class="information">4
<strong class="thumbnail"><img src="//uidevdmp.cafe24.com/web/upload/mg_img_btn_mem_group_b2.gif" alt="" /><br />Top-align</strong>5
<div class="description">6
<p><strong>○○○</strong>is a [VIP] member.</p>7
<ul>8
<li>Enter text here.</li>9
<li>Enter text here.</li>10
</ul>11
</div>12
</div>13
</div>14
<!--Customer information expandable type-->15
<div class="ec-base-box typeThinBg">16
<p class="ec-base-help">Enter text here.</p>17
</div>18
<div class="ec-base-box typeThin typeMember gMerge">19
<div class="information">20
<strong class="thumbnail"><img src="//uidevdmp.cafe24.com/web/upload/mg_img_btn_mem_group_b2.gif" alt="" /><br />Top-align</strong>21
<div class="description">22
<p><strong>○○○</strong>is a [VIP] member.</p>23
<ul>24
<li>Enter text here.</li>25
<li>Enter text here.</li>26
</ul>27
</div>28
</div>29
</div>30
<!-- Customer information expandable type + Box type-->31
<div class="ec-base-box typeThinBg">32
<p class="ec-base-help">Enter text here.</p>33
</div>34
<div class="ec-base-box typeThin typeMember gMerge">35
<div class="information">36
<strong class="title"><img src="//uidevdmp.cafe24.com/web/upload/mg_img_btn_mem_group_b2.gif" alt="" /><br />Center-align</strong>37
<div class="description">38
<p><strong>○○○</strong>is a [VIP] member.</p>39
<ul>40
<li>Enter text here.</li>41
<li>Enter text here.</li>42
</ul>43
</div>44
</div>45
</div>46
<div class="ec-base-box typeThinBg gMerge">47
<p>Enter text here.</p>48
</div>Next page
How helpful was this page?
0Character Input /Up to 300 characters