William & Mary sign

Latest about COVID-19 and the Path Forward for fall.

Info for... William & Mary
William & Mary W&M menu close William & Mary

Grid Page

The grid page is a flexible, highly visual page type with a left column and optional right column. The main content is organized into linkable "cards" of multiple sizes, each featuring an image or video with optional titles and captions for each. The content area offers intro and outro WYSIWYGs as well. 

As it requires an extra level of user support — training, consultation on appropriate usage, access to high-quality photography — this page type is only visible to users in your asset factory by request. It is packaged as a Folder with Grid Page and is designed to fit into the site structure in the same way as a Folder with Content Page.

Suggested uses
  • Landing page with visual navigation to sub-pages
  • Creative presentation of a collection of photos and videos
Sample Uses of Flow and Classic Layouts
  • Flow - mix of small/large, multi-sized images/videos using no titles, captions or links
  • Flow + Titles - mix of small/large, multi-sized images/videos using titles and links
  • Flow + Captions - mix of small/large, multi-sized images/videos captions and links
  • Classic for Grid - using same-sized images to create an even grid
  • Classic for Rows - mix of small/large images, but with same heights for even rows
  • Classic for Multi-size - mix of small/large, multi-sized images/videos (leaves white space)
Available options when building the page
  • Title (required), Summary and Teaser
  • Right column and menu check boxes for parent and siblings
  • Grid layout choice (see example pages)
    • Classic/Row-centric - preserves order of cards , lining them up left to right in rows
    • Flow/Best fit - cards will nestle to fill in available space on the page
  • Intro WYSIWYG
  • Listboxes, Related Links and Widgets selectors
  • Cards: The contents of each card is presented within a gray background on the page. Use the + and - to add or delete cards. Use the up/down arrows to reorder the cards. Fields for each card include:
    • Card Width (select small or large)
      • Cards that fit per row on desktop: 3 small OR 1 large + 1 small
      • Cards that fit per row on desktop when right column on: 2 small OR 1 large
    • YouTube ID (use if a video)
    • Internal photo selector (use if an image)
    • Title (optional, displays centered below the image or video)
    • Caption (optional, displays left-aligned below the title)
    • Internal and External Link options (destination when users select the card)
  • Outro WYSIWYG
Image size requirements

Upload a minimum of 454px wide for all card images (height is flexible).

"Small" cards will automatically scale down to 218px wide on larger screens, but display at up to 454px wide on mobile devices. "Large" cards will display at up to 454px wide on all screens.

Do not upload images wider than 1000px as that will place an unnecessary burden on the Cascade databases and your users when they load the page.

Additional specifications
  • The spacing between cards is set.
  • Images will automatically adjust their size to maintain image aspect ratio across devices and browser widths.
  • If the image provided is too narrow, it will scale out (stretch) maintaining the original image's aspect ratio on some devices. Be sure to only use images at least 454px wide to prevent stretched images.
Tips & tricks
  • Be creative. Use high-quality images. Preview frequently across devices as you build to understand how your users will see and interact with the page on both desktop and mobile devices.
  • Create different layouts and effects by toggling between the Classic and Flow setting, and by playing with different crops and aspect ratios for your images.
  • Text length of card titles and captions will affect the overall size of the card. Be mindful of this in your design.
  • If you would like to create a consistent grid effect across device and browser widths, crop all images to the same size. Keep titles to a single line and captions to the same length (or avoid captions altogether).