- This feature aligns with the Public Affairs branding guidelines.
- Due to color contrast considerations, a smaller number of Berkeley Brand colors are available for these Promo widgets (when compared to the colors available for Hero Widgets, Color Bands, and Photo Thumbnails).
- Large (high resolution) images may cause performance issues and could possibly cause other site errors. If you are uploading your own photos to use with Promo Blocks with Images, try to only upload photos that have a file size of 1MB or smaller.
- For photo/image best practices, see Image Shapes and Sizes.
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.
Promo Block
Promo blocks feature 1-2 lines of text as described above on top of approved brand colors and tessellations.
Promo Blocks can be used on your home page, and any other pages where you can add widgets (Content Pages, Landing Pages, News items).
To add a Promo Block, click "Customize this Page," click the plus sign in the region where you'd like to add the photo thumbnail, then select "Berkeley Components."
Then, click "Add" for "Promo Block."
From here, configure the Promo Block. Select a color, add the heading text (required), add one line of secondary text (optional), add a link to accompany the promo block (optional; if adding an internal link, make it a relative link).
Promo Block with Image
Promo blocks with Images feature 1-2 lines of text as described above on top of approved brand colors with an additional photo on top.
Promo Blocks with Images can be used on your home page, and any other pages where you can add widgets (Content Pages, Landing Pages, News items).
NOTE: There are two shape options available for the image in a Promo with Image: Square and Rectangle. When uploading a new photo or choosing an existing one to use with your Promo with Image, the photo may be cropped to fit the appropriate aspect ratio of these shapes. For more information and tips, see Image Shapes and Sizes.
To add a Promo Block with Image, click "Customize this Page," click the plus sign in the region where you'd like to add the photo thumbnail, then select "Berkeley Components."
Then, click "Add" for "Promo Block with Image."
From here, configure the Promo Block with Image. Browse to select a photo (choose an existing photo from your photo library, or upload a new photo), choose either "Square" or "Rectangle," choose a Berkeley Brand color, add the heading text (required), add one line of secondary text (optional), add a link to accompany the promo (optional).
