Overviews
  • welcome
  • FAQs
  • components
    • Bases
  • typography
  • colors
    • Elements
  • button
  • input
  • tag
  • checkbox
  • switch
  • badge
  • list
  • selectbox
  • message
  • tabs
  • cards
  • segments
  • table
  • pagination
  • panel
  • calendar
    • Layouts
  • form
  • grid
  • grid2
    • Modules
  • modal
  • toast

    • Segments

    텍스트, 이미지, 액션을 묶어 구분해 주는 세그먼트 컨테이너.

    기본

    Contents 영역
    Contents 영역 
    <div class="ga-segment">
       <!-- insert contents -->
</div>

    Border

    Contents 영역 
    <div class="ga-segment border">
       <!-- insert contents -->
</div>

    Float

    Contents 영역 
    <div class="ga-segment float">
       <!-- insert contents -->
</div>

    Surface

    Contents 영역 
    <div class="ga-segment surface">
       <!-- insert contents -->
</div>

    Align

    Left Align Contents 영역
    Center Align Contents 영역
    Right Align Contents 영역 
    <div class="ga-segment align-left">
       <!-- insert contents -->
</div>
<div class="ga-segment align-center">
       <!-- insert contents -->
</div>
<div class="ga-segment align-right">
       <!-- insert contents -->
</div>

    Round

    round S
    Contents 영역
    round M
    Contents 영역
    round L
    Contents 영역
    round XL
    Contents 영역 
    <div class="ga-segment round-{s | m | l | xl}">
       <!-- insert contents -->
</div>

    Title

    Title
    Contents 영역
    <div class="ga-card">
   <div class="contents">
       <div class="title">Title</div>
        <!-- insert contents -->
    </div>
</div>

    Attached (header, footer)

    Header 영역
    Contents 영역
    Footer 영역
    <div class="ga-card"></div>
    <div class="header">Header contents</div>
    <!-- contents -->
    <div class="footer">Footer contents</div>
</div>

    Segments

    Segment 1
    Contents 영역
    Segment 2
    Contents 영역 
    <div class="ga-segments">
   <div class="ga-segment">
       <!-- insert contents 1 -->
  </div>
  <div class="ga-segment">
       <!-- insert contents 2 -->
  </div>
</div>