Browse the Examples for
Helpful Tips
If you find that you are missing any content types while editing a site, please
email websupport@mst.edu and we'll help get those enabled.
Page headers serve as the face of your page. By using the appropriate header you can give context, provide visual hierarchy and help to create engaging experiences. Introduce your content, give it emphasis or get straight to the point with a simple header. Using a photo in your page header can elevate your page, while keeping things simple can keep your page content from being outshined.
Hero Header
- Features a large, eye-catching image with prominent text
- Ideal for impactful landing pages and homepages
- Designed to make bold statements and showcase key messages
- Engages and creates a memorable first impression
Partial Media Header
- Pairs multimedia (photo or video) with descriptive text
- Automatically fills in the site and section name
- Allows you to customize the text as well
- Meant for secondary pages, enhancing detail and context
- Features an action button for targeted user actions
Simple Header
- Clean, text-focused design
- Automatically fills in the site and section name
- Allows you to customize the text as well
- Best for straightforward, informational pages
Separators and Spacer
- By default, it just shows a line
- Can show a pattern bar
- Can be used as a spacer, without showing a line or bar (adds 1rem of space between items)
- Can just be used as an anchor link (won't effect spacing between items and shows no line or pattern bar)
Icon Links
The Icon Links item is similar to the Link Block item, but features a layout better suited to an icon than a photo. In addition to a custom image field, it also features an option to paste in a font awesome icon and choose from a selection of brand colors.
With Image & No Description
- Images are more engaging than text, drawing users' attention and enhancing the overall visual appeal of the page.
- A clean, uncluttered design with images and no text reduces cognitive load, improving user experience.
- Images transcend language barriers, making your content accessible to a broader audience.
All Options
- Combining images with descriptions provides both visual engagement and necessary context, helping users understand the content at a glance and enhancing the overall user experience.
- Descriptions alongside images improve search engine optimization (SEO) by providing keywords and context.
- A well-crafted description can pique users' interest and encourage them to click on the link, leading to higher engagement and increased click-through rates.
Just Text
- Text-only content can provide clear, direct information without distractions, making it easier for users to find and understand the essential details.
Just Label
- Text labels alone can streamline navigation by providing direct and immediate access to content, improving user efficiency.
- Without images or descriptions, maintaining and updating the site becomes simpler and faster, reducing the time and effort required for content management.
Custom Width
- Custom width link blocks allow for tailored designs that can align with the overall aesthetic of the website, ensuring a cohesive and visually appealing layout.
- By adjusting the width of link blocks, you can improve readability and usability, making it easier for users to interact with the content on different devices and screen sizes.
- Custom widths enable you to highlight important content more effectively, giving prominence to key links and ensuring that they stand out to the user.
Image Heading
- Combining images with text overlays creates a visually striking element that captures users' attention but should be used sparingly. Every page should not have this.
- Avoid using heading overlays on images with intricate details or busy backgrounds, selecting the correct image is an important step to ensure a good user experience.
Headings
- Using headings helps establish a clear visual hierarchy on the webpage, making it easier for users to scan and understand the content's structure.
- Headings provide semantic meaning to the content, improving accessibility for users and search engines by clearly delineating sections and topics within the webpage.
- Using headings excessively or inconsistently can disrupt the flow of content and overwhelm users, leading to a disjointed and confusing user experience.
- Only one H1 heading should be used on a page if needed, decreasing header sizes show the visual hierarchy of the page in a way that makes sense to users. The H1 tag is typically handled by one of the page header types instead.
Tag Headings
- Avoid cramming too much information into a tag heading.
- Using tag headings can establish a consistent design language throughout the webpage, enhancing visual cohesion and reinforcing branding elements.
- Tag headings adapt well to various screen sizes and devices, ensuring a seamless and immersive user experience across different platforms.
Heading With Content
- Use when you want draw users' attention to the content you have in it.
- Keep it short and brief, to the point.
Big Intro
- Use at the beginning of the page to capture users' attention.
- Can include a button if wanted or not.
Image with Content
- Gives you the ability to add an image next to content, creating visually appealing and engaging content.
Non-Wrapping Body Content
- Text block that does not wrap around content types.
- Use this for any text you want on your page unless you're wanting it to wrap around something else.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra quis sapien sed tempor. Praesent ac elit dolor. Duis urna ipsum, sollicitudin in semper ut, pellentesque sed tortor. Aenean euismod turpis turpis, vel commodo orci finibus et. In ac fringilla risus. Donec at odio sem. Fusce id sem augue. Sed id convallis lacus. Vestibulum placerat magna quis sem porta scelerisque. Nam iaculis massa quam, vitae tincidunt orci congue sit amet.
Morbi nunc nisi, placerat ut porta et, feugiat in neque. Vestibulum at nunc mollis, dignissim orci id, convallis leo. Aenean tincidunt erat id sem tincidunt, vitae placerat orci vehicula. Suspendisse faucibus eu magna eu lobortis. Nam at pharetra velit, sit amet porta neque. Nunc magna arcu, mattis sed vestibulum fermentum, lacinia in enim. Ut luctus ornare mauris,
Wrapping Body Content
- Text that wraps around other content like an image.
Pull Quote
- Use when wanting to use a quote from someone on your site that you want to emphasize.
Two-Column Body Content
- Use when you want two columns of text next to each other, will stack vertically for the mobile experience.
- The balanced distribution of content across two columns can create a visually appealing design, capturing users' attention and encouraging engagement with the content.
- Be careful to not overuse or make the two columns too different from each other, it can become overwhelming if you're not careful.
Three-Column Body Content
- Breaking content into three columns can improve readability by reducing line length, making it easier for users to scan and digest the information without feeling overwhelmed.
- Follow the same advice as the two-column body content for best results.
Advanced 3-Column Body Content
- This provides more customization options than the two-column and three-column body content, content types.
- You decided the width of each of the three columns.
- Using this feature you need to determine how it resizes for the mobile experience.
Focus Boxes
- Focus boxes draw attention to important information or call-to-action elements
- Excessive use of focus boxes can clutter the webpage and overwhelm users, diminishing the impact of individual boxes and making it difficult for users to focus on the most important content.
RSS Feed With Images
- Use when you want to add a section on your page for news related to your department, College, or the University in general.
- Using the RSS feed with images creates a more visually appealing experience than the standard RSS feed.
Calendar RSS Feed
- Use when you want to show a calendar on your site.
- Use only if it adds value to the experience and is needed.
Localist Calendar Widget Embed
- Same rules apply to this as the standard Calendar RSS.
- This one has images and designed as a real calendar is, creating a more visually appealing option.
Standard RSS Feed
- RSS feed with no images, pulling articles from our news site.
- Use when you want to share news and events on your site.
Tables and Sheet Data
The searchable and sortable table allows you to manage your content via excel or google sheets. Just load in your CSV file either by uploading it to T4 or by using the live CSV link from google sheets.
The table features a search field to filter the table by row and also an automatic sorting feature for each column that lets you sort alphabetically or numerically.
Accordions
- Accordions are ideal for pages with extensive content, allowing users to expand and collapse sections as needed, which conserves space and reduces visual clutter.
- Avoid putting critical information that users need to see in an accordion.
Tabbed Boxes
- Tabbed boxes optimize screen real estate by condensing multiple sections of content into a compact, tabbed interface, making efficient use of space particularly on pages with limited scrolling.
- Avoid placing too much content within tabbed boxes, as this can lead to information overload and make it difficult for users to locate specific information, defeating the purpose of organizing content for better usability.
Standard Image
Use when wanting to add an image to your site. It's typically recommended to go with a full width image when using this type unless you want to wrap text around it when pairing it with a wrapping body item.
Standard Video
Use when wanting to add a video to your site. It's typically recommended to go with a full width video when using this type unless you want to wrap text around it when pairing it with a wrapping body item.
Standard Slideshow
Use when wanting to add a slideshow to your site. It's typically recommended to go with a full width slideshow when using this type unless you want to wrap text around it when pairing it with a wrapping body item.
It's recommended to just use 1 profile per profile item: The personnel profile type can hold up to 4 different profiles in one group. If just a single profile is entered the profile will act as a floating type that the wrapping body content can wrap around.
If two or more single profiles are placed next to each other as content on a page, they will stack up next to each other, just as if they were part of the same group.
Personnel Profile Layout
- Use large layout when you want the photos to be more prominent and stand out compared to the small layout
- Use the small layout when you want a more balanced approach to the profile layout
Faculty or Staff Bio
- Use when you want a more in depth version than the personnel profile.
The contact info and map content type pulls all of its information from your site's site_info section. This makes it easy to keep your information updated from a single location. But if you need to you can override the site_info data. This is useful if you want to display contact information for a sub department, committee or office on your site that differs from your site's contact information.
Contact Info and Map
- Use when you need to share your department or office contact information and address
