GNB 메뉴 / LNB 메뉴

프로젝트 항목

알림 정보

서식

Form elements

Input value
Select
Select multiple
Action Another action
Action Another action
?
@
.tabler.io
https:// .tabler.io
https://tabler.io/users/
.tabler.io
Show password
ctrl + K
Invalid feedback
Option 4 Option 5 Option 6dropdown-menu
Option 4 Option 5 Option 6dropdown-menu
Radios
Inline Radios
Checkboxes
Inline Checkboxes
Toggle switches
Single switch
Custom File Input
Login with Github
Login with X
Cancel

Project ID

Used when interacting with the API.

Learn more about Project ID
Save

Node.js Version

The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect.

Learn more about Node.js Version

Basic form

We'll never share your email with anyone else.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Horizontal form

We'll never share your email with anyone else.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Input mask

My Profile

Save

Edit Profile

HTTP Request

Assertions
Source Property Comparison Target

UI 예제

Login to your account

or
Login with Github
Login with X

Account Locked

Please enter your password to unlock your account

Paweł Kuna

Authenticate Your Account

Please confirm your account by entering the authorization code sent to +1 856-672-8552.

Cancel Verify

버튼

Standard Buttons

Normal
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Active state
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Disabled
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light

Outline Buttons

Use .btn-outline-* class for outline buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Active state
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Disabled
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light

Ghost Buttons

Use .btn-ghost-* class for ghost buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Active state
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light
Disabled
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light

Square Buttons

Use .btn-square class for square buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light

Pill Buttons

Use .btn-pill class for pill buttons.

Normal
Primary
Secondary
Success
Warning
Danger
Info
Dark
Light

Extra colors

Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
Dark
Muted

배지

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan
Action 12 Another action

카드 헤더

Sample card

Card with action

Add new

Cart title

Phone Email
Paweł Kuna
UI Designer
Phone Email

With description

Lorem ipsum dolor sit amet consectetur adipisicing.

With description and action

Lorem ipsum dolor sit amet consectetur adipisicing.

Create new job
Dunn Slane
Research Nurse
Edit user Change permissions Delete user

Card actions

목록

Paweł Kuna
2 days ago
JL
Jeffie Lewzey
3 days ago
Mallory Hulme
today
Dunn Slane
6 days ago
Emmy Levet
3 days ago
Maryjo Lebarree
2 days ago
EP
Egan Poetz
4 days ago
Kellie Skingley
6 days ago
Christabel Charlwood
today
HS
Haskel Shelper
yesterday
Christabel Charlwood
Compressed Sass output support (#29702)
HS
Haskel Shelper
Set vertical-align on .form-check-input (#29521)
Lorry Mion
Keep themed appearance for print (#29714)
Leesa Beaty
Use double quotes in `.stylelintrc` (#29709)
Perren Keemar
Regenerate package-lock.json (#29695)
SA
Sunny Airey
Switch to the Coveralls Action (#29478)
Geoffry Flaunders
Fix npm audit vulnerability (#29677)
Thatcher Keel
config.yml: update popper.js to v1.16.0 (#29624)
A
Eva Acres
Change deprecated html tags to text decoration classes (#29604)
SA
Sunny Airey
justify-content:between ⇒ justify-content:space-between (#29734)
Northrop Alforde
Update change-version.js (#29736)
Virgil Archbutt
Regenerate package-lock.json (#29730)
Guthry Arlott
Some minor text tweaks
AA
Arlie Armstead
Link to versioned docs
Ashton Arndell
Copywriting edits
Kass Aspinal
Enable RFS for font resizing
W
Gerti Washington
Bord Wheatcroft
Nanni Wooler

모달

Simple modal Large modal Small modal Full width modal Scrollable modal Modal with form Success modal Danger modal Modal with simple form

Typography

Unordered list

  • lorem ipsum doloret
  • lorem ipsum doloret
    • lorem ipsum doloret
    • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret

Ordered list

  1. lorem ipsum doloret
  2. lorem ipsum doloret
  3. lorem ipsum doloret
  4. lorem ipsum doloret
  5. lorem ipsum doloret
  6. lorem ipsum doloret

Unstyled list

  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret
  • lorem ipsum doloret

Blockquote

I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! The nose?

Julius Cesar

Text elements

You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
The following snippet of text show useful keyboard shortcut: ⌘ + C or ctrl + C.

Text color

This is an example of primary text.
This is an example of secondary text.
This is an example of body text.
This is an example of success text.
This is an example of info text.
This is an example of warning text.
This is an example of danger text.
This is an example of pink text.

Addresses

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456 7890
Full name
first.last@example.com

Typography

H1 Lorem ipsum dolor sit amet

H2 Lorem ipsum dolor sit amet

H3 Lorem ipsum dolor sit amet

H4 Lorem ipsum dolor sit amet

H5 Lorem ipsum dolor sit amet
H6 Lorem ipsum dolor sit amet

단계 진행

Steps horizontal

  • 1
  • 2
  • 3
  • Cart
  • Billing Information
  • Confirmation
  1. Step one
  2. Step two
  3. Step three
  4. Step four
  1. 1. Step one
  2. 2. Step two
  3. 3. Step three
  4. 4. Step four
  5. 5. Step five
  1. 1. Step one
  2. 2. Step two
  3. 3. Step three
  4. 4. Step four
  5. 5. Step five

Steps vertical

  • Order received
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!
  • Order received
    Lorem ipsum dolor sit amet.
  • Out for delivery
    Lorem ipsum dolor sit amet.
  • Finalized
    Lorem ipsum dolor sit amet.
  • Step one
  • Step two
  • Step three
  • Step four
  • Step five

탭

  • View all
  • Marketing
  • Development