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
Additional Example Pages
Navigation Samples
- Flex Megamenu Navigation
- State Template v5 Megamenu
- State Template v4 Megamenu
- Single Level Navigation
- Full Width Navigation with Icons
- Full Width Navigation without Icons
- Dropdown Navigation
- Setting the Active Navigation Item
- Mobile Navigation Icon Links
Color Schemes
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
- Number Counter
- Panes
- Progress Bars
- Progress Blocks
- Sections
- Service Tiles
- SocialSharer
- Spacing
- Tabs
- Tables
- Testimonials
- Text Accent Colors
- Toggle
- Typography
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.
Card (Standout Highlight)
Use .highlight class with .card-standout for triangle effect. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Card (Standout)
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Card (Default)
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.