• 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

    • Cards

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

    Base

    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

    Horizontal
    profile
    Title
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Vertical
    profile
    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 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.
    <!-- @round: s | m | l | xl -->
<div class="ga-card round-{@round}">
  <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>