Page & Feature Examples

How-To Basics | Page Blocks | Page & Feature Examples | Accessibility

Examples Library

Choose a card to see examples of a feature and how to properly use it or a type of page and what page block layouts work well.

Blog Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

News Article

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Physical Event

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Virtual Event

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Customer Story

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Team Member Bio

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Form Page

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Service or Solution Layout 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Service or Solution Layout 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Service or Solution Layout 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit quis aliquet non, consectetur et erat.

Site Image Sizes by Feature

Note that these can usually also be found in the examples of each feature as well.

  • Page Header Images: 1,000 × 800px
  • Icons for Blocks: 150 × 150px PNG or SVG (Note: Smaller size may be preferred once branding finalized)
  • Icons for Mega Menus: 24 × 24px PNG or SVG
  • Image Block Images: 1,000 × 800px JPG or PNG
  • Video Block Images: 900 × 505px JPG
  • Columns Block Images: 825 × 410px JPGs (Note: This matches the news, events, and blog images)
  • Columns Block Large 1 Column Images: 1500px Max-Width × Any Height JPG
  • CTA Block Images: 300 × 300px JPGs
  • Transition & Call Out Block Images: 600 × 600px JPGs
  • Testimonial Block Headshots: 300 × 300px
  • Customer Story Headshots: 300 × 300px
  • Bio Headshot: 300 × 300px JPG
  • News, Events, Blog Featured Images: 825 × 410px JPGs
  • Logos: 375px × 100px JPGs
  • Footer Awards Badges Collage: 740 × 150px PNG

MSIRobot