Skip to Content

Communications and Public Affairs

Grid

A grid page is a menu page used with a large group of items, individual links and strong images organized in a three-column structure.

  • Using Grid Snippets

    Each item in the grid takes you deeper into the site, but gives you visual and text representations of what you will find there. Grids are built in multiples of three across, and each item includes a 255-square-pixel image, title and brief description of the linking page. This highly visual page requires that all items have strong images, typically in multiples of three, but with at least five items. 

    Grid items can not only be used to link to pages within the section, but also can open an image gallery in a lightbox or play a video in a lightbox. Because of the grid's three-column structure, this is a full-page element and cannot be used with callouts.

    Grid snippets automatically use heading 4, so you will need to include a heading 3 immediately before each one to comply with the university's guidelines for accessible heading hierarchy on the Digital Accessibility site. Follow the university's image grid alt text guidelines to create accessible grid content.

  •  Page on the South Carolina College Leadership and Service Center site titled Service Opportunities. The page includes a banner image, and an h3 heading with text “Find a way to help others today” before an image grid with visible heading links Volunteering, Service Leadership, and Service-Learning, each under a photograph that represents them. A second row of the image grid is partially visible.

     

     
Best practice

Choosing Images

Images should be similar in style and composition yet look different at a glance. In the sample, the different areas of study are highlighted by detail images of instruments. If you lack strong imagery for all items, use a simple list instead.  

 

  •  

    Playing Videos

    When linking to a video, the CMS automatically adds a play button overlay on the image. Make sure you establish context in the description that the link leads to a video.

  • videos in grid items
     

 

 


Challenge the conventional. Create the exceptional. No Limits.

©