Snippets
Snippets are pre-formatted widgets you can drop onto your page to style content.
Available Snippets
- Accordion/Tabs
- Blockquote
- Column
- CouseLeaf Course Display
- Embed Video
- Event Listing
- Feature
- Image Styling
- News Blocks
- People Listing
- RSS Feed
- Snapshot
- Stats
- Table
Accordions/Tabs
Accordions and tabs provide a way to vertically stack items that can be clicked to reveal or hide content. While shortening page content and hiding some content can make a page seem less daunting, they are not a one-size-fits-all solution.
Forcing users to click on hidden content increases interaction cost. If users don't find relevant information under an accordion, they may ignore it or feel it was wasted time. Instead, consider using headings, allowing user to scroll your well-organized webpage.
Do not use accordions/tabs within each other. This makes it difficult to navigate your site, especially on a phone.
Tab Sample
Anything can be added to tabs including images, video and bulleted lists. Tabs appear as accordions on mobile devices.
Test Content
Anything can be added to tabs including images, video and bulleted lists. Tabs appear as accordions on mobile devices.
Anything can be added to tabs including images, video and bulleted lists. Tabs appear as accordions on mobile devices.
Anything can be added to tabs including images, video and bulleted lists. Tabs appear as accordions on mobile devices.
Blockquote
A branded quote that editors can style with green text to provide impact. Quotes need to include a cited name.
There is an old saying that things don’t happen they are made to happen.President John F. KennedyUND Fieldhouse
September 25, 1963
Columns
Use this snippet to separate content into columns within the Main Content.
On mobile, columns will stack rather than appear side by side.
CourseLeaf Courses
CourseLeaf Courses Manual List and CourseLeaf Courses by Subject allow you to automatically pull course descriptions from the catalog to your page. Choose either the Manual List to choose specific courses, or the Courses by Subject to list all.
Code UNIV 110 not found (or empty).
Embed Video - Basic
Embed a video using basic styles from your video source. Add the video by selecting the Insert/Edit Video icon in the editor. Always provide closed captions.
Shorts
Vertical videos (a.k.a. shorts) should be placed in the basic video snippet. YouTube shorts can be placed into the basic video snippet. Vimeo requires an extra step to ensure shorts display vertically.
Vertical Vimeo Videos
Follow these instruction to ensure your shorts videos display vertically.
- Select the Video: Basic snippet
- Select Insert/Edit Media button
- Paste in YouTube or Vimeo link
- Right click on the gray 'embed video-basic' header of the snippet
- Select 'table properties'
- Add the following text to the Custom Class field video-vertical. Full field should read ou-snippet-featured-media-video-vertical
- Save and publish
Embed Video - Styled
Embed a YouTube or Vimeo video with UND styles, allowing editor to choose the thumbnail, UND play button and video that opens and plays in a lightbox. Add the video by pasting in the address bar URL of the video (not the embed URL). Recommended image size is 1024 px by 576 px, with 72 dpi resolution.
This video embed option will load faster than the Embed Video - Basic option. This is because the video is not added to the page until the user clicks the thumbnail option. If you have multiple videos on a page, please use this option.
When selecting a URL, please use the "watch" version of a YouTube video. The "watch" URL is going to be the URL that appears in the address bar at the top of your web browser when viewing the video on YouTube. A "watch" URL looks like this: https://www.youtube.com/watch?v=[video id here]. Do not use "share" URLs which start with https://youtu.be.
Always provide closed captions.
Events Listing
Automatically pull in events from UND calender. Contact Web Team to assist setting up snippet widget code.
Events
more EventsFeature
Link style with options for display (color, photo, no photo or callout line).
Image Styling
Style your image with alignment (right or left), optional caption and white space. Images can vary in size. The recommend max width and height is 400 px.
News Blocks
Manually curate list of news with links and images. Each block must link to an individual news item.
People Listing
There are three snippet options to list people.
- People Listing, Auto by Dept - Create a people list by department. Employee data is pulled from PeopleSoft and
HR. See the Department List to view the exact department names to be used. Listing will automatically update
as employees are changed in PeopleSoft and as they update their own profiles.
*This snippet was previously labeled "People Listing, Auto from Directory." - People Listing, Auto by IDM - Create a people list by providing a list of IDMs, i.e. john.doe, jane.doe. Employee data is pulled from PeopleSoft and HR. Data for each individual in the list will be automatically updated as employees are changed in PeopleSoft and as they update their own profiles. Lists are manually curated.
- People Listing, Manual - Manually curate your people list. Feel free to customize the information in each cell, but do not modify the transformation table (delete table columns or modify column names) as this makes improvements to the table difficult and/or may require the list to be rebuilt.
- firstname.lastname@UND.edu
- 701.777.3000
-
2784 Airport Dr Stop 9051
Grand Forks, ND 58202-9051
- firstname.lastname@UND.edu
- 701.777.3000
-
2784 Airport Dr Stop 9051
Grand Forks, ND 58202-9051
RSS Feed
Add a news or blog feed through RSS. Blogs are a common RSS sources. Items can be displayed as list or card format. Photo, date, time and description can be turned on or off.
RSS Feed content is cached once a the page is visited and will be refreshed every 30-60min (so you may not see the latest post instantly).
Snapshot
The snapshot snippet inserts a feature to highlight programs, courses, events, etc. Add/delete rows as needed.
- Program type:
- Full-time or part-time
- Format:
- On-campus or online
- EST. time to complete:
- 2 years
- Credit hours:
- 30 (Thesis Option) or 32 (Non-Thesis Option)
Stats
Animated on scroll, call out certain numbers that can add emphasis to your page.
Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget
Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget
Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget
Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget
Table
Use tables to display data only, never to arrange content. Other snippets are available to organize content like columns and the snapshot.
The table snippet has both horizontal and vertical heading options. Each table column and row must be defined with a heading to tell the reader what the data represents.
Column Title 1 | Column Title 2 | Column Title 3 |
---|---|---|
Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
Row Data A | Row 1 Column 2 | Row 1 Column 3 |
---|---|---|
Row Data A | Row 2 Column 2 | Row 2 Column 3 |
Row Data A | Row 2 Column 2 | Row 2 Column 3 |