UC Santa Barbara Graphic Identity

Unified web design reinforces our graphic identity and contributes to a friendlier user experience.


The UC Santa Barbara utility bar offers a simple and effective way to connect our family of campus websites. It reinforces our graphic identity and lets website visitors know where they are at all times. If you choose to feature the utility bar on your website, no content or padding should appear above it. The utility bar should only be used in the given color combination. The search function can be adapted to search your local site. If you have questions about implementation, email web.team@ia.ucsb.edu.

UCSB Web Utility Bar sample

Utility Bar Demo


What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

├── _/
│   ├── components/
│   │   ├── js/(pre-minified js)
│   │   ├── sass/(sass files)
│   ├── css/
│   │   ├── main.css (compiled & minified css)
│   │   ├── ie-8.css (compiled & minified css)
│   ├── js/
│   │   └── main.js (compiled & minified js)
├── images/
│   ├── ucsb-wordmark, search icon, etc
├── utility-bar-nosearch.html
└── utility-bar.html

The utility bar is responsive. Each breakpoint can be customized to your site's needs.

/* Extra small devices (phones, less than 480px) */
/* No media query since this is the default - mobile first design */

/* Large phone (480px and up) */
$largephone: 480px;

/* Small devices (tablets, 768px and up) */
$tablet: 768px;

/* Medium devices (desktops, 992px and up) */
$desktop: 992px;

/* Large devices (large desktops, 1200px and up) */
$largedesktop: 1200px;

You can integrate your site search using the utility bar search box. To better accommodate custom searches, you can specify the search box's placeholder text. If your site doesn't have a search mechanism, you can create a search engine through Google Custom Search.

* The search box is optional for your website. You may incorporate the UCSB utility bar without the search box.

UCSB Web Utility Bar without search sample

Utility Bar Without Search Demo

The utility bar may not be edited or altered in any way beyond the options presented when embedding.

College of Letter and Science website example College of Letter and Science mobile example
UCSB favicon In need of a favicon for your website? Email web.team@ia.ucsb.edu for the URL to the favicon used on ucsb.edu.