Branded Components

Photo Thumbnail with Zoom

The Photo Thumbnail with Zoom allows Site Builders to show a photo in widget, and then when a user clicks on the widget, a larger zoom (modal) version of the photo pops up. The Photo Thumbnail with Zoom features a line of text (a title) to accompany the photo, with the option to include a photo credit and caption as well.

Campus Calendar widget

The Campus Calendar widget enables you to embed a short list of events from the Campus Calendar on your pages.

Hero Widget

Hero image layouts allow site builders to add full-width images with text (and optional videos and links) across the top of your home page or landing pages. The styles and layouts match the new design of the Berkeley homepage and News website.

Promo Blocks

The promo block widgets feature 1-2 lines of text (primary heading text and an optional secondary line of paragraph text) on top of Public Affairs-approved background colors. There are two types of promo blocks: Promo Block, and Promo Block with Image.

Photo Thumbnails

Photo thumbnails allow Site Builders to add a widget containing a photo with a color band (all Berkeley Brand colors are available) added to the bottom of the photo. These Photo Thumbnails are meant to link to either internal or external content.

Thumbnail List

A Thumbnail List allows Site Builders to feature one or more "thumbnail"-sized photos with accompanying title text (which is linked to either internal or external content), with the option to add secondary text as well.

Quote Block

The Quote block features a line for a quote, as well as a line for the "attribution" (author/source of the quote), on top of Public Affairs-approved background colors.

Video Thumbnail with Modal

The Video Thumbnail with Modal allows Site Builders to show a photo in a widget that links to a video, and then when a user clicks on the widget, a larger zoom (modal) of the video player pops up to show the embedded video. Just like the Add Video widget, only YouTube and Vimeo videos can be used. The photo used for the widget can be a still from the video, or a related image.

Color Bands (Full-Width)

Full-width color bands allow site builders to add a band of color with text to the top of your home page or Landing pages. The styles and layouts match the design of the Berkeley homepage.

Berkeley Brand (Public Affairs)

The Open Berkeley theme (design) aligns with the Public Affairs brand materials and guidelines. There are a few settings available that specifically pertain to the Public Affairs branding guidelines.