Web
Full-Width Patterns
These patterns are for the 1180-px grid. (Open images in a new tab to view full-size.)
On desktop, there are 80 px of vertical space between modules unless otherwise noted.
Unless noted, all modules (other than those with full-width photos) may appear on a background strip.
All standard module heads (like "In the News" shown in Module 05 below) can be links, but don't have to be. When a link, they are followed by an arrow; the arrow is not included if the head is not a link.
Module 01: Hero Story / Profile
• Desktop PSD Template: Module 01 (2.5 MB)
There are four options for the headline/blurb position (top left, lower left, top right, lower right). When positioned at the top, the headline is 56 px from the top of the photo and builds down. When positioned in the lower positions, the blurb box is 56 px above the bottom of the photo and builds up. Headlines span 7 columns and text spans 4 columns.
The headline and the arrow box color are based on the primary color field color: use the associated Dark Background & Type on White color.
The photo height on desktop is 648 px.
Module 02: Hero Statement
• Desktop PSD Template: Module 02 (2.4 MB)
The text spans 10 columns and begins 80 px from the top of the photo and builds down.
The button is optional. When used, the button type and arrow box color are based on the primary color field color: use the associated Dark Background & Type on White color.
The photo height on desktop is 648 px.
Module 02b: Fancy Hero Statement w/ 4-Options
This element should be used sparingly. The hero statement and the (rarely used) button are both optional (see www.hbs.edu for example without hero statement).
Module 03: Full-Width Feature, Black Box
(A) Headline is a Link
(B) Headline is not a Link
• Desktop PSD Template: Module 03 (4.4 MB)
The box spans 6 columns and is centered vertically and horizontally on the photo.
When the headline is a link, the arrow indicator is used (appearing in the “dark background” color associated with the primary color field color). When the headline is not a link, the arrow is replaced by a rule and an optional secondary link may be introduced.
The photo height on desktop is 648 px.
Module 03: (C) Full-Width Feature, Black Box, Choice
• Desktop PSD Template: Module 03c (2.6 MB)
The box spans 6 columns and is centered vertically and horizontally on the photo.
The button lengths should be equal (on both phone and desktop) and the color is based on the primary color field color: use the associated Dark Background & Type on White color.
The photo height on desktop is 648 px.
Module 04: Full-Width Feature, Statement Style
(A) Small Button
(B) Headline is Button
• Desktop PSD Template: Module 04 (4.2 MB)
The text boxes span 10 columns (although forced breaks may be introduced with caution) and are centered both horizontally and vertically. The box color is based on the primary color field color: use the associated Dark Background & Type on White color.
The button on version (A) is optional. When used, the button type and arrow box color are based on the primary color field color: use the associated Dark Background & Type on White color.
The photo height on desktop is 648 px.
Module 05: Big Feature
• Desktop PSD Template: Module 05 (105 k)
All fields are optional. The author name and source can be links if desired. (Colors do not change; underline on hover.)
If a video, the video plays inline when the thumbnail or the headline is clicked.
The photo / thumbnail on desktop is 580 x 328 px.
Module 06: Three Across
(A) Not Cards
(B) Cards
• Desktop PSD Template: Module 06 (116 k)
All fields are optional except the headline (headline is #A41034 if a link; black if not a link). Author name and source can be a links if desired. (Colors do not change; underline on hover.)
If a video, the video plays in a modal when the thumbnail or the headline (or entire card in 06b) is clicked.
Do not use Module 06a on a background strip -- use 06b instead.
Cards always appear on a background field which is based on the primary color field color: use the associated Light Background color. Cards extend 64 px below the longest text on desktop. Vertical distance between the cards and the bottom of the background field is 80 px on desktop.
The photo / thumbnail on desktop is 380 x 208 px.
Module 07: Four Across
(A) Not Cards
(B) Cards
• Desktop PSD Template: Module 07 (121 k)
All fields are optional except the headline (headline is #A41034 if a link; black if not a link). Author name and source can be a links if desired. (Colors do not change; underline on hover.)
If a video, the video plays in a modal when the thumbnail or the headline (or entire card in 07b) is clicked.
Do not use Module 07a on a background strip -- use 07b instead.
Cards always appear on a background field which is based on the primary color field color: use the associated Light Background color. Cards extend 32 px below the longest text on desktop. Vertical distance between the cards and the bottom of the background field is 80 px on desktop.
The photo / thumbnail on desktop is 280 x 160 px.
Module 08: Big Feature with 2 or 3 Smaller Items
• Desktop PSD Template: Module 08 (116 k)
All fields are optional except the headline (headline is #A41034 if a link; black if not a link). Author name and source can be a links if desired. (Colors do not change; underline on hover.)
If the featured item is a video, the video plays inline when the thumbnail or the headline is clicked. If the smaller items are videos, video plays in a modal when the thumbnail or the headline is clicked.
The featured photo / thumbnail on desktop is 580 x 328 px. The smaller photos / thumbnails are 250 x 144 px on desktop.
Only the featured item appears on phone.
Module 09: Video / Photo Carousel
• Desktop PSD Template: Module 09 (132 k)
Entry headline is #A41034 if a link; black if not a link.
If the featured item is a video, the video plays inline when the thumbnail or the headline is clicked.
Images to the right and left extend to browser edge and move to featured position when clicked. Left / Right arrows stick to browser edges.
The featured photo / thumbnail on desktop is 780 x 440 px. The rule position and height (64 px) are fixed.
Module 10: Large Month Calendar
• Desktop PSD Template: Module 10 (94 k)
Headlines are #A41034 if links; black if not links.
All fields are optional except the date and headline. A standard module head can be added if desired.
When appearing on a background strip, all type must meet AA accessibility guidelines (all gray type becomes black).
Module 11: Big Date Calendar
• Desktop PSD Template: Module 11 (94 k)
This pattern may appear on white, on the Primary color with black type, and on the Light Background color with black type.
Headlines are #A41034 if links; black if not links. All type needs to meet AA accessibility guidelines. Note that in some instances, links need to be changed from crimson to black and are underlined. Gray type is only used on a white background and changes to black on the light and dark backgrounds.
All fields are optional except the date and headline. A standard module head can be added if desired.
Note that the last version cannot be used with green. When the last version is used with light blue, the background color of the outside blocks is #3a98c7 rather than the primary color.
Module 12: Social Media
• Desktop PSD Template: Module 12 (5.3 MB)
Quotation mark overhangs grid's left margin (and does not appear on phone). Row height is fixed at 392 px (on desktop). Button positions are fixed 16 px above the bottom of the box (on desktop). Up to 8 links can be included in the (optional) "Be Social" box. "Be Social" box may be replaced by a tweet.
Instagram cells may be replaced by static photos.
Single strip Twitter module can also be used for Instagram.
The box colors are based on the primary color field color: use the associated Dark Background & Type on White color and the Light Background color.
Do not use Module 12 on a background strip -- use as shown.
Module 13: Quote / Testimonial
• Desktop PSD Template: Module 13 (448 k)
Quotation mark overhangs grid's left margin (and does not appear on phone). Photo (390 x 392 px) may appear on the left or right. (Optional) button position is fixed 16 px above the bottom of the box (on desktop).
Module: Standard Body Text
See Typography page.
This type style is included in the Standard 1180-Pixel Page Template posted on the Grid & PSD File and Typography pages.
Module 14:
(A) Feature Text
(B) Feature Text with Introduction
See Typography page.
This type style is included in the Standard 1180-Pixel Page Template posted on the Grid & PSD File and Typography pages.
Module 15: Large Text Item
This module is included in the Standard 1180-Pixel Page Template posted on the Grid & PSD File and Typography pages.
All fields are optional other than the headline. Headline spans 10 columns. (Optional) blurb spans 8 columns. Author name and source can be a links if desired. (Colors do not change; underline on hover.)
Module 16: Half-Width Text
This module is included in the Standard 1180-Pixel Page Template posted on the Grid & PSD File and Typography pages.
Links below copy are optional.
Module 17a: 2-Up with Large Images
• Desktop PSD Template: Module 17a (126 k)
All fields are optional. The author name and source can be links if desired. (Colors do not change; underline on hover.)
If a video, the video plays inline when the thumbnail or the headline is clicked.
Module 17b: 2-Up Publicatons
• Desktop PSD Template: Module 17b (293 k)
All fields are optional. A source may be added after the date (see module 17a for style). The author name and source can be links if desired. (Colors do not change; underline on hover.)
Module 18: 2-Up Features
• Desktop PSD Template: Module 18 (107 k)
All fields are optional.
If a video, the video plays inline when the thumbnail is clicked. Video play button does not appear on hover.
Module 19: 3-Up Features
• Desktop PSD Template: Module 19 (102 k)
All fields are optional.
If a video, the video plays in a modal when the thumbnail is clicked. Video play button does not appear on hover.
Phone design is the same as Module 18 above.
Module 20: Full-Width Video
(A) Free-Standing
(B) Full-Width Strip
• Desktop PSD Template: Module 20 (2.9 MB)
All fields except the headline are optional.
Video plays inline when the thumbnail or text box is clicked.
Note that 20b requires a custom thumbnail image so cannot be used as a feed.
Phone design is the same for both.
Module 21: Full-Width List of Links
• Desktop PSD Template: Module 21 (146 k)
Many options exist for a full-width list of links. Although not shown, lists may appear on a white background. Type must meet AA accessibility guidelines. List modules may abut full-width photo modules. Long lists may be collapsed on phone.
Module 22: Dark Testimonial / Video
(A) Cluster of Three
(B) Single
• Desktop PSD Template: Module 22 (1.4 MB)
Degree and Job Title fields are optional.
Videos in the primary position play inline. In #22a Cluster, clicking on the secondary or tertiary item moves it into the primary position.
Phone design is the same for both. Only show one video on phone for #22a Cluster.
Module 23: Statistics
See Statistics & Tabular Data page.
Module 24: People / Team / Directory
See People / Team / Directory page.
Module 25:
(A) Small Publications List
(B) Large Publications List
See Typography page.
These type styles are included in the Standard 1180-Pixel Page Template posted on the Grid & PSD File and Typography pages.
Module 26:
Body Pull Quote
See Typography page.
This type style is included in the Standard 1180-Pixel Page Template posted on the Grid & PSD File and Typography pages.
Module 27: Call-to-Action
See Calls to Action page.
Module 28: Multiple People, No Blurbs
See People / Team / Directory page.
Module 29: Conference Landing & Schedule
• Desktop PSD Template: Module 29 (107 k)
Schedule pattern can be used anywhere (doesn't need to be a conference). All fields are optional.
Module 31: Timeline
• Desktop PSD Template: Module 31
This module works best on salsa (#ed6a47), dark blue (#3a98c7), and teal (#48c4b7) pages.
Module 32: Arrow Strip
• Desktop PSD Template: Module 32
Use “Dark Background” color for strip.
- No Photo
- With Photo
Module 33: 4-Up Books
Samples will be available soon.
PAGE BOTTOM
There should be 120 px of vertical space between body content and the footer. See footer for more details.