Mastodon Minute
Mastodon Minute: The Trace and Crave Food Hall
Mastodon Minute: The Trace and Crave Food Hall
Todd Eviston
How-to Guides
Module Guides
Video Guides
CTA GRID
Guidelines
Usage
- CTA stands for Call to Action. This grid is used to group together buttons that call the user to take action by following those links to specific pages.
- Fill out the Copy WYSIWYG block with text that introduces and contextualizes your group of CTA buttons.
- One CTA Grid Item will appear. Add more below it using the Add CTA Grid Item button.
- Fill out the Item Title, URL, and Link Text fields for each item. The Item Eyebrow is optional, but if any item uses eyebrow copy, then all of them should.
- You can also duplicate or remove a CTA Grid Item by clicking the three dots next to the Collapse button.
Character Limits
- Eyebrow: 20
- CTA Item Title: 30
- CTA Button: 20
Best Practices
- You can fit four CTA Grid Items in one CTA Grid, which will horizontally span the screen, but this can get cramped, especially if your items have long titles. If this is the case, it’s better to limit your CTA Grid to three items, and then add another CTA Grid right below it with no title, and add more items there.
- If you have only one CTA, it’s better to use a module like the Callout.
- The title of your CTA Grid Item and the Link Text on the CTA button should not say the same thing. If you don’t know how to label your button, something generic like “Learn More” or “More Info” is generally fine.
- Be concise when labeling your CTA buttons.
Multi-column
Eyebrow
Title Goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eyebrow
Title Goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eyebrow
Title Goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Guidelines
Usage
- Use the Section Title and Section Copy fields to introduce and contextualize the columns below.
- You’ll start with one column, but you can add more by clicking Add Multi-Column (Column), up to a maximum of three.
- For each column, add an image, a Column Title, Column Body Copy, and a URL and Link Text for the Column CTA. The CTA is required. Optionally, you can also add a Column Eyebrow and Column Icon that will be placed above the column’s image.
Character Limits
- Column Eyebrow: 20
- Column Title: 30
- Column Body Copy: 200
- Link Text: 20
Best Practices
- The Multi-Column module can be used with only two columns, instead of all three. If you use it this way, it’s similar to a 50/50, except both sides have both copy and an image.
- This module should not be used with only one column.
- The content of each of the three columns does not necessarily have to be closely related to the content of the others. They have their own titles, so they can be labeled separately. If this is the case, you should skip the Section Title and Section Copy at the top of the module.
- There’s a library of icons for you to choose from when you click Add Media in the icon section. Take advantage of this. It doesn’t have to be entirely related to your content.
Stats
Stats
Guidelines
Usage
- Use the Copy WYSIWYG section to introduce and contextualize the stats below.
- You’ll start with one Stat. Click the Add Stat button to add more, or click the three dots to remove or duplicate a Stat. You can add several Stats, and after more than four are added, they’ll wrap onto a second row.
- For each Stat, fill out the Stat Value and Stat Title fields. The other fields—Stat Eyebrow, Stat Description, and Stat Link—are all optional.
Character Limits
- Event Title: 150
- News Item Title: 85
Best Practices
- Each Stat is visually designed to be compact and loud. The stat itself, probably a number, must be six characters or less, and the title that tells the user what the stat is counting should also be concise, like “Degrees Granted” or “Graduates.”
- If you want to explain more about what your stat denotes, do that in the Stat Description in order to keep the title as short as possible.
- If one Stat has a description, then so should all the others. Same with eyebrows. Be consistent across all Stats.
- A link is not often necessary and dilutes the visual impact of the Stat. Often the strongest message is achieved by only using the Stat Value and Stat Title fields.
Stacked List
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Guidelines
Usage
- Use the Copy WYSIWYG section to introduce and contextualize the list below. If used, the copy in this section should be centered.
- Each Stacked List Item consists of a WYSIWYG block to fill with copy, and will be automatically labeled by number in sequence as they appear on the page.
Character Limits
- Stacked List Item: Variable
Best Practices
- Because the items will always be numbered, this module is especially useful for listing chronological instructions or events.
- The two best typographical ways to structure a Stacked List Item are: Alt Heading 4 with normal-sized copy below, or just normal-sized copy with no heading.
- Limit your items to nine at the very most. Fewer is better, and if the number of added items is rising above give, the Stacked List module will begin to dominate the vertical space of your page. If this is the visual effect you want, then that’s OK. Otherwise, use a more compact module, like the WYSIWYG.
People Grid
Department of Communications and Marketing
Jerry Lewis
ViceChancellorCommunications & Marketing
Barton Tyner
Director of Digital Strategy
Nick Huber
Web Developer II
Bennett Winters
Associate Director for User Experience Design
Guidelines
Usage
- Fill out the Title with the name of your team, department, or group of people.
- For each person you want to add, click Add Another Item, then begin typing their name, and click on their full name when the autofill function finds them. You must click on them. It will not work if you type their name without clicking.
- Click and drag the four-way arrow icon to the left of a person’s name to reorder them.
Character Limits
- Title: 40
Best Practices
- If you want to organize people into multiple teams, add multiple People Grid modules on the page, and title each one with the name of each team.
- If you can’t find a person who should be there, if a person’s title is wrong, or if they have no bio information, this all needs to be addressed in the People Directory system. Drupal pulls all that information automatically, so it can’t be addressed here. Fill out a change form at this link, or find more information in this document.
- If your list of people is long and you want to compress them into an accordion, click the “Put team in an accordion” checkbox.
People Grid (Custom)
Meet our Team
Barton Tyner
Director of Web Services
Nick Huber
Web Developer II
Bennett Winters
Associate Director for User Experience Design
Guidelines
Usage
- Fill out the Title to describe this group of people.
- For each person you want to add, click Add Custom Person, then fill out the fields to make their name and photo appear. Their name is the only mandatory field.
- If you fill out the Link field with a URL, then the person's portrait and name will become a clickable link.
Character Limits
- Title: 40
Best Practices
- The regular People Grid, above, should be used before the Custom People Grid for regular purposes, like Faculty and Staff pages. This custom grid should be used for listing people that don't have Faculty/Staff data that's pulling from HR, like students, or emeritus faculty.
- The other use for this module is when you want Faculty/Staff portraits to link to a different page then the Faculty Success bio page, which the regular People Grid automatically links to.
- Make sure the portrait images are cropped to square dimensions when you upload them to be used in this module.
news and events grid (GLOBAL)
Guidelines
Usage
- Utilize the two checkboxes to toggle the Show All buttons and the Upcoming Events column. If the Upcoming Events box is unchecked, this module will show only news items, no events.
Character Limits
- N/A
Best Practices
- This module shows global news and events throughout the university. It is not specific to your unit. It is preferable to use other modules that show events and news specific to your unit, but lacking those, you can always add this to a page to connect it to the presence and life of the wider university.
- Events cannot be added here directly. To make events appear here, add them through the Admin Toolbar at the top of the page. Navigate to Content ➜ Add Content ➜ Event. Find out more in our how-to guide.