가이드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class=" grid-containeritem-grid-300 "> <div class="inner-item"> <div class="item-header"> <div class="item-header__title"> <p>서브 타이틀</p> <h3>타이틀</h3> </div> <div class="item-header__function"> <button>버튼</button> </div> </div> <div class="item-body"> </div> </div> </div> |
card 안에서 단일 아이템용 디자인 입니다.
복수로 사용될때는 'grid-container' 안에서 사용합니다.
[필수 클래스]
- inner-item
[하위 요소]
- item-header
- item-header__title
- p
- h3
- item-header__function
- item-header__title
- item-body
기본
서브 타이틀
타이틀
기본
그리드 컨테이너 사용법
아이템 그리드는 50 단위로 100 ~ 500사이에서 사용 가능합니다.
이너 아이템
이너 아이템
이너 아이템
item-grid-100
이너 아이템
이너 아이템
이너 아이템
item-grid-150
이너 아이템
이너 아이템
이너 아이템
item-grid-300
이너 아이템 사용 예시 1
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
이너 아이템 사용 예시 2
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )
서브타이틀
타이틀
배터리
100%
정상
2023-02-01
( 18:55:58 )