Form Elements

Buttons

All buttons are text and/or an icon enclosed in a rectangular shape. NCARB blue is used as the primary call-to-action button and secondary buttons can be light yellow, dark grey, green or beige.

.btn

Link button


        

Usage:

The .btn class will style a default button.

Adding the .btn-block class to a .btn will make the button a btn-block element with 100% width.

Link button
.btn .btn-block
  

Usage:

The .btn-block is from bootstrap and it works with our btn-plus and btn-continue classes.

.btn .btn-primary

Usage:

The .btn-primary class will create a primary button. A primary button should be reserved for the main call to action for an entire page regardless of whether the button is found within a form, for selecting an item from a collection, applying a filter, or some other action.

Adding the .continue class to any .btn adds a right facing arrow to the button. It should be used when selecting the button would continue to the next step of a process.

Link button
.btn .btn-secondary
        
        
        

Usage:

The .btn-secondary class will apply the secondary button styles and allow the secondary color palette. The default color is $color-gray.

.btn .btn-success, .btn .btn-warning, .btn .btn-info, .btn .btn-danger
    
    Success
    Info
    Danger
        

Usage:

Bootstrap color contexts.

Success Info Danger

Labels

label
    
      

Input Fields

input[type="text"]


      
input[type="date"]


      

Search Field

input[type="search"]

      

Select Menus

select

Radio Buttons & Checkboxes

input[type="radio"]
  
input[type="checkbox"]
.checkbox-inline
.radio-inline
  

Alerts

.alert.alert-success.alert-icon

.alert.alert-danger.alert-icon
  
    
.alert.alert-warning.alert-icon
  
    
.alert.alert-info.alert-icon