UVM Drupal Web Guide

COVID-19 Graphic Resources

We have iconography to help you communicate about remote learning. We've worked out some design patterns for how to integrate these icons into your pages.

Please follow the examples provided so our site is consistent. DO NOT use all of these examples together.

We are providing the icons in two web-ready formats:

SVG
Use this format first if Drupal will allow you to upload it. It maintains crispness no matter the display.
PNG
This is your alternate option if Drupal does not allow you to use an SVG (that happens in certain template contexts

You can download these icons in our Photoshelter gallery, or scroll down to the bottom of this page.

You can have a larger icon like this SVG icon, scaled to 120x120 with a style of "imageLeft" selected so the text wraps to the right of it. This works well if you want to have some introductory content or a pull-quote call out about remote learning.

Laptop icon This icon is also available in our brand colors. Scale it to 120x120 with a style of "imageLeft" selected so the text wraps to the right of it.

Faculty Instagram teaser images for 2-column content template

We made a set of images to support the faculty videos on Instagram. They are 535x267 and are intended for use with the "2-column content template" for the top image area. You can download the entire set or scroll down to the accordion at the bottom of this page to see previews of these.

This is a 225x225 PNG icon image

Infoband images can be PNG, JPEG or GIF.

32x32 outline laptop icon

Click on the icon to download or download here. (.zip)

32x32 solid laptop icon

Click on the icon to download, or download here.(.zip)

Solid Icon in SVG format

SVG icons are preferred whenever possible because they can be scaled without degrading the content. The example provided with the pull quote to the right of the icon is an instance where the SVG file format can be used.

Important! Set the height and width to 120x120 on upload.

Download gray icon (.zip)

Download green icon (.zip)

Laptop icon for use in the Info-band Slider

Download by clicking on the icon, or download here. (.zip)

Instagram teasers for the right sidebar

We made some teasers for the right sidebar linking to the Instagram stories about faculty being available to students. See the sample on this page in the right sidebar.

Download the Instagram teasers.
You can download all of them in a zip archive.

Tip: To get the placed image to scale correctly in the right sidebar, make sure you remove the width and height information when selecting the image with the media upload tool. If you remove the width and height, Drupal will automatically scale the image to fit in the sidebar while maintaining the correct aspect ratio.

The source code for the teaser image and call to action button that is on the right sidebar on this page, looks like this:

<p><img alt="instagram teaser for faculty" src="/sites/default/files/Office-of-Emergency-Management/instagram-teasers/emily_bernard_insta_745x1411.jpg"></p>
<p class="button-green"><a href="https://www.instagram.com/stories/highlights/17901009076443225/">UVM faculty are on Instagram</a></p>
<p><em>note: Instagram login required.</em></p>

Note how the "width" and "height" dimensions have been removed from the source code.

instagram teaser for faculty

Faculty Instagram Images 535x267

You can download the entire set here.

Let us support you.

UVM is open and ready for remote instruction. We want to support you in your work. Please contact us by phone or email instead of stopping by in order to keep everyone healthy. University COVID-19 updates.

laptop icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.