Skip to main content
University of North Dakota
University of North Dakota
    • Email
    • Employee Self-Service
    • Finance (PeopleSoft)
    • Campus Connection
    • Flex Spending
    • Hawk Central
    • Faculty Success
  • Calendar
  • Directory
  • Scope of this search:
Campus Services
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Council for Women+
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts Accounting
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
    • Accounting Services-Controller
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
University of North Dakota
  • Employee Resources
    • Job Openings
    • Benefits
    • Equal Opportunity
    • Staff Senate
    • TTaDA (Professional Development)
    • UCLC (Childcare)
    • University Council for Women+
    • University Senate
    • Work Well (Employee Wellness)
  • Financial Services
    • Shared Service Center
    • Grants & Contracts Accounting
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
    • Accounting Services-Controller
  • Operations
    • Facilities Management
    • Parking & Transportation
    • Policy Office
    • Records Management
    • Safety
  • Communication Services
    • Brand and Identity
    • Campus Postal Services
    • Duplicating
    • Marketing & Communications
    • Telecommunications
    • University Information Technology
    • Web Support
Scope of this search:
Scope of this search:
  • Home
  • Campus Services & Resources
  • Web Support
  • Snippets
Skip Section Navigation
  • Web Support
  • Directory Instructions
  • Web Policy and Guidelines Show/hide children
    • Service Level Change Request
  • Web Content Standards Show/hide children
    • Accordions/Tabs
    • Alerts
    • Analytics
    • Assets and Forms
    • Content Container
    • Images
    • Resource Finder
    • Snippets
  • Blogs & E-Newsletters
  • Events Calendar
  • Digital Signs

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. 

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.

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 Chem 101 not found (or empty).

Code Chem 110 not found (or empty).

Code Chem 115 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.

Vertical YouTube Videos

  1. Use Embed Video - Basic snippet.
  2. Get the embed code. Right click on the shorts video and select <> Copy Embed Code from the menu.
  3. Modify embed code. Change the /embed/ part of the iframe URL to /shorts/. 
  4. Add the video embed code to the snippet by selecting the Insert/Edit Media icon in the editor. Be sure to select Embed tab from left hand side.
  5. Change video width to 200 and save.

Vertical Vimeo Videos

Follow these instruction to ensure your shorts videos display vertically.

  1. Select the Emebd Video - Basic snippet. 
  2. Select Insert/Edit Media button
  3. Paste in Vimeo link
  4. Right click on the grey 'embed video-basic' snippet header 
  5. Select 'table properties'
  6. Add the following text to the Custom Class field video-vertical. Full field should read ou-snippet-featured-media-video-vertical
  7. 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.

placeholder Play media

Events Listing

Automatically pull in events from UND calender. Contact Web Team to assist setting up snippet widget code.

Events

more Events

Feature

Link style with options for display (color, photo, no photo or callout line). 

und students in classroom
Gray With Image

Limit the amount of text in this area. Too much text will cut off the link on some devices.

Button Link
Black No Image

Limit the amount of text in this area. Too much text will cut off the link on some devices.

Button Link
Gray No Image

Limit the amount of text in this area. Too much text will cut off the link on some devices.

Button Link

twamley hall in summer

This is a caption. Users are more likely to stop and read your caption.

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.

placeholder

Prospective Medical Students 1

placeholder

Prospective Medical Students 2

placeholder

Prospective Medical Students 3

placeholder

Prospective Medical Students 4

People Listing

There are three snippet options to list people.

  1. 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."
  2. 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.
  3. 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.  
No Photo
FirstName LastName
Department Name
  • firstname.lastname@UND.edu
  • 701.777.3000
  • 2784 Airport Dr Stop 9051
    Grand Forks, ND 58202-9051

No Photo
FirstName LastName
Department Name
  • 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).

A year of milestones for national scholarships at UND
UND celebrates exceptional number of students honored with national scholarships
6/17/2025
5:48PM
UND alum brings Shakespeare to the prairie
Curt Tofteland, founder of Shakespeare Behind Bars, directs North Dakota Shakespeare Company’s ‘As You Like It’ in Grand Forks
6/17/2025
4:59PM
‘I loved every day as a physician’
UND medical school Class of 1976 grads reflect on the massive shifts in medical education, clinical practice over past 50 years
6/17/2025
4:58PM
VIDEO: What Minnesota students really think about UND
Five current UND students who hail from Minnesota describe why they chose to become Fighting Hawks
6/17/2025
4:58PM
A year of milestones for national scholarships at UND
UND celebrates exceptional number of students honored with national scholarships
6/17/2025
5:48PM
UND alum brings Shakespeare to the prairie
Curt Tofteland, founder of Shakespeare Behind Bars, directs North Dakota Shakespeare Company’s ‘As You Like It’ in Grand Forks
6/17/2025
4:59PM
‘I loved every day as a physician’
UND medical school Class of 1976 grads reflect on the massive shifts in medical education, clinical practice over past 50 years
6/17/2025
4:58PM
VIDEO: What Minnesota students really think about UND
Five current UND students who hail from Minnesota describe why they chose to become Fighting Hawks
6/17/2025
4:58PM

Snapshot

The snapshot snippet inserts a feature to highlight programs, courses, events, etc. Add/delete rows as needed.

Program Title 
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. Type an L after the symbol to align it to the left of the number.

75%

Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget

2k+

Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget

12:1

Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget

$50

Lorem ipsum dolor sit amet, consectetur adipi scing elit. In nulla metus, vulputate placerat lorem eget

Table

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.

Horizontal Heading Table

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

Vertical Heading Table

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

Row and Column Headings in Tables

Some tables require both row and column headings to meet accessibility standards. For example, the B.A. vs. B.S. in Psychology table uses a horizontal table snippet with headings applied to each row.

How to Manually Apply Heading Structures to Tables

To ensure accessibility, follow these steps to manually apply heading structures to a table:

  1. Choose either a horizontal or vertical heading table snippet.
  2. For each cell that should be a heading:
    • Place your cursor in the cell.
    • Select Cell > Cell Properties.
    • Under Cell type, select Header cell.
    • Click Save.

Table Best Practices

Tables should be used only for data or information that requires organization with rows and columns, not for layout or lists. 

To ensure we’re meeting required WGAG 2.1 Level AA accessibility standards and improve the user experience on mobile devices, follow these best practices when using the table snippet:

  • Consider more accessible ways to present information. Tables are difficult to read on mobile devices and using them to layout content exacerbates this problem. Keep text minimal. For content organization, use other CMS snippets like columns or snapshots.
  • Use tables for data. Tables are an effective way of presenting data. Tables should be used to present tabular data or compare items, never for content layout.
  • Ensure each data point is associated with the correct row and column header. Only use tables when presenting rows and columns of related information. Each data point must be clearly tied to a row and/or column header. If your data requires more than one header row or column, split the table into smaller, simpler tables for better clarity and accessibility.
  • Avoid merged or split cells. Although visually acceptable, merged or split cells confuse screen readers. Stick to standard cells to maintain a logical and clear reading order.
  • Do not leave cells empty. Empty cells confuse users and screen readers. If no data is available for a cell, use "NA" or a similar placeholder text. Avoid symbols or punctuation (like dashes) because screen readers may skip them.
  • Keep tables as simple and small as possible. All users, both with and without a screen reader, or more likely to struggle with a table that is too large and contains too much information.
  • Do not bold text within a table to create sections. Creating sections within a table by bolding text confuses screen readers. Assistive technologies rely on the structure and flow of a table to present information accurately. Instead of bolding to divide sections, use separate tables.
  • Always introduce tables with a heading. It is important to precede tables with a heading (H2, H3 etc..) that describes the table. This helps users understand the context of the table before interacting with it.
  • Tables can be used for limited text with defined rows and columns. Use tables for content like schedules, product feature lists or timelines where row and column structure is essential for clarity. However, bulleted lists and standard headings/paragraph page structure should be considered first for better viewability on a mobile phone.

Sidebar Feature

und fighting hawk walking in parade
Featured Content Headline

Phasellus orci justo, cursus id tincidunt vitae, egestas id risus. Nam tempor diam id mi placerat tristique et at lacus. Donec id maximus dolor, ut sodales justo.

Button Link


Sidebar Blockquote

There is an old saying that things don’t happen they are made to happen.President John F. KennedyUND Fieldhouse
September 25, 1963

Help Ticket

We use cookies on this site to enhance your user experience.

By clicking any link on this page you are giving your consent for us to set cookies, Privacy Information.

UND.info@UND.edu  |  701.777.3000
  • YouTube
  • Instagram
  • Facebook
  • Twitter
  • LinkedIn
  • Campus Map
  • Employment
  • Vector Solutions Training
  • UND Today
  • U Letter
  • Campus Safety (SafeUND)
University of North Dakota

© 2025 University of North Dakota - Grand Forks, ND - Member of ND University System

  • Accessibility & Website Feedback
  • Terms of Use & Privacy
  • Notice of Nondiscrimination
  • Student Disclosure Information
  • Title IX
©