GNB 메뉴 / LNB 메뉴

프로젝트 항목

화면 알림 표시

화면 팝업

참고사항

알림 정보

서식

폼 요소

입력 값
선택
다중 선택
액션 다른 액션
액션 다른 액션
?
@
.tabler.io
https:// .tabler.io
https://tabler.io/users/
.tabler.io
비밀번호 보기
ctrl + K
잘못된 입력입니다.
옵션 4 옵션 5 옵션 6
옵션 4 옵션 5 옵션 6
라디오 버튼
인라인 라디오 버튼
체크박스
인라인 체크박스
토글 스위치
단일 스위치
사용자 지정 파일 입력
Github으로 로그인
X로 로그인
취소

프로젝트 ID

API와 상호 작용할 때 사용됩니다.

프로젝트 ID에 대해 더 알아보기
저장

Node.js 버전

빌드 단계 및 서버리스 함수에서 사용되는 Node.js 버전입니다. 변경 사항을 적용하려면 새로운 배포가 필요합니다.

Node.js 버전에 대해 더 알아보기

기본 폼

귀하의 이메일은 다른 사람과 절대 공유하지 않습니다.
비밀번호는 8-20자 길이여야 하며, 문자와 숫자를 포함하고 공백, 특수 문자 또는 이모티콘을 포함해서는 안 됩니다.

수평 폼

귀하의 이메일은 다른 사람과 절대 공유하지 않습니다.
비밀번호는 8-20자 길이여야 하며, 문자와 숫자를 포함하고 공백, 특수 문자 또는 이모티콘을 포함해서는 안 됩니다.

입력 마스크

내 프로필

저장

프로필 수정

HTTP 요청

단언(Assertions)
소스 속성 비교 대상

UI 예제

계정에 로그인

또는
Github으로 로그인
X로 로그인

계정 잠금

계정을 잠금 해제하려면 비밀번호를 입력 하세요.

홍길동

계정 인증

+82 10-1234-5678로 전송된 인증 코드를 입력하여 계정을 확인하세요.

취소 인증

버튼

표준 버튼

일반
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트
활성 상태
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트
비활성화
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트

아웃라인 버튼

아웃라인 버튼을 사용하려면 .btn-outline-* 클래스를 사용하세요.

일반
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트
활성 상태
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트
비활성화
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트

고스트 버튼

고스트 버튼을 사용하려면 .btn-ghost-* 클래스를 사용하세요.

일반
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트
활성 상태
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트
비활성화
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트

사각 버튼

사각 버튼을 사용하려면 .btn-square 클래스를 사용하세요.

일반
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트

필 버튼

필 버튼을 사용하려면 .btn-pill 클래스를 사용하세요.

일반
프라이머리
세컨더리
성공
경고
위험
정보
다크
라이트

추가 색상

파랑
하늘
남색
보라
분홍
빨강
주황
노랑
라임
초록
청록
청자
다크
뮤트

배지

제목 예시 새로운

제목 예시 새로운

제목 예시 새로운

제목 예시 새로운

제목 예시 새로운
제목 예시 새로운
파랑 하늘 남색 보라 분홍 빨강 주황 노랑 라임 초록 청록 청자
파랑 하늘 남색 보라 분홍 빨강 주황 노랑 라임 초록 청록 청자
파랑 하늘 남색 보라 분홍 빨강 주황 노랑 라임 초록 청록 청자
액션 12 다른 액션

카드 헤더

카드 샘플

액션이 있는 카드

새로 추가

카드 제목

전화 이메일
홍길동
UI 디자이너
전화 이메일

설명 포함

카드 제목 아래에 간단한 설명을 추가할 수 있습니다.

설명 및 액션 포함

카드 제목 아래에 간단한 설명을 추가할 수 있습니다.

새 작업 생성
김철수
연구 간호사
사용자 편집 권한 변경 사용자 삭제

카드 액션

목록

Paweł Kuna
2일 전
JL
Jeffie Lewzey
3일 전
Mallory Hulme
오늘
Dunn Slane
6일 전
Emmy Levet
3일 전
Maryjo Lebarree
2일 전
EP
Egan Poetz
4일 전
Kellie Skingley
6일 전
Christabel Charlwood
오늘
HS
Haskel Shelper
어제
Christabel Charlwood
압축된 Sass 출력 지원 (#29702)
HS
Haskel Shelper
.form-check-input에 수직 정렬 설정 (#29521)
Lorry Mion
인쇄용 테마 모양 유지 (#29714)
Leesa Beaty
`.stylelintrc`에서 큰따옴표 사용 (#29709)
Perren Keemar
package-lock.json 재생성 (#29695)
SA
Sunny Airey
Coveralls Action으로 전환 (#29478)
Geoffry Flaunders
npm audit 취약점 수정 (#29677)
Thatcher Keel
config.yml: popper.js를 v1.16.0으로 업데이트 (#29624)
A
Eva Acres
사용되지 않는 html 태그를 텍스트 장식 클래스로 변경 (#29604)
SA
Sunny Airey
justify-content:between ⇒ justify-content:space-between (#29734)
Northrop Alforde
change-version.js 업데이트 (#29736)
Virgil Archbutt
package-lock.json 재생성 (#29730)
Guthry Arlott
사소한 텍스트 수정
AA
Arlie Armstead
버전별 문서 링크
Ashton Arndell
카피라이팅 편집
Kass Aspinal
글꼴 크기 조정을 위한 RFS 활성화
W
Gerti Washington
Bord Wheatcroft
Nanni Wooler

모달

기본 모달 큰 모달 작은 모달 전체 너비 모달 스크롤 가능 모달 폼이 있는 모달 성공 모달 위험 모달 간단한 폼이 있는 모달

타이포그래피

순서 없는 목록

  • 목록 항목 예시
  • 목록 항목 예시
    • 중첩된 목록 항목
    • 중첩된 목록 항목
  • 목록 항목 예시
  • 목록 항목 예시

순서 있는 목록

  1. 목록 항목 예시 1
  2. 목록 항목 예시 2
  3. 목록 항목 예시 3
  4. 목록 항목 예시 4
  5. 목록 항목 예시 5
  6. 목록 항목 예시 6

스타일 없는 목록

  • 목록 항목 예시
  • 목록 항목 예시
  • 목록 항목 예시
  • 목록 항목 예시
  • 목록 항목 예시
  • 목록 항목 예시

인용문

이곳에 인용문을 넣을 수 있습니다. 이것은 인용문의 예시 텍스트입니다. 독자에게 영감을 주거나 중요한 내용을 강조할 때 사용됩니다.

율리우스 카이사르

텍스트 요소

mark 태그를 사용하여 텍스트를 강조할 수 있습니다.
이 텍스트 줄은 삭제된 것으로 처리됩니다.
이 텍스트 줄은 밑줄이 그어져 렌더링됩니다.
이 텍스트 줄은 작은 글씨로 처리됩니다.
다음 텍스트는 굵게 렌더링됩니다.
다음 텍스트는 기울임꼴로 렌더링됩니다.
다음 텍스트는 유용한 키보드 단축키를 보여줍니다: ⌘ + C 또는 ctrl + C.

텍스트 색상

이것은 기본 텍스트의 예시입니다.
이것은 보조 텍스트의 예시입니다.
이것은 본문 텍스트의 예시입니다.
이것은 성공 텍스트의 예시입니다.
이것은 정보 텍스트의 예시입니다.
이것은 경고 텍스트의 예시입니다.
이것은 위험 텍스트의 예시입니다.
이것은 분홍색 텍스트의 예시입니다.

주소

(주)아무개
서울시 강남구 테헤란로 123, 9층
서울, 대한민국 06123
P: (02) 123-4567
홍길동
first.last@example.com

타이포그래피

H1 제목 예시입니다

H2 제목 예시입니다

H3 제목 예시입니다

H4 제목 예시입니다

H5 제목 예시입니다
H6 제목 예시입니다

단계 진행

수평 단계

  • 1
  • 2
  • 3
  • 장바구니
  • 결제 정보
  • 확인
  1. 1단계
  2. 2단계
  3. 3단계
  4. 4단계
  1. 1. 1단계
  2. 2. 2단계
  3. 3. 3단계
  4. 4. 4단계
  5. 5. 5단계
  1. 1. 1단계
  2. 2. 2단계
  3. 3. 3단계
  4. 4. 4단계
  5. 5. 5단계

수직 단계

  • 주문 접수
    주문이 성공적으로 접수되었습니다. 확인 이메일이 발송됩니다.
  • 처리 중
    주문 상품을 준비하고 있습니다.
  • 배송 중
    상품이 배송을 위해 출발했습니다.
  • 완료
    주문이 완료되었습니다.
  • 1단계
  • 2단계
  • 3단계
  • 4단계
  • 5단계

탭

  • 모두 보기
  • 마케팅
  • 개발