Skip to main content
University of North Dakota
University of North Dakota
    • Email
    • Employee Self-Service (HRMS)
    • Finance (PeopleSoft)
    • Campus Connection
    • Flex Spending
    • Starfish
    • Faculty Success (formerly Digital Measures)
  • 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
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • 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
    • Procurement & Payment Services
    • Resource Planning & Allocation
    • Treasury
  • 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
  • CMS Support Show/hide children
    • Accordions/Tabs
    • Alerts
    • Analytics
    • Assets and Forms
    • Images
    • Snippets
  • Web Elements & Styles
  • Content Standards
  • Blogs & E-Newsletters
  • Events Calendar
  • Digital Signs
  •  

Snippets

Snippets are pre-formatted widgets that you can drop onto your page and populate with your own content.

Select a snippet to see how it functions.

  • 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 accordion, they may ignore 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.

UNIV 110. First Year Seminar. 3 Credits.

This seminar course is specifically meant to help first-year students make a successful transition to college, and has been designed to engage students in the academic life of the university through the study of a topic ot theme. To accomplish these goals, students in this course will consider and practice being reflective about their own learning, being an active and engaged learner, and studying effectively. Only students in their first year at UND may register for this course. Prerequisite: Only students in their first year at UND may register for this course. On demand.

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.

Embed Video - Styled

Embed a YouTube or Vimeo video with UND styles, allowing editor to choose the thumbmail, 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.

Description 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). 

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

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.

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

News Blocks

Manually curate list of news with links and images. Each block must link to an individual news item.

Prospective Medical Students 1

Prospective Medical Students 2

Prospective Medical Students 3

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 modifiy 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.

Florence Klingensmith: A pioneer in women’s aviation history
2023 Air Race Classic, which originates in Grand Forks this year, traces roots back to early days of aerial racing
3/23/2023
6:45PM
The next 50 years
UND’s first-of-its-kind Indians Into Medicine program celebrates half-century of cultivating Indigenous health providers
3/23/2023
6:44PM
20 years on, Bush’s promise of democracy in Iraq falls short
Former president’s vision ‘has not come to pass,’ UND’s Brian Urlacher writes in The Conversation
3/23/2023
6:41PM
Link building connects, improves access to O’Kelly and Gillette halls
New structure provides covered passage between, ADA-compliant access to key campus buildings 
3/23/2023
6:41PM
Florence Klingensmith: A pioneer in women’s aviation history
2023 Air Race Classic, which originates in Grand Forks this year, traces roots back to early days of aerial racing
3/23/2023
6:45PM
The next 50 years
UND’s first-of-its-kind Indians Into Medicine program celebrates half-century of cultivating Indigenous health providers
3/23/2023
6:44PM
20 years on, Bush’s promise of democracy in Iraq falls short
Former president’s vision ‘has not come to pass,’ UND’s Brian Urlacher writes in The Conversation
3/23/2023
6:41PM
Link building connects, improves access to O’Kelly and Gillette halls
New structure provides covered passage between, ADA-compliant access to key campus buildings 
3/23/2023
6:41PM

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.

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

Use the table snippet to show data in a mobile-friendly view. The table snippet has both horizontal and vertical heading options. Do on use tables to format images and text; use the column snippet instead.

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

Sidebar Feature

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
    • TikTok
    • Twitter
    • LinkedIn
    • Campus Map
    • Employment
    • Vector Solutions Training
    • UND Today
    • U Letter
    • Report Safety Concern
    University of North Dakota

    © 2023 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
    ©