Examples

The following pages include example modules as well as documentation that describe the usage of each module. On any given page you will find a working example of the module, A description of the various classes used in the creation of the module, as well as the source code that you can copy and past from should you need to. The following pages help to serve as a styleguide as well as documentation.

Page Layout

• Page Templates
• Featured Search
• Fixed Header
• Grid System
• Breadcrumb

Additional Example Pages

• Generic Landing Page
• Search Directory Page
• Business Profile Page
• Profile Landing Page

Navigation Samples

• Flex Megamenu Navigation
• State Template v5 Megamenu
• State Template v4 Megamenu
• Single Level Navigation
• Full Width Navigation with Active Search
• Full Width Navigation with Icons
• Dropdown Navigation
• Side Navigation
• Setting the Active Navigation Item
• Mobile Navigation Icon Links

Color Schemes

• Delta
• Eureka
• Mono
• Oceanside
• Orange County
• Paso Robles
• Sacramento
• Santa Barbara
• Santa Cruz
• Shasta
• Sierra
• Trinity

Content Modules

• Contact Widgets (Supports Microdata)
• Course List (Supports Microdata)
• Course Detail (Supports Microdata)
• Course Detail (Card) (Supports Microdata)
• Event List (Supports Microdata)
• Event Detail (Supports Microdata)
• Exam List
• Figure with Captions (Supports Microdata)
• Headers and Paragraphs
• Hero Info
• Icon Blocks
• Info Blocks
• Job List (Supports Microdata)
• Job Detail (Supports Microdata)
• Lists (Bulleted & Expanding)
• Location (Widgets) (Supports Microdata)
• Location (Full) (Supports Microdata)
• News Blocks
• News List (Supports Microdata)
• News Detail (Supports Microdata)
• Profile Banners (Supports Microdata)
• Public Profile List (Supports Microdata)
• Public Profile Detail (Supports Microdata)
• Publications (Supports Microdata)

Components & Utility Content

• Accordions
• Animations
• Alert Banner
• Blockquotes
• Buttons
• Cards
• Carousels and Slideshows
• Charts
• Countdown
• Featured Narrative
• Form Styles
• Gallery
• Gradient Backgrounds
• Horizontal Rules
• Icon Font Library
• Media Object
• Modal
• Number Counter
• Panes
• Parallax
• Progress Bars
• Progress Blocks
• Sections
• Service Tiles
• SocialSharer
• Spacing
• Sticky Footer
• Tabs
• Tables
• Testimonials
• Text Accent Colors
• Toggle
• Typography

Dreamweaver Templates

• Using Dreamweaver Templates

Additional Bootstrap CSS & Components

We strongly recommend using the documented State Template Content Modules and Components whenever possible; however, for more CSS classes and options as well as components we suggest utilizing what is available in Bootstrap first, before developing your own custom code.

NOTE: When using custom components and content modules that are not documented as part of the State Template, migration to future versions of the State Template may require additional work.