Body
Summary
Template blocks are chosen based on the content needs while also considering flow and varied visual design throughout the webpage. The goal is to present information clearly and cleanly – making it easy for the user to learn what they need, while also having a delightful experience.
General Block Design Standards
There may be additional options or limitations depending on the specific block. The MarComm team reserves the right to make exceptions to these standards if necessary.
- Buttons (all Blocks): up to 2
- Carousel: 10 images max
- Content Blurbs (all Blocks, except Paragraphs & Accordions): 1-3 sentences, 250 characters max
- Headings (all Blocks): 3-5 words max
- Secondary Navigation Panel: 8 links max
- Tabs: 2 min, 3 max
- Testimonials: 10-15 words
- Visual Routers: 6 images or videos max
WSU Custom Blocks Design Standards
Webpages are built primarily using WSU Custom Blocks. Many Custom Blocks have additional design choices such as
- Background and Text Colors
- Icons or Line Art
- Images or Videos
- Links
Several Custom Blocks have sub-variants that serve specific types of content, such as testimonials or story features.
The most frequently used block is the Panel because it provides a container for other block types. Without a Panel, these blocks will not display the proper formatting styles.
A Panel can have a white or a purple background, and this will dictate design choices for the nested blocks.
For a Full-Width layout, blocks must be nested within a Panel—unless otherwise noted as standalone blocks. For a Two-Column layout, it is optional to nest blocks within a Panel—unless it is noted that a Panel is required.
| Custom Block |
Sub-Variants |
Panel Required |
Page Layout Options |
| Accordion |
None |
- Yes, if Full-Width
- Optional, if Two-Column
|
Full-Width |
| Block Grid |
- Feature Grid
- Click-to-Action Grid
|
Yes |
Full-Width |
| Contact Card |
None |
Yes |
|
| CTA Button |
None |
- Yes, if Full-Width
- Optional, if Two-Column
- Typically added within another Block type as well
|
|
| CTA Panel |
|
No |
Full-Width |
| Feature Block |
- Feature
- Testimonial
- Event
- Contact (retired)
|
No |
Two-Column |
| Hero Panel |
None |
No |
Full-Width |
| Juicer Panel |
This is a specialized block to provide a social media feed from the Juicer plugin with limited use-case across the site. |
No |
Full-Width |
| Justified Feature / CTA Grid |
- CTA Blocks
- Feature Blocks – Standard
- Feature Blocks – Flip Grid
|
Yes |
Full-Width |
| Ninja Tables |
This is a specialized block to provide a data table sources from the Ninja Tables plugin. This is the standard method to build tables. |
- Yes, if Full-Width
- Optional, if Two-Column
|
|
| Panel |
None |
No |
|
| Pin Slider |
This is a specialized block to display images, quotes, text and links in a vertical slider. This is used on the Homepage with limited use-case across the site. |
No |
Full-Width |
| Program Finder |
This is a specialized block to display Cards. This is used on the Majors & Program page with limited use-cases for filtered variants across the site.
There is a Student Org variant.
|
No |
Full-Width |
| Secondary Navigation |
None |
No |
Full-Width |
| Single Feature |
None |
Yes |
Full-Width |
| Tabs/Carousel |
|
Yes |
Full-Width |
| Testimonial Slider Panel |
None |
No |
Full-Width |
| Visual Router |
None |
Yes |
Full-Width |
WordPress Blocks
There are some basic WordPress Blocks used for content formatting in addition to WSU Custom Blocks. These blocks can be nested within Custom Blocks or used independently:
- Heading
- List
- Paragraph
- Spacer
Though available in the editor, the other WordPress Blocks and Patterns are not formatted to fit within the site theme template.
Reusable Blocks
All types of blocks—individually or as a group— can be designated as Reusable Blocks. It is recommended to leverage Reusable Blocks when appropriate, such as when you want to:
- Share a specific block with specific content across multiple pages (e.g. an announcement or contact section)
- Save a specific block with specific content to be published again later (e.g. annual event or promotion)
- Speed up page building with a block group with generic content (e.g. an event listing or feature story)
Making an update to the content or layout within a Reusable Block means those changes are reflected everywhere that block is placed now and in the future.
If used as a quick start layout, you should convert the Reusable Block back to regular blocks to prevent overwriting a generic block group or accidentally modifying real content in a page.
Learn More
If you have further questions about the Website Platform Standards, reach out to Elizabeth Berres, Director of Digital Content Strategy, at elizabeth.berres@winona.edu.