Public ‐ Body Modules‐Business Rules & Design Treatment (v1.6)
Body Module Definitions The purpose of this document is to define the business rules and design treatments for all of the various body modules for both two and three column templates. This includes: function, placement, design and expected behavior. The AOC is responsible for defining the business rules around function, placement, expected behavior and interaction, while Extractable will define the design treatment and design elements such as size, background color and text color.
Two Column Body Module Call‐Outs The right column can optionally contain the following modules:
Overview – Image Left Overview – Image Top Overview – No Image Body – Contextual Links/No‐Description Body – Contextual Links/Description Body – Contextual Links/Description/Image Body – Descriptive Links Body – Descriptive Links/Image Body – Accordion HR‐Treatment Body – Accordion No‐Treatment Body – Tabs Body – Dynamic Container/Links Body – Dynamic Container/Dropdown
“Search” Court Locations Module Function: The “Search Locations” module allows a user to perform a search functionality specific to court locations Treatment (TM) Background color (#) Title text color (#) Body text color (#) Border color(#) Elements Module title Instructions Text field entry box “Find” Button Placement On all Overview pages except Self‐Help On various landing and content pages where appropriate Ordering Prominent module (1)
“Contact Info” Module Function: The “Contact Info” module provides users with contact information such as physical address, phone numbers and e‐mail. Treatment (TM) Background color (#) Title text color (#) Module title background color (#FFFFFF) Text color (#) “More” link no‐Underline static state “More” link blue‐underline hover state Visited link color (#) Border color(#) Elements Module title Line Limit (#) Character Limit (#) “More” Hyper link (optional) Carrots after more link (>>) Placement On home page, overview pages, landing pages and content pages where appropriate Ordering Prominent module (2)
“Quick Links” Module Function: The “Quick Links” module provides a list of frequently used shortcuts to documents, web pages within the same tab, and applications that otherwise could not be reached in one or two clicks using the navigation structure available on the page. Typically for deep content areas, usually found on the home page, overview and landing pages. Treatment (TM) Background color (#) Title text color (#) Module title background color (#FFFFFF) Link text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Border color(#) Elements Module title Hyper links (5‐7 max) Link character Limit (#) Carrots in front of links (>>) Placement On home page, overview pages, landing pages and content pages Ordering Prominent module (3)
“What’s New” Module Function: The “What’s New” module provides a list of shortcuts to “Featured” content or applications that have recently been introduced. Typically for deep content areas, usually found on the home, overview and landing pages generally within context. Treatment (TM) Background color (#) Title text color (#) Module title background color (#FFFFFF) Link text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Border color(#) Elements Module title Hyper links (5‐7 max)
Link character Limit (#) Carrots in front of links (>>) “More” Link? Placement On overview pages, landing pages and content pages Ordering Prominent module (4)
“News” Module Function: The “News” module provides a brief description, imagery and access to a “Featured” story or news item. The block can also contain a series of shortcuts to other “Featured” story or news items. Usually found on the home, overview, landing pages and content pages. Treatment (TM) Background color (#) Module title text color (#) Module title background color (#FFFFFF) News title text color (#) Description text color (#) Link text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Border color(#) Elements Module title News title Hyper links (3 max) Link character Limit (#) Carrots in front of links (>>) “More News” Link? Placement On home page, overview pages, landing pages and content pages Ordering Prominent module (5)
“Video A” Module Function: The “Video A” module provides a brief description, imagery and access to a “Featured” video. Usually found on the home, overview, landing and content pages. Treatment (TM) Background color (#)
Module title text color (#) Module title background color (#FFFFFF) Video title text color (#) Description text color (#) Link text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Border color(#) Elements Module title Video title Hyper links (1 max) Link character Limit (#) Carrots (>>) “Read More” Link? Placement On home page, overview pages, landing pages and content pages Ordering Prominent module (6)
“Video B” Module Function: The “Video B” module provides a brief caption, imagery and access to a “Featured” video. Usually found on the home, overview, landing and content pages. Treatment (TM) Background color (#FFFFFF) Module title text color (#) Module title background color (#FFFFFF) Video title text color (#) Description text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Border color(#) Elements Module Title Video Title Hyper links (1 max) Character Limit (#) Placement On home page, overview pages, landing pages and content pages Ordering Prominent module (6)
Left Column Modules The left column can optionally contain the following modules: Related Links How Do I’s Special Notice
“Related Links”/“How Do I” Combined Module Function: The “Related Links/How Do I” module provides a list of frequently used shortcuts combined into one single module that provides access to other web pages/content that may be related to the topic and/or subject. Typically for deep content areas, usually found on the overview, landing and content pages. Related links can point to web pages that are in different sections of the web site. Treatment (TM) Background color (#FFFFFF) Module title text color (#) Link text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Horizontal rule color (#) Border color(#) Elements Module Title(s) Hyper links (5‐7 max) Character Limit (#) Horizontal Rule Placement On overview pages, landing pages and content pages Ordering Prominent module (1)
“Related Links”/“How Do I” Individual Modules Function: The “Related links/How Do I” individual modules provides a list of frequently used shortcuts broken out into individual modules that provide access to other web pages/content that may be related to the topic and/or subject. Typically for deep content areas, usually found on the overview, landing pages and content pages. Related links can point to web pages that are in different sections of the web site. Treatment (TM) Background color (#FFFFFF) Module title text color (#) Link text color (#) No‐Underline static state Blue‐underline hover state Visited link color (#) Border color(#) Elements Module Title(s) Hyper links (5‐7 max) Character Limit (#) Placement On overview pages, landing pages and content pages Ordering Prominent module (1)
“Special Notice” Module Function: The “Special Notice” module emphasizes a particular event or message that needs high visibility. Typically found on overview, landing and content pages. This notice should be used sparingly, and for timely information. Treatment (TM) Background color (#) Module title text color (#) Body text color (#) Link text color (#) Underline static state Underline hover state Visited link color (#) Border color(#) Elements Module Title Hyper link (1 max)
Character Limit (#) Image Placement On overview pages, landing pages and content pages Ordering Prominent module (2)