Panel

기본 사용

<div class="gn-panel" style="width: 400px; height: 300px">
  <div class="panel-header">
    Panel Header
  </div>
  <div class="panel-body">
    <ul class="gn-list">
      <li>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</li>
      <li>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.</li>
      <li>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.</li>
    </ul>
  </div>
  <div class="panel-footer">
    Panel footer
  </div>
</div>

sub 사용

<div class="gn-panel-2" >
  <div class="panel-2-header">
    Panel Header
  </div>
  <div class="panel-2-body">
      <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
      <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
      </div>
  <div class="panel-2-footer">
    Panel footer
  </div>
</div>

<div class="gn-panel-3" >
  <div class="panel-3-header">
    Panel Header
  </div>
  <div class="panel-3-body">
      <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
      <p>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</p>
      </div>
  <div class="panel-3-footer">
    Panel footer
  </div>
</div>

고정

• height와 함께 사용, panel header, footer 고정

<div class="gn-panel is-fixed" style="width: 400px; height: 350px">
  <div class="panel-header has-color-primary">
    Panel Header
  </div>
  <div class="panel-body">
    <ul class="gn-list">
      <li>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit. Tempor anim eiusmod ut laborum esse sint velit occaecat consequat aliqua elit duis ea. Ullamco officia ullamco excepteur consectetur est deserunt velit fugiat. Voluptate proident mollit exercitation tempor culpa reprehenderit duis incididunt voluptate cillum do ad laboris veniam.</li>
      <li>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis. Tempor officia dolor enim incididunt ut cupidatat sunt.</li>
      <li>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris. Proident nostrud magna consequat elit duis culpa deserunt voluptate. Ullamco commodo ad ea nostrud. Qui ullamco tempor non est adipisicing duis ullamco id ex. Nostrud fugiat mollit commodo veniam id et labore cillum adipisicing adipisicing qui dolor.</li>
    </ul>
  </div>
  <div class="panel-footer">
    Panel footer
  </div>
</div>

색상

<div class="gn-panel" style="width:400px;">
  <div class="panel-header has-color-primary">
    Panel Header
  </div>
  <div class="panel-body">
    <ul class="gn-list">
      <li>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit.</li>
      <li>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis.</li>
      <li>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris.</li>
    </ul>
  </div>
  <div class="panel-footer">
    Panel footer
  </div>
</div>
<div class="gn-panel" style="width:400px;">
  <div class="panel-header has-color-info">
    Panel Header
  </div>
  <div class="panel-body">
    <div class="gn-tab is-center">
      <ul>
        <li class="is-active"><a href="#genians">Genians</a></li>
        <li><a href="#rndcenter">R&amp;D Center</a></li>
        <li><a href="#fd">Front-end</a></li>
        <li><a href="#gnui">GNUI</a></li>
      </ul>
    </div>
    <ul class="gn-list">
      <li>Id eiusmod veniam aute elit nulla qui ullamco dolore cillum est veniam sunt velit.</li>
      <li>Eu pariatur exercitation commodo amet occaecat non magna ea. Laboris reprehenderit nostrud labore anim Lorem Lorem quis.</li>
      <li>Incididunt ipsum nostrud quis qui esse est aute anim velit aliqua ipsum. Ipsum mollit nulla ipsum Lorem cillum laboris.</li>
    </ul>
  </div>
  <div class="panel-footer has-text-center">
    <button type="button" class="gn-button is-info">확인</button>
    <button type="button" class="gn-button is-cancel">취소</button>
  </div>
</div>