About Berkeley Brand widgets
The Berkeley Brand widget set enables you to create and feature content such as images, media, text, and links using built-in style options for Berkeley Brand colors and text. Figure 1, below, provides an example of the widget selection screen with a preview of the Quote block widget.
Add and configure Berkeley Brand widgets
Berkeley Brand widgets are located under the "Berkeley Brand" category on the selection screen (see Figure 1, above) when adding a new widget to a page.
Each widget includes several required and optional fields depending on the type of content, such as images, text, or links. A range of Berkeley Brand colors is available for each widget, determined by factors like color contrast requirements.
See Figure 2, below, for an example of the configuration screen for a Photo thumbnail widget.
Image styles
Built-in image styles for Berkeley Brand widgets require a minimum size of 675x450 pixels and utilize the following aspect ratios:
- Square: 1:1
- Landscape (rectangle): 1.5:1
Use these minimum sizes and aspect ratios as a guide in order to ensure a consistent look and feel when using images with the Berkeley Brand widgets. You may need to crop or adjust photos using an external tool before uploading if the original versions vary in size or resolution.
Widget examples
Expand the individual areas below to find descriptions and examples of Berkeley Brand widgets:
Gallery inline
The Gallery inline widget is an image carousel that displays a collection of images alongside text and links, including pager buttons for visitor navigation. This widget is ideal for featuring a small set of "call to action" items within a large page region.
The widget features an image on the right and a colored block on the left containing heading text, optional secondary text, and an optional link displayed as a "Learn more" button. You can choose either a light (Gray Light) or dark (Berkeley Blue) color scheme for the block area.
Recommendation: For optimal display, use this widget in a wide page section, such as a 1-column layout or a 75% width column in a 2-column layout. For narrower regions, consider using the Gallery lightbox widget instead.
See Figures 3 and 4, below, for examples of the Gallery inline widget using both Light and Dark color schemes:
Gallery lightbox
The Gallery lightbox widget is an image carousel that opens in a separate modal window. This widget is suitable for any page region and is effective for featuring larger sets of images.
This widget displays a photo with a thin color band at the bottom and a lightbox icon. When selected, it opens a modal window showing the photo on the right and a light color block on the left with a title, description, and navigation buttons. Color options include Berkeley Blue, California Gold, and various dark or medium shades of Rose, Purple, Green, and Blue.
See Figures 5 and 6, below, for examples of the displayed widget and the open lightbox window with the carousel.
Heading
The Heading widget adds a single heading 2 to a page. It can be styled as "Plain (Blue on white)" using the default large Blue Medium font, or as a "color band" with a Berkeley Brand background color and large white text.
Recommendation: Use this widget mindfully to maintain proper heading structure and accessibility. It is best suited for placing heading 2 text immediately before other widgets. Alternatively, the Text widget (found under Miscellaneous) offers full WYSIWYG editing and media embedding for more complex content needs.
See Figures 7 and 8, below, for examples of the Heading widget configuration screen and a Heading widget on a Custom page.
Photo thumbnail
The Photo thumbnail widget displays a landscape or square image with a title and a thin color band at the bottom (available in various Berkeley Brand colors). These widgets are designed to link to internal site pages or external URLs.
See Figure 9, below, for an example of Photo Thumbnail widgets on a Custom page (and see Figure 2, above, for a Photo thumbnail configuration screen example).
Photo thumbnail lightbox
Similar to the Gallery lightbox, the Photo thumbnail lightbox widget features a thumbnail that opens a modal window containing a single photo and a description field. The thumbnail includes a thin color band at the bottom with multiple Berkeley Brand color options.
See Figures 10 and 11, below, for examples of the displayed widget and the open lightbox window.
Promo block / Promo block with image
The Promo block widgets display a heading and optional secondary text, with or without a link. The text can be styled as white on a colored background or black on a white background ("Plain").
The Promo with image widget includes an image above the text and background. The image will display in either the landscape (rectangle) or square styles.
See Figures 12 and 13, below, for examples of the Promo block configuration screen and a Promo block widget on a Custom page.
Quote block
The Quote block widget displays a quote with its attribution. The text can be white on a colored background or "inverse," featuring colored text on a white background.
See Figures 14 and 15, below, for examples of the Quote block widget in the regular and inverse color schemes.
Thumbnail list
The Thumbnail list widget displays thumbnail-sized images (large and small size options) to the left of heading text, with optional secondary text below. Headings can be linked to internal or external content.
This widget has additional configuration options:
- drag-and-drop interface to arrange the list of items in the widget (Figure 17);
- “Remove Thumbnail item” button to remove individual items from the list (Figure 17);
- “Add Thumbnail item” button at the bottom to add more items to the list (Figure 18).
See Figure 16, below, for an example of a Thumbnail list widget, and Figures 17 and 18 for examples of the Thumbnail list configuration screen.
Video lightbox
The Video lightbox widget functions similarly to the Photo thumbnail lightbox, but opens a modal window with an embedded YouTube or Vimeo video and a description. The thumbnail displays a thin color band at the bottom with various Berkeley Brand color options.
See Figure 19, below, for an example of a Video lightbox widget.
