Style Guide version 1.1

Input Fields

There are few kinds of search input fields on the site.

Search Bar (Large)

The Large Search Bar is located on the home page.


                        <button class="hp_searchbar">Search</button> 			
                    
Search Bar (Small)

The small search bar is on the main menu on desktop.


            <div class="LDTopMenu">
                <div id="header_search">
                    <input type="text" id="txtSearch" class="search_input ui-autocomplete-input init" value="Search this site..." autocomplete="off" data-inittext="Search this site...">
                    <a id="btnSearch" class="search_submit">GO</a>
                </div>                                
            </div>              
                    
Input Fields – Text

(a) Regular Input Field: (Label + Field Line)
(b) Numeric Input Field: (Label + Component in-front of Field Line)
!Important! – Questions to not be present in label form.
Active Label Text: Open Sans, 16px, SemiBold (600), #88ABAC
Pre-Label Text: Open Sans, 20px, Regular (400), #999999
Active Text: Open Sans, 20px, Regular (400), #333333
(Default Line: 1px, Solid, #333333) (Active Line: 2px, Solid, #88ABAC)


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button> 		
	
Input Fields – Numeric
$

Go to Loan Agreement under Terms to see live version.


	<button class="largeActiveButton">Cancel Subscription</button>		
	<button class="largeInactiveButton">Cancel Subscription</button> 	
	<button class="largeActiveButton">Submit</button> 	
	<button class="largeInactiveButton">Cancel</button> 		
	
Input Fields – Percent
%

Go to Loan Agreement under Terms to see live version.

<p>Here is some code.</p>