Skip Navigation

Style Guide

Using Images in the Web

It is important to keep in mind a few rules when using images on the web. 

The following placeholder images include their dimensions and recommended file size for easy reference.

Hero (< ~100KB)

Should only be used as a header image – used below the title. Any subsequent large images should be 680px ✕ 420px.

720 x 420 pixel placeholder

Useful as a header image – used below the title – or as a break in between paragraphs.

Placeholder 720x180

Large Body Image (< ~100KB)

It can also be used in between paragraphs or at the end of the page. Must be centered.

Placeholder 680x420

Slideshows & Promos (< ~70KB)

This size is used for the slideshow in our homepage and sites like News

Placeholder 420x280

Two-Column Callout (< ~30KB)

Placeholder 300x150

Medium Landscape Floated Image (< ~20KB)

Used for in-content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 190x120

Medium Portrait Floated Image (< ~30KB)

Used for in-content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 230x280

Three-Column Callout (< ~20KB)

Used for callouts as well as small content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 190x120

Profile Slideshow (< ~30KB)

Used for profile slideshows as well as small content images which can be aligned left or right through the classes block_left or block_right.

Placeholder 190x220

Four-Column Callout (< ~10KB)

Placeholder 140x90

Small Profile (< ~10KB)

Used for small profile images which can be aligned left or right through the classes block_left or block_right.

Placeholder 120x120
 


To Align Images to the Left or Right

To properly align images in SiteExecutive you should set the class to block_left or block_right within the "Image Properties" dialog box when importing the image or by control or right-clicking an image on a page. (See image below for where to find this setting.) Relying on the SiteExecutive "Align Right" or "Align Left" controls in the tool bar will not create the correct amount space around left or right aligned images.

Setting block class