Grid Page

The grid page is a robust, visual page type presenting linkable "cards" of varying sizes, each featuring an image or video, along with optional intro and outro content areas. It is packaged as a Folder with Grid Page and is designed to fit into the site structure in the same way as a standard Folder with Content Page.

As this asset requires an extra level of user support — training, consultation on appropriate usage, access to high-quality photography — it is only made available to users upon request to their Cascade Manager.

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 Fields & Options

Title (required), Summary and Teaser
Right column and menu check boxes for parent and siblings (use of the right column is not recommended for most use cases)
Grid layout choice (see sample 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
Social Media Thumbnail image
Listboxes, Related Links and Widgets selectors (use of right-column is not generally recommended)
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
- YouTube ID (use if a video)
- Internal photo selector (use if an image)
- Title (optional, but recommended; 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 Sizes

Upload a minimum of 510 pixels wide for all card images (height is flexible).
We recommend .jpg for all photos and for graphics without a transparency. For graphics with transparency, we recommend .png.
Do not upload images wider than 1000 pixels as that will place an unnecessary burden on the Cascade databases and your users when they load the page.

Grid Card Image Display

"Small" cards will automatically scale down to 245 pixels wide on large screens, but display at 100% width as a single column on phones and small screens. "Large" cards will display at up to 510 pixels wide on all screens.

Additional Specifications

The spacing between cards is set.
Images will maintain their image aspect ratio across devices and screen sizes.
If the image provided is too narrow, it will scale out (stretch) maintaining the original image's aspect ratio. We recommend using images at least 510 pixels 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).