Highlight components

Highlight components are designed to give small content items more visibility on your page. When a user is scrolling down the page, highlights will draw attention to the eye and provide a variety of visual elements on the page.

There are two ways to add content to a highlight component. In the Quote, Call to Action and Contact components, you add content directly into the component fields. For the Directory and News and Event highlights, you can select to populate the component with content created as a custom post type as well as decide what displays to a visitor based on filtering by "most recent," "curated" or a particular category/taxonomy.

This is a Highlight Quote, text limit is 60-66 words. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur pellentesque turpis sit amet faucibus. Nullam convallis dignissim tincidunt. Praesent at ultrices odio, suscipit aliquam massa. Pellentesque feugiat facilisis congue. Suspendisse posuere tristique leo, vel tincidunt sem placerat eu. Suspendisse at dapibus ligula. Donec venenatis nibh quam, et bibendum nunc sagittis at. Suspendisse non rutrum.

Author Name  |  Author description here

Highlight Call to Action

This type of highlight component has a required title, text limit is 75-88 words depending on title length. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur pellentesque turpis sit amet faucibus. Nullam convallis dignissim tincidunt. Praesent at ultrices odio, suscipit aliquam massa. Pellentesque feugiat facilisis congue. Suspendisse posuere tristique leo, vel tincidunt sem placerat eu. Suspendisse at dapibus ligula. Donec venenatis nibh quam, et bibendum nunc sagittis at. Suspendisse non rutrum felis. Morbi libero libero, ultricies.

Button link

Highlight Contact (with map or image)

601 S. Morgan St., UH 1308, (MC 388), Chicago, Illinois 60607

Highlight Directory (List Style)

Highlight News (List Style)

news image example

News example 2

Mauris augue felis, hendrerit feugiat consectetur ac, aliquet vel magna. Nulla et purus mauris.

sample news image

News example 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae urna rutrum, ornare lectus eu, tempus tellus. Donec eget condimentum felis. Donec luctus varius semper. Vestibulum congue, massa eu vehicula egestas, ante leo…

Highlight News (Two Column List Style)

Highlight Events (Single Column style)

Highlight Events (Two Column Style)

Highlight Events (Tile Style)

Highlight News & Events (recent, category or curated)

Calendar Embed Component

Within RED you can embed both Google Calendars as well as Outlook Calendars onto pages of your website.  This is done through the Calendar Embed Component, which is currently ONLY available on Default Template pages.

After adding a Calendar Embed Component, you will be asked to include a title (which can be hidden), as well as which type of calendar (Google or Outlook) you will be pulling to that specific page.  After selecting the third party calendar you will be using, you will paste the URL path into the final datafield of the embed component.  This URL path, should NOT include the domain name (i.e. https://calendar.google.com/) but should include the ending of the URL (see the emboldened part of this URL for what should be included — https://calendar.google.com/calendar/embed?src=en.usa%23holiday@group.v.calendar.google.com).

Steps to access your Google Calendars embed URL:

  1. Sign into your Google account and load your default calendar view.
  2. Click the gear icon in the upper right and select “Settings.”
  3. In the left sidebar under “Settings for my calendars,” select the calendar you wish to embed.
  4. A menu should appear below in the sidebar. Select “Access permissions.”
  5. Make sure the “Make available to public” option is selected.
  6. In the left sidebar, select “Integrate calendar.”
  7. Select the “Make available to public” on the left.
  8. Select appropriate access permissions in the dropdown on the right.
  9. Click “Get Shareable Link” and copy the link to your clipboard.
  10. Copy the link under “Public URL to this calendar.

Steps to access your Outlook Calendar embed URL:

  1. In Microsoft Outlook, go to Calendar > Publish Online
  2. Select “Publish This Calendar” or “Configure This Published Calendar.”
  3. The web version of MS Outlook will now open in your browser. Sign in with your UIC netID and password.
  4. Select the appropriate calendar and permissions from the two dropdown menus.
  5. Click “Save.” NOTE: saving immediately changes the corresponding urls, so you must do this before proceeding to the next step.
  6. Right-click the “HTML” url and select “copy.”
Below you will see an example of the Google Calendar embed component in action.

Calendar Embed Example