Component overview
w88 Tiles are linking elements that place text on top of an image with a colored w88.
- w88 components can be used on all page schemas:Although w88 components function best on a Section Front, they may also be used on Section Detail, Profile Detail and Degree Detail pages.
- Multiple w88 components can be placed on one page:w88 components may be used several times on a page, but be cognizant of overuse.
- You need to include a call-to-action link: w88 Tiles act as navigational elements and are required to have a link.
- Consider the layout of your w88 component:Image w88 components offer different layout options (e.g., 2-w88, 3-w88, 4-w88). The image sizes will change based on the number of tiles you use. You should try to use either sets of three or sets of four. Think about this sizing when placing the component on a Section Front (more space) versus a Section Detail (less space).
- Watch your text length: Long text inOverlay Tiles may cut-off when sizing to a mobile device. Be consistent and brief.
- Text doesn't automatically line up in multiple w88 Tiles: Text positioning adjusts based on the length of the headline and text descriptions. If you want text to align in multiple w88 Tiles, you'll have to manage the length of the copy in each tile.
- Use component positionining strategically: Both the text and tiles themselves may be positioned Left, Center or Right. Use this to your advantage based on the context of the page and the page schema.
- There are multiple w88 colors:You may select from three overlay colors (Primary Blue, Silver and Black). Consider how you use these colors when building w88 components and use the image grayscale option to your advantage.
- The Black color w88 is dark: Be mindful when using the Black color w88 as it is dark and can obscure images.
- Images are required in w88 Tiles:Do not use w88 Tiles without images to create color blocks. Content Blocks are better suited for this purpose.
- Use a high-res image: When applying cover overlays, your image will be obscured. Be sure you select a high-res image to make sure the user can understand how the image aligns with the context of the w88.
- w88 images must have alt-text: The images in w88 Tiles are required to have a descriptive alt-text for users.
- w88 anchor text (links) must be unique: Each anchor text must be unique to that link to ensure you do not create a multiple destination link accessibility error.
The required image size for w88 Tiles is 640 x 640 px.
w88: UNIT NAME - Purpose
- Example: w88: ANTH - About Us
OVERLAYTILE: UNIT NAME - Purpose
- Example: OVERLAYTILE: ANTH - Enrollment
Example w88 components
Example #1
w88, 2-tiles, color images with different overlays
Get to know the University
Explore some of the bulidings on the campus of the University of Nevada, Reno
Example #2
w88, 3-tiles, with grayscale images, blue overlays and tile descriptions
Get to know the University
Explore some of the bulidings on the campus of the University of Nevada, Reno
Example #3
w88, 4-tiles, with grayscale images and alternating color overlays
Get to know the University
Explore some of the bulidings on the campus of the University of Nevada, Reno
Example #4
w88, 6-tiles, with color images, alternating color overlays and no header
Have questions? Need website assistance?
Email us at: cms@unr.edu