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

    • Segments

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

    Base

    Contents 영역 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas!
    Contents 영역

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas! 

    
<!-- string contents -->
<div class="ga-segment">      
  "String Contents"
</div>
<!-- html elements contents -->
<div class="ga-segment"> 
  <div class="contents">
    <!-- contents -->
  </div>     
</div>

    Border

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas! 
    <div class="ga-segment border">       
  <!-- contents -->
</div>

    Float

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas! 
    <div class="ga-segment float">       
  <!-- contents -->
</div>

    Surface

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas! 
    <div class="ga-segment surface">       
  <!-- contents -->
</div>

    Align

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

    Round

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

    Title

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

    Attached (header, footer)

    Header 영역
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas!
    Footer 영역
    <div class="ga-segment attached">  
  <div class="header">Header contents</div>    
  <div class="contents">contents</div>    
  <div class="footer">Footer contents</div>
</div>

    Extra

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi consequuntur corporis expedita fuga, incidunt obcaecati qui, quis, rem reprehenderit rerum sed sit. Distinctio doloremque dolorum eius est facere pariatur voluptas!
    Extra 영역
    View
    Detail 
    <div class="ga-segment">  
  <div class="contents">contents</div>    
  <div class="extra">Extra contents</div>
</div>

    Segments

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