간격과 너비
개별 요소 적용
요소에 간격을 주려면 vc-[박스 모델 레이어]-[간격의 방향]-[간격의 크기]클래스를 사용합니다. 간격을 직접 적용할 때는 가능한 4px의 배수로 합니다. 불가피할 경우 2px의 배수로 합니다.
- 박스 모델 레이어: margin, padding
- 간격의 방향: every, vertical, horizontal, left, right, top, bottom
직계 자식 요소에 간격 일괄 적용
직계 자식에 간격을 부여하려면 vc-margin-[간격의 방향]-[간격의 크기]-container클래스를 이용합니다. 방향은 horizontal, vertical이 가능합니다.
Flexbox 요소에 간격 일괄 적용
vc-flex-container를 사용해 만든 flex container에 간격을 부여하려면 flex-gap-[간격의 크기]클래스를 이용합니다. 크기는 1부터 8까지 적용되며 크기 * 4px의 간격이 적용됩니다.
너비와 높이
너비와 높이를 조절하려면 vc-[너비, 높이 속성키]-[속성값]클래스를 이용합니다.
- 속성 키: width, min-width, max-width, height, min-height, max-height
- 속성 값: full, half, fit-content, max-content, min-content, 1~8
색상 시스템
시맨틱 색상
이외의 색상
타이포그래피와 아이콘
타이포그래피
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
다람쥐 헌 쳇바퀴에 타고파 Lorem ipsum dolor sit amet
타이포그래피 색상
Color primary
Color positive
Color negative
Color neutral
Color blue
Color orange
Color pink
아이콘
아이콘을 삽입할 때는 <i class="[아이콘 이름]"/>를 이용합니다.
icon-info
icon-alert
icon-success
icon-refresh
icon-search
icon-zoom-in
icon-zoom-out
icon-sliders
icon-briefcase
icon-credit-card
icon-web
icon-lock
icon-unlock
icon-add
icon-close
icon-view
icon-view-off
icon-gender
icon-person
icon-person-plus
icon-person-minus
icon-person-x
icon-person-check
icon-people
icon-folder
icon-folder-plus
icon-folder-minus
icon-triangle-up
icon-triangle-down
icon-triangle-left
icon-triangle-right
icon-arrow-head-up
icon-arrow-head-down
icon-arrow-head-left
icon-arrow-head-right
icon-filter
icon-sort
icon-sort-up
icon-sort-down
icon-bar-sort-asc
icon-bar-sort-desc
icon-arrow-up
icon-arrow-down
icon-phone
icon-mail
icon-error
icon-location
icon-reply
icon-bell
icon-bell-filled
icon-dash-square
icon-check-square
icon-calendar
icon-pencil
icon-pencil-line
icon-pencil-paper
icon-quil
icon-trash
icon-comment
icon-bookmark
icon-bookmark-filled
icon-heart
icon-heart-filled
icon-star
icon-star-filled
icon-thumbs-up
icon-thumbs-up-filled
icon-thumbs-down
icon-thumbs-down-filled
icon-home
icon-paperclip
icon-download
icon-download-cloud
icon-external-link
icon-share
icon-external-logout
icon-help-circle
icon-x-circle
icon-menu
icon-more-vertical
icon-more-horizontal
icon-align-left
icon-align-right
icon-align-center
icon-align-justify
icon-bold
icon-italic
icon-underline
icon-strikethrough
icon-scissors
icon-copy
icon-clipboard
icon-save
icon-link
icon-link-horizontal
icon-delete
icon-list
icon-list-number
icon-quote-left
icon-quote-right
icon-delete
icon-type
icon-file-text
icon-film
icon-terminal
icon-maximize
icon-maximize-square
icon-megaphone
icon-crop
icon-image
icon-link-off
icon-corner-down-left
icon-slash-glyph
icon-backslash-glyph
icon-check
icon-twitter
icon-facebook
icon-kakaotalk
배경
단색 배경
vc-background-navy는 vc-background-dim와 동일한 색상입니다.
그라데이션 배경
그 밖에
둥근 모서리
최상위 섹션
페이지 콘텐츠 영역에서 내용을 구분하는 가장 큰 단위입니다.