List

반복되는 콘텐츠를 표시하기 위한 구조화된 리스트 스타일.

Base

Option 1

Option 2

Option 3

Option 4

Option 5

Option 6

Option 7

<div class="ga-list">
  <div class="item"> option1 </div>
  <div class="item"> option2 </div>
  ...
  <div class="item"> option3 </div>
</div>

Link

<div class="ga-list">
  <div class="item"> 
    <a class="link">option 1</a> 
  </div>
  <div class="item"> 
    <a class="link">option 2</a> 
  </div>
  <div class="item"> 
    <a class="link">option 3</a> 
  </div>
  ... ...
</div>

List Style

Option 1

Option 2

Option 3

<div class="ga-list ul">
  <div class="item"> option1 </div>
  <div class="item"> option2 </div>
  ...
  <div class="item"> option3 </div>
</div>

Selected Items

Option 1

Option 2

Option 3

<div class="ga-list selection {mark|bg|text}">
  <div class="item selected"> option1 </div>
  <div class="item"> option2 </div>
  ...
  <div class="item"> option3 </div>
</div>

Sub Title

Option 1

sub title is under the main Title

Option 2

sub title is under the main Title

Option 3

sub title is under the main Title

<div class="ga-list">
  <div class="item">         
    <div class="item-title">             
      option 1            
      <div class="sub-title">sub text</div>  
    </div>
  </div>    
  <div class="item">         
    <div class="item-title">             
      option 2            
      <div class="sub-title">sub text</div>  
    </div>
  </div>    
  <div class="item">         
    <div class="item-title">             
      option 3            
      <div class="sub-title">sub text</div>  
    </div>
  </div> 
  ... ...   
</div>

Icons

Option 1

Option 2

Option 3

asdf

<div class="ga-list">
  <div class="item">        
    <i class="list-icon icon xi-icon"></i>        
    <div class="item-title">option 1</div>    
  </div>
  <div class="item">        
    <i class="list-icon icon xi-icon"></i>        
    <div class="item-title">option 2</div>    
  </div>
  <div class="item">        
    <i class="list-icon icon xi-icon"></i>        
    <div class="item-title">option 3</div>    
  </div>
  ... ...
</div>

Buttons

Option 1

Option 2

Option 3

<div class="ga-list border">
    <div class="item"> 
      <div class="item-title">option</div>
      <div class="btn-set">
        <!-- button element -->
      </div>
    </div>
    ...
</div>

Bordered

Option 1

Option 2

Option 3

<div class="ga-list border">
  <div class="item"> option1 </div>
  <div class="item"> option2 </div>
  ...
  <div class="item"> option3 </div>
</div>

Image

Option 1

Option 2

Option 3

<div class="ga-list">
  <div class="item">        
    <img src="{image_path}" />        
    <div class="item-title">option 1</div>    
  </div>
  <div class="item">        
    <img src="{image_path}" />        
    <div class="item-title">option 2</div>    
  </div>
  <div class="item">        
    <img src="{image_path}" />        
    <div class="item-title">option 3</div>    
  </div>
  ... ...
</div>