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

    • Panel

    접기/펼치기가 가능한 사이드 또는 콘텐츠 패널.

    Base

    Title
    CONTENT

    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!

    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-panel">
    <div class="panel-header"> ... </div>
    <div class="panel-contents"> ... </div>
</div>

    Border

    Title

    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-panel border">
    <div class="panel-header"> ... </div>
    <div class="panel-contents"> ... </div>
</div>

    Collapse

    Title

    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!

    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-panel collapse">
    <div class="panel-header"> ... </div>
    <div class="panel-contents"> ... </div>
</div>

    Collapse toggle Button

    Toggle Button on left
    Toggle Button on right
    <!-- Toggle button on left --> 
<div class="ga-panel collapse icon left">...</div>
<!-- Toggle button on right(default) --> 
<div class="ga-panel collapse">...</div>

    Contents

    Title
    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-panel collapse">
    <div class="panel-header"> ... </div>
    <div class="panel-contents">
        <!-- header -->
        <!-- body -->
        <!-- footer -->
     </div>
</div>