Style Guide Header

Featured Image / Page Hero Image Notes

Pages and posts can use the “featured image” feature.

• Reccomended image dimensions: 1800 by 771 pixels
• Image resultion: 72 dpi
• Image file size: <300kb
• Hints: Avoid text. Position important elements to right, but note that in mobile view, sides are cut off Example

Header Option 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum elit a purus fringilla, eget suscipit nibh aliquam. Donec sit amet feugiat lorem. Sed laoreet non ex id dignissim.

Header Option 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum elit a purus fringilla, eget suscipit nibh aliquam. Donec sit amet feugiat lorem. Sed laoreet non ex id dignissim.

Morbi bibendum scelerisque feugiat. Vivamus maximus placerat leo et ullamcorper. Maecenas sit amet nisl at orci porta imperdiet sit amet at augue. Mauris nec cursus est, a ultrices mi. Fusce congue magna facilisis rutrum porttitor. Phasellus ut ligula vitae erat tempor imperdiet. Maecenas auctor justo sit amet elit cursus, in hendrerit risus posuere.

Morbi bibendum scelerisque feugiat. Vivamus maximus placerat leo et ullamcorper. Maecenas sit amet nisl at orci porta imperdiet sit amet at augue. Mauris nec cursus est, a ultrices mi. Fusce congue magna facilisis rutrum porttitor. Phasellus ut ligula vitae erat tempor imperdiet. Maecenas auctor justo sit amet elit cursus, in hendrerit risus posuere.

• Morbi bibendum scelerisque feugiat.
• Vivamus maximus placerat leo et ullamcorper.
• Maecenas sit amet nisl at orci porta imperdiet sit amet.
• at augue. Mauris nec cursus est, a ultrices mi.

Morbi bibendum scelerisque feugiat. Vivamus maximus placerat leo et ullamcorper. Maecenas sit amet nisl at orci porta imperdiet sit amet at augue. Mauris nec cursus est, a ultrices mi. Fusce congue magna facilisis rutrum porttitor. Phasellus ut ligula vitae erat tempor imperdiet. Maecenas auctor justo sit amet elit cursus, in hendrerit risus posuere.

Morbi bibendum scelerisque feugiat. Vivamus maximus placerat leo et ullamcorper. Maecenas sit amet nisl at orci porta imperdiet sit amet at augue. Mauris nec cursus est, a ultrices mi. Fusce congue magna facilisis rutrum porttitor. Phasellus ut ligula vitae erat tempor imperdiet. Maecenas auctor justo sit amet elit cursus, in hendrerit risus posuere.

• Morbi bibendum scelerisque feugiat.
• Vivamus maximus placerat leo et ullamcorper.
• Maecenas sit amet nisl at orci porta imperdiet sit amet.
• at augue. Mauris nec cursus est, a ultrices mi.

Split Feature Image Notes

• Aspect ratio: from 1:1 to 5:4
  • Dimensions examples: 800×800 (1:1), 768×576 (5:4)
• Image resultion: 72 dpi
• Image file size: <300k
• Hints: Avoid text. Less wide image aspect ratios do better in this component. Use anywhere from a sqare aspect ratio to 5:4 for a little more width. Example

Hero Image Notes

• This component has aspect ratio options:
  • 21:9
  • 16:9
  • 4:3
  • or it can fit to the height of the image
• This component can an add some overlays (light or dark) and gradient (eminating from top to bottom) to help inprove the contrast between image background and text/call to action.
• The text/button unit can be oriented in one of 9 different areas on a grid. For example. Center middle, Top right, Bottm left are all options, although some of the more extreme options should probably be avoided.
• Image resultion: 72 dpi
• Image file size: <300k
• Hints:
  • Some baked in solid background colors can be usefull for creating contrast against text.
• Examples
  • 21:9 (1234×376) Example with blue background
  • Orig 16:9, 1800×771  image, example with overlay