Web

Miscellaneous UI

The following are miscellaneous user interface elements used on HBS.edu.

Tabs

On teal pages, the tab off-state (when appearing at the bottom of the primary color field) may be #00897b instead of black. On light blue pages, the tab off-state (when appearing at the bottom of the primary color field) may be #3684b9 instead of black.

Standard Dropdown

Arrow color and header text hover color within the dropdown are inherited from the primary color field. Hover color behind a menu item is also inherited from the primary color field. Current page text color is also inherited.

Most drop downs open on click. When open, the arrow becomes an "x" which closes the dropdown on click. The dropdown may also be closed by clicking outside of its footprint.

Column Length Guidelines:

maximum 1-column = 7 entries
maximum 2-column = 14 total entries (minimum entries in a column = 4)
maximum 3-column = 21 total entries (minimum entries in a column = 5)
Use 4-columns if more than 21 entries.

Frequently Asked Questions (FAQs)

Frequently Asked Questions use an accordion-style interface to show/hide individual questions and answers. Multiple FAQs can be open at the same time.

FAQs Closed

FAQs Open

Windowshade

When clicked, the “load more” button will add an additional five tweets or news items (depending on the related content) and shift the button to the bottom of the added content.

Alphabet Sorting & Anchor Jump Navigation

Alphabet navigation can be used to jump to another portion of the page. If there is no content for a particular letter, it should be deactivated. Most often, the alphabet is arranged all on one row.

PDF Links

All PDF links should be followed by the text "(PDF)" in parenthesis. On hover, the following pop up box displays above all PDF links.

Back-to-Top Arrow

All pages that scroll should incorporate the back-to-top arrow. Once a standard amount of scrolling has occurred, the arrow appears in a consistent position relative to the lower-right corner of the browser window.

Date Range Calendar

Use the date range calendar to organize content chronologically. Inputting content into the start and end date is required. The popup should appear on top of all other page content (highest z-index) and should only appear when the user clicks the start or end field.

Web