Lorem ipsum Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
LG GP1 CSS Style Guide
Buttons
a 태그는 +linkButton, button은 +button 을 사용해주세요. (pug mixin)
- type: "box" / "box-outlined" / "text"
- color: "black" / "red" / "white"
- "box" 또는 "box-outlined" 타입일 경우 size: "small" / "medium" / "large"
- "box-outlined" 또는 "text" 타입에서는 icon:true 사용 가능합니다.
- "text" 타입에서는 underline:true 사용 가능합니다. (icon과 underline 동시 사용 불가능)
- "text" 타입을 사용 할 때는 size 옵션은 빼거나 size:''로 비워주시고,
그 외 타입을 사용할때는 size를 꼭 입력해주세요. - Default는 type:"box-outlined", color:"black" 입니다.
Default Button (LGness)
Style: default
Style: highlight (LGness)
Text Button (LGness)
Style: default
Style: default back
Style: down
underline : true
Style: icon variation
Circle Button (LGness)
Style: white arrow / black arrow
Button
Type: box, Size: small
Type: box-outlined, Size: small
Type: box, Size: medium
Type: box-outlined, Size: medium
Type: box, Size: large
Type: box-outlined, Size: large
Type: text
Type: text, icon: true
Type: text, underline: true
Type: text, underline: true, comment: false, outlink: true
Icon Button : 아이콘이 앞에 위치하는 버튼 +iconButton pug mixin 사용
a태그 사용시 type:"link", button 사용시 type:"button"
Carousel Indicator
- Pagination(Fraction 또는 Bullet dots) 부분은 +carouselPagination (Pug mixin) 사용해주세요.
- Pagination 영역에 Fraction이 아닌 Bullet 사용시에 isBullet : true 옵션 해주시면 ol 태그로 변경됩니다.
- 좌우 버튼은 +carouselBtn(Pug mixin) 사용해주세요.
- +carouselBtn의 type은 class로 들어가서 스타일 variation 하여 사용가능합니다.
1 / 2
Hero Controls - white theme
InstaView™1
InstaView™1
InstaView™1
Hero Controls - dark theme
InstaView™1
InstaView™1
InstaView™1