▒ Design Component ▒

Smart Hospital

data_object

가이드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="card">
    <div class="card-header">
        <div class="card-header__title">
            <span class="material-icons-round">widgets</span>
            <div class="title-wrap">
                <h3 class="title__main">카드 타이틀</h3>
                <p class="title__sub">서브 타이틀</p>
            </div>
        </div>
        <div class="card-header__function">
            <button class="pnt-btn">버튼</button>
        </div>
    </div>
    <div class="card-body">
    </div>
</div>

[필수 클래스]

card

[하위 요소]

card-header
- card-header__title
  - title-wrap
    - title__main
    - title__sub
- card-header__function
card-body

[카드 탭]

card-tab
card-header__tab

done

기본

extension

카드 타이틀

기본

subtitles

카드헤더 요소 사용법

카드 타이틀

타이틀만

wysiwyg

카드 타이틀

아이콘 + 타이틀

wysiwyg

카드 타이틀

서브타이틀

아이콘 + 타이틀 + 서브타이틀

wysiwyg

카드 타이틀

아이템 + 타이틀 + 기능

tab

카드탭

This is tab test 1 - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi incidunt molestiae aperiam magnam rerum, sint excepturi placeat at eos amet aut ipsa numquam hic magni non, quos praesentium, blanditiis dicta?

탭 스타일_1

제목

탭 스타일_2