Alternating Grid
Overview
List of featured items with alternating layout.
When to Use
Use with longer lists of featured content that have nice photos.
Content Guidelines
| Content | Description | Max Chars. |
|---|---|---|
| Heading | Short copy that grabs the user’s attention. | 56 |
| Subheading | Short copy that expands on the heading. | 100 |
| Items | List of items. | N/A |
| Postscript | Additional info e.g. to direct the user to resources. | 100 |
| Content | Description | Max Chars. |
|---|---|---|
| Image | A nice image that represents the content. | N/A |
| Heading* | Short copy that grabs the user’s attention. | 56 |
| Body Copy* | Describe what the user can expect when clicking the call to action. | 255 |
| Call to Action(s)* | The action(s) you want the user to take. | 25 |
*Required content.
Example 1 General Audience Default Tone Color Palette Option 1
Alternating Grid Heading
Subheading goes here.
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to Action
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to ActionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Example 2 Academic / Traditional Audience Default Tone Color Palette Option 2
Alternating Grid Heading
Subheading goes here.
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to Action
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to ActionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Example 3 Academic / Traditional Audience Reserved Tone Color Palette Option 5
Alternating Grid Heading
Subheading goes here.
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to ActionItem Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to ActionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Example 4 General Audience Let’s Go! Tone Color Palette Option 3
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to Action
Item Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Call to ActionLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.