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

    • Cards

    텍스트, 이미지, 액션을 묶어 보여주는 카드 레이아웃.

    기본

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-card border">
       <div class="contents"><!-- insert contents --></div>
  </div>

    Title

    Title
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-card border">
     <div class="contents">
         <div class="title">Title</div>
        <!-- insert contents -->
    </div>
</div>

    Image

    profile
    Title
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    button
    Title
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-card border image">
       <div class="image"><img src="..." alt="..." /></div>
       <div class="title">Title</div>
       <div class="contents"><!-- insert contents --></div>
  </div>

    Extra

    Title
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Extra
    
<div class="ga-card border extra">
       <div class="title">Title</div>
       <div class="contents"><!-- insert contents --></div>
       <div class="extra">Extra</div>
  </div>

    Attached (header, footer)

    Header 영역
    Title
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Footer 영역
    
<div class="ga-card border attached"></div>
    <div class="header">Header contents</div>
    <div class="contents"><!-- insert contents --></div>
    <div class="footer">Footer contents</div>
</div>

    Border

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-card border">
       <div class="contents"><!-- insert contents --></div>
  </div>

    Float

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-card float">
       <div class="contents"><!-- insert contents --></div>
  </div>

    Round

    round s
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    round m
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    round l
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    round xl
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-card float">
       <div class="contents"><!-- insert contents --></div>
  </div>

    Cards

    Card 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Card 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Card 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Card 4
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
<div class="ga-cards ">
       <!-- cards -->
  </div>