Usage
Card ?
사용법
기본 0.5rem 간격이 띄어져 있습니다. .card 단일 혹은 .card-group 내에 위치하여도 같은 .card 스타일이 적용됩니다.
Card Group
Card Sample
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
Card Sample
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
...
Card
Card Sample
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
Card Sample
text
link
카드 개별 색상
card
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-brand
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-primary
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-secondary
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-point
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-subpoint
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-info
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-success
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-danger
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-warning
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-light
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-ghost
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, provident!
link
card-info
text
link
전역/부분 스타일
card-group이 적용된 곳에 같이 적용해야 하는 클래스들입니다.
카드 사이 간격
g-1 ~ 6까지 설정되어 있습니다.
g-1
Card Sample
text
link
Card Sample
text
link
g-2
Card Sample
text
link
Card Sample
text
link
g-3
Card Sample
text
link
Card Sample
text
link
g-4
Card Sample
text
link
Card Sample
text
link
g-5
Card Sample
text
link
Card Sample
text
link
g-6
Card Sample
text
link
Card Sample
text
link
cards ...
카드 패딩
card-pd-*로 사용합니다.
card-pd-1
Card Sample
text
link
Card Sample
text
link
card-pd-2
Card Sample
text
link
Card Sample
text
link
card-pd-3
Card Sample
text
link
Card Sample
text
link
card-pd-4
Card Sample
text
link
Card Sample
text
link
card-pd-5
Card Sample
text
link
Card Sample
text
link
card-pd-6
Card Sample
text
link
Card Sample
text
link
cards ...
카드 x, y축 간격
[v,h,'']gap-*로 사용합니다. 작업중...
vgap-1
Card Sample
text
link
Card Sample
text
link
card-pd-2
Card Sample
text
link
Card Sample
text
link
card-pd-3
Card Sample
text
link
Card Sample
text
link
card-pd-4
Card Sample
text
link
Card Sample
text
link
card-pd-5
Card Sample
text
link
Card Sample
text
link
card-pd-6
Card Sample
text
link
Card Sample
text
link
cards ...
카드 점유 개수
card-dv-*로 사용합니다. auto, card-dv-0 ~ 10까지 등분됩니다.
card-dv-1
Card Sample
text
link
Card Sample
text
link
card-dv-2
Card Sample
text
link
Card Sample
text
link
card-dv-3
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
...
card-dv-10
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
cards ...
카드 전역 색상
card-wrap에 사용하면 전역 설정이 됩니다.
card-info
Card Sample
text
link
Card Sample
text
link
card-brand
Card Sample
text
link
Card Sample
text
link
cards ...
카드 전역 테두리
card-wrap에 사용하면 전역 설정이 됩니다.
card-border-danger
Card Sample
text
link
Card Sample
text
link
card-brand
Card Sample
text
link
Card Sample
text
link
cards ...
카드 일부 적용
card-wrap 또는 card에 사용하면 전역 또는 단일 설정이 가능하며, 단일 설정이 전역 설정보다 우선 적용됩니다.
혼합 예제
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
Card Sample
text
link
cards ...
Card Sample
text
link