• welcome
  • faqs
  • principle
  • semantic
  • tokens
  • components
  • theming
  • typography
  • colors
  • utilities
  • badge
  • breadcrumb
  • button
  • calendar
  • cards
  • checkbox
  • input
  • list
  • message
  • pagination
  • panel
  • segments
  • selectbox
  • slider
  • switch
  • table
  • tabs
  • tag
  • form
  • grid
  • grid2
  • modal
  • toast
  • tooltip

    • 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

    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
    Option 6
    <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>

    Border

    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"> 
    <div class="item-img>       
      <img src="{image_path}" /> 
    </div>
    <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>

    Timeline

    Option 1
    Option 2
    Option 3
    Option 4
    Option 5
    Option 6
    Option 7
    <div class="ga-list timeline connect">
  <div class="item"> option1 </div>
  <div class="item"> option2 </div>
  ...
  <div class="item"> option3 </div>
</div>