Branded Components

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.

Berkeley Events calendar widget

The Berkeley Events calendar widget enables you to embed a short list of events from the Berkeley Events calendar on your pages.

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.

Berkeley Brand (Public Affairs)

The Open Berkeley theme (design) aligns with the Public Affairs brand materials and guidelines.

Berkeley Brand Theme Settings

There are a few settings available that specifically pertain to the Public Affairs branding guidelines.

collapse all expand all Berkeley Wordmark (and site names that start with the word "Berkeley")

The "...

Image shapes and sizes (Berkeley Brand)

The Berkeley Brand guidelines provide standard image sizes for Brand components such as Hero, Photo Thumbnail, and Promo widgets....

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

Photo Thumbnail with Zoom

The Photo Thumbnail with Zoom allows Site Builders to display a photo in a widget, and when a site visitor selects the photo, a larger "zoom" (modal) version of the photo pops up. The Photo Thumbnail with Zoom features a title to accompany the photo with options to include a photo credit and/or description (the description field uses the limited WYSIWYG editing toolbar).

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.

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.