List

Structured list styling for displaying repeated content.

기본

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>

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>

선택된 아이템

Option 1

Option 2

Option 3

<div class="ga-list selection">
    <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">
             option1
             <div class="sub-title">sub text</div>
         </div>
    </div>
    <div class="item">
         <div class="item-title">
             option2
             <div class="sub-title">sub text</div>
         </div>
    </div>
    ...
    <div class="item">
         <div class="item-title">
             option3
             <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 fa fa-icon"></i>
        <div class="item-title">option1</div>
    </div>
    <div class="item">
        <i class="list-icon icon fa fa-icon"></i>
        <div class="item-title">option2</div>
    </div>
    ...
    <div class="item">
        <i class="list-icon icon fa fa-icon"></i>
        <div class="item-title">option3</div>
    </div>
</div>

Icons

Option 1

Option 2

Option 3

Bordered

Option 1

Option 2

Option 3

<div class="ga-list bordered">
    <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">option1</div>
    </div>
    <div class="item">
        <img src="{image_path}" />
        <div class="item-title">option2</div>
    </div>
    ...
    <div class="item">
        <img src="{image_path}" />
        <div class="item-title">option3</div>
    </div>
</div>