Type scale

• 계층 구조를 제공하고 일관성 있게 디자인할 수 있도록 타입 스케일을 정의합니다.

          
  <h1 class="h1">Heading1</h1>
  <h2 class="h2">Heading2</h2>
  <h3 class="h3">Heading3</h3>
  <h4 class="h4">Heading4</h4>
  <h5 class="h5">Heading5</h5>
  <p>body text</p>
  <p class="caption">Caption text</p>
        

Text Link

• 링크 아이콘과 함께 제공이 되지 않을 경우 언더라인을 처음부터 노출하도록 합니다.

          
  <a href="#" class="textLink">텍스트링크</a>
  <a href="#" class="textLink text-underline">텍스트링크</a>
        

Description

• 그리드와 디테일 영역등에서 보조적인 안내 사항을 표기할 때 사용되며 타이틀 우측에 배치합니다.
• 길이가 길거나 두개 이상의 지시문을 노출 할 경우 박스 타입의 지시문을 콘텐츠 하단에 배치합니다.

          
  <div class="description">강제성이 없는 단순 정보를 제공할 때 사용합니다.</div>
  <div class="description is-warning">반드시 지켜야하는 사항을 표기할 때 사용합니다.</div>
  <div class="description is-confirm">전송되었습니다.</div>
        

Multiple descriptions

          
    <div class="multipleDescriptions">
      <div class="description">강제성이 없는 단순 정보를 제공할 때 사용합니다.</div>
      <div class="description">두 개 이상의 지시문을 노출할 경우 콘텐츠 하단에 박스를 배치하여 사용합니다. </div>
      <div class="description">두 개 이상의 지시문을 노출할 경우 콘텐츠 하단에 박스를 배치하여 사용합니다. </div>
    </div>

    <div class="multipleDescriptions">
      <div class="description is-warning">반드시 지켜야하는 사항을 표기할 때 사용합니다.</div>
      <div class="description is-warning">두 개 이상의 지시문을 노출할 경우 콘텐츠 하단에 박스를 배치하여 사용합니다. </div>
    </div>
        

Title / BreadCrumb

          
    <div class="content__header">
      <h1>Page Title</h1>
      <div class="breadcrumbs content__headerBreadcrumbs">
        <ol class="breadcrumb__list">
          <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">1차메뉴</a>
          </li>
          <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">2차메뉴</a>
          </li>
          <li class="breadcrumb__item">
            <a class="breadcrumb__link" href="#">3차메뉴</a>
          </li>
        </ol>
        <div class="tooltips content__headerTooltips">
          <label class="favBtn">
            <input class="favBtn__checkbox" type="checkbox">
            <span class="favBtn__style"></span>
            <span class="favBtn__content" style="width: 5.5rem">즐겨찾기</span>
          </label>
        </div>
        <div class="tooltips content__headerTooltips">
          <div class="helpBtn">
            <button class="btn is-help"></button>
            <span class="helpBtn__content" style="width: 4.4rem;">도움말</span>
          </div>
        </div>
      </div>
    </div>
        

Content Title

          
    <div class="contentTitle">
      <div class="contentTitle__left">
        <h3 class="contentTitle__title">타이틀명<span class="contentTitle__titleTotal">총 <span class="text-secondary">10</span>건</span></h3>
      </div>    
      <div class="contentTitle__right">
        <button class="btn is-primary"><span class="icon is-excel"></span>엑셀업로드</button>
        <button class="btn is-primary ml-3"><span class="icon is-print"></span> 인쇄</button>
        <button class="btn is-primary ml-3">버튼</button>
        <button class="btn is-outline ml-10">추가</button>
        <button class="btn is-outline ml-3">삭제</button>
        <button class="btn is-confirm ml-3">저장</button>
      </div>
    </div>