CINXE.COM
UCSF Web Patterns Library | UCSF Websites
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" version="XHTML+RDFa 1.0" dir="ltr" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"> <head profile="http://www.w3.org/1999/xhtml/vocab"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Generator" content="Drupal 7 (http://drupal.org)" /> <link rel="canonical" href="/node/256" /> <link rel="shortlink" href="/node/256" /> <link rel="shortcut icon" href="https://websites.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta property="og:image" content="https://websites.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="og:image:width" content="940" /> <meta property="twitter:image" content="https://websites.ucsf.edu/profiles/ucsf_b1gfoot/themes/ucsf_b1gfoot_theme/img/img-metatag.jpg" /> <meta property="twitter:card" content="summary" /> <meta property="og:site_name" content="UCSF Websites" /> <meta property="twitter:url" content="https://websites.ucsf.edu/node/256" /> <meta property="og:url" content="https://websites.ucsf.edu/node/256" /> <meta property="twitter:title" content="UCSF Web Patterns Library | UCSF Websites" /> <meta property="og:title" content="UCSF Web Patterns Library" /> <title>UCSF Web Patterns Library | UCSF Websites</title> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_kShW4RPmRstZ3SpIC-ZvVGNFVAi0WEMuCnI0ZkYIaFw.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_skhFl2AhilhxAlHjGa_fTNSPVanaq_LTvzbp87QV8BM.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_KtV_0W2L1RpBdKj5ObC3CRUchB_iaxUEL8n1_iqwt5o.css" media="all" /> <style type="text/css" media="all"> <!--/*--><![CDATA[/*><!--*/ .cke_toolgroup > .cke_button__quote{display:none}.cke_toolgroup > .cke_button__twocolumn{display:none}.cke_toolgroup > .cke_button__threecolumn{display:none}.cke_toolgroup > .cke_button__featuredcontent{display:none}.cke_toolgroup > .cke_button__collapseitem{display:none} /*]]>*/--> </style> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/css/hopscotch.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_0wq-oSMa1dZUDrswIs--ZE9BmEbEiCxrgJH-DEpoXrI.css" media="all" /> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU.css" media="print" /> <style type="text/css" media="all"> <!--/*--><![CDATA[/*><!--*/ h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,#header a,.ucsf-top-header a,.tabs a,fieldset legend a,legend a{text-decoration:none;border-bottom:none;box-shadow:none;}body.sidebar #main .sidebar .region-sidebar > .block-block .content{overflow:visible;}.page-node-626 #main-wrapper .region-content a,.page-node-626 .breadcrumb a{color:#0071ad;text-decoration:underline;text-decoration-skip-ink:auto;text-decoration-skip:ink;border-bottom:none;}.page-node-626 #main-wrapper .region-content a:hover,.page-node-626 .breadcrumb a:hover{text-decoration:none;border-bottom:none;}.page-node-626 #main-wrapper .region-content .bg--interactive-blue a,.page-node-626 .breadcrumb .bg--interactive-blue a,.page-node-626 #main-wrapper .region-content .bg--interactive-teal a,.page-node-626 .breadcrumb .bg--interactive-teal a{color:#fff;text-decoration:underline;border-bottom:0;box-shadow:none;text-shadow:none;}.page-node-626 #main-wrapper .region-content .bg--interactive-blue a:hover,.page-node-626 .breadcrumb .bg--interactive-blue a:hover,.page-node-626 #main-wrapper .region-content .bg--interactive-teal a:hover,.page-node-626 .breadcrumb .bg--interactive-teal a:hover{background:transparent;text-decoration:none;}.page-node-626 #main-wrapper .region-content .bg--interactive-blue a.btn--more--white,.page-node-626 .breadcrumb .bg--interactive-blue a.btn--more--white,.page-node-626 #main-wrapper .region-content .bg--interactive-teal a.btn--more--white,.page-node-626 .breadcrumb .bg--interactive-teal a.btn--more--white{border:1px solid rgba(255,255,255,0.3);}.page-node-636 #main-wrapper .region-content a,.page-node-636 .breadcrumb a{color:#000;background-color:transparent;text-decoration:none;transition:background 0.15s cubic-bezier(0.33,0.66,0.66,1);border-bottom:1px inset #007cbe;box-shadow:inset 0 -1px 0 #007cbe;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;}.page-node-636 #main-wrapper .region-content a:hover,.page-node-636 .breadcrumb a:hover{background:#e8f4fa;border-bottom:1px solid #e8f4fa;box-shadow:inset 0 -1px 0 #e8f4fa;}.page-node-636 #main-wrapper .region-content .bg--interactive-blue a,.page-node-636 .breadcrumb .bg--interactive-blue a,.page-node-636 #main-wrapper .region-content .bg--interactive-teal a,.page-node-636 .breadcrumb .bg--interactive-teal a{color:#fff;text-decoration:underline;border-bottom:0;box-shadow:none;}.page-node-636 #main-wrapper .region-content .bg--interactive-blue a:hover,.page-node-636 .breadcrumb .bg--interactive-blue a:hover,.page-node-636 #main-wrapper .region-content .bg--interactive-teal a:hover,.page-node-636 .breadcrumb .bg--interactive-teal a:hover{background:transparent;text-decoration:none;}.page-node-636 #main-wrapper .region-content .bg--interactive-blue a.btn--more--white,.page-node-636 .breadcrumb .bg--interactive-blue a.btn--more--white,.page-node-636 #main-wrapper .region-content .bg--interactive-teal a.btn--more--white,.page-node-636 .breadcrumb .bg--interactive-teal a.btn--more--white{border:1px solid rgba(255,255,255,0.3);}.page-node-676 #main-wrapper .region-content a,.page-node-676 .breadcrumb a{color:#000;background-color:transparent;text-decoration:none;transition:background 0.15s cubic-bezier(0.33,0.66,0.66,1);border-bottom:1px solid #007cbe;overflow-wrap:break-word;word-break:break-word;word-wrap:break-word;}.page-node-676 #main-wrapper .region-content a:hover,.page-node-676 .breadcrumb a:hover{background:#e8f4fa;border-bottom:1px solid #e8f4fa;}.page-node-676 #main-wrapper .region-content .bg--interactive-blue a,.page-node-676 .breadcrumb .bg--interactive-blue a,.page-node-676 #main-wrapper .region-content .bg--interactive-teal a,.page-node-676 .breadcrumb .bg--interactive-teal a{color:#fff;text-decoration:underline;border-bottom:0;box-shadow:none;}.page-node-676 #main-wrapper .region-content .bg--interactive-blue a:hover,.page-node-676 .breadcrumb .bg--interactive-blue a:hover,.page-node-676 #main-wrapper .region-content .bg--interactive-teal a:hover,.page-node-676 .breadcrumb .bg--interactive-teal a:hover{background:transparent;text-decoration:none;}.page-node-676 #main-wrapper .region-content .bg--interactive-blue a.btn--more--white,.page-node-676 .breadcrumb .bg--interactive-blue a.btn--more--white,.page-node-676 #main-wrapper .region-content .bg--interactive-teal a.btn--more--white,.page-node-676 .breadcrumb .bg--interactive-teal a.btn--more--white{border:1px solid rgba(255,255,255,0.3);}.page-node-661{font-size:18px;}.page-node-661 .breadcrumb{font-size:14px;font-weight:normal;}.page-node-661 .breadcrumb a{text-decoration:none;border-bottom:1px dashed #0071ad;padding-bottom:0;color:#0071ad;}.page-node-661 .breadcrumb a:hover{border-bottom:1px solid #0071ad;transition:none;}.page-node-661 #footer a{text-decoration:none;border-bottom:1px dashed #fff;padding-bottom:0;}.page-node-661 #footer a:hover{border-bottom:1px solid #fff;transition:none;}.page-node-661 .bg--interactive-blue a,.page-node-661 .bg--interactive-teal a{color:#fff;border-bottom:1px dashed #fff;text-decoration:none;padding-bottom:0;}.page-node-661 .bg--interactive-blue a:hover,.page-node-661 .bg--interactive-teal a:hover{border-bottom:1px solid #fff;text-decoration:none;}.page-node-661 .bg--interactive-blue a.btn--more--white,.page-node-661 .bg--interactive-teal a.btn--more--white{border:1px solid rgba(255,255,255,0.3);padding:5px 20px;}div.node-webform form.webform-client-form div.webform-component-markup p{margin-top:18px;margin-bottom:8px;}div.node-webform form.webform-client-form div.webform-component-markup ul li{position:relative;margin-left:25px;margin-bottom:8px;display:list-item;list-style-type:disc;}div.node-webform form.webform-client-form div.webform-component-markup ul{margin-bottom:20px;}.view-website-az-list .views-summary-unformatted a{display:inline-block;border:1px solid #052049;margin:2px 0px;padding:2px;font-weight:bold;color:white;background-color:#052049;width:1.5em;text-align:center;}.views-row{overflow:auto;padding:50px 0;border-bottom:1px solid #dbdbdb;}.view-content{overflow:auto;}.container{clear:both;overflow:auto;}.container div{float:left;width:150px;overflow:auto;}.container div + div{width:65%;overflow:auto;}#block-views-exp-website-az-list-page .views-exposed-form .form-text{font-size:1.2em;}#block-views-exp-website-az-list-page .views-exposed-form .views-exposed-widget .form-submit{margin-top:0px;}.item-list ul.pager{margin:50px auto;clear:both;}.page-drupal-tutorials hr{margin:1.5em 0 1.5em 0;} /*]]>*/--> </style> <link type="text/css" rel="stylesheet" href="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/css/css_MB_OJmOWZ3q8_itIvibVBCwqx5eIBtmFezuG3FGZPnE.css" media="all" /> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_Pt6OpwTd6jcHLRIjrE-eSPLWMxWDkcyYrPTIrXDSON0.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_onbE0n0cQY6KTDQtHO_E27UBymFC-RuqypZZ6Zxez-o.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_gHk2gWJ_Qw_jU2qRiUmSl7d8oly1Cx7lQFrqcp3RXcI.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_ROty9TLRT7GvgDUFw_QNzL45vlatntRp6wuC_6otqeQ.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.2.5/js/hopscotch.min.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_X29AUVcfuG5wHH9ySA6s5LgOAjmkzlakDPpSV6MBBjY.js"></script> <script type="text/javascript" src="https://www.googletagmanager.com/gtag/js?id=UA-174314-31"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments)};gtag("js", new Date());gtag("set", "developer_id.dMDhkMT", true);gtag("config", "UA-174314-31", {"groups":"default","anonymize_ip":true});gtag("config", "G-YWK55T7MSC", {"groups":"default","anonymize_ip":true}); //--><!]]> </script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- var sliderSecondary ='slider-secondary-no-image';var sliderPrimary ='slider-no-image'; //--><!]]> </script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_pBJ9BqqTImG5h6xNRUOzZ4_9dQezvjMt-I7yPp8naQY.js"></script> <script type="text/javascript" src="https://websites.ucsf.edu/sites/websites.ucsf.edu/files/js/js_QQeuJpMVaNOcbJ6HF3pJFdPsqb0L--SFT89e1HBmNhE.js"></script> <script type="text/javascript"> <!--//--><![CDATA[//><!-- jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","setHasJsCookie":0,"ajaxPageState":{"theme":"ucsf_b1gfoot_theme","theme_token":"TGRy4Mva992TLr8pqYuegyyJU6L06WXxbxeBqyFS9Bc","js":{"sites\/all\/modules\/contrib\/jquery_update\/replace\/jquery\/1.12\/jquery.min.js":1,"misc\/jquery-extend-3.4.0.js":1,"misc\/jquery-html-prefilter-3.5.0-backport.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/jquery_update\/js\/jquery_browser.js":1,"misc\/form-single-submit.js":1,"sites\/all\/modules\/contrib\/entityreference\/js\/entityreference.js":1,"profiles\/ucsf_b1gfoot\/modules\/b1gfoot\/ucsf_b1gfoot_admin_menu\/js\/ucsf_b1gfoot_admin_menu.js":1,"profiles\/ucsf_b1gfoot\/modules\/b1gfoot\/ucsf_eds_sitebuilder_profiles\/ucsf_eds_sitebuilder_profiles_tweaks.js":1,"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/hopscotch\/0.2.5\/js\/hopscotch.min.js":1,"profiles\/ucsf_b1gfoot\/modules\/b1gfoot\/y3ti_help\/js\/y3ti_help.js":1,"sites\/all\/modules\/contrib\/google_analytics\/googleanalytics.js":1,"https:\/\/www.googletagmanager.com\/gtag\/js?id=UA-174314-31":1,"0":1,"1":1,"profiles\/ucsf_b1gfoot\/modules\/b1gfoot\/ucsf_b1gfoot_sitewizard\/js\/ucsf_b1gfoot_sitewizard.js":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/js\/vendor\/slick\/slick.js":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/js\/vendor\/icheck.min.js":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/js\/build\/main.js":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/js\/vendor\/responsive-nav\/responsive-nav.min.js":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/js\/script.js":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/contrib\/simplenews\/simplenews.css":1,"modules\/comment\/comment.css":1,"sites\/all\/modules\/contrib\/date\/date_repeat_field\/date_repeat_field.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/search\/search.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/contrib\/views\/css\/views.css":1,"sites\/all\/modules\/contrib\/ckeditor\/css\/ckeditor.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"profiles\/ucsf_b1gfoot\/modules\/b1gfoot\/ucsf_b1gfoot_admin_menu\/css\/ucsf_b1gfoot_admin_menu.css":1,"profiles\/ucsf_b1gfoot\/modules\/b1gfoot\/ucsf_b1gfoot_sitewizard\/css\/ucsf_b1gfoot_sitewizard.css":1,"1":1,"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/hopscotch\/0.2.5\/css\/hopscotch.min.css":1,"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.4.0\/css\/font-awesome.min.css":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/js\/vendor\/slick\/slick.css":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/css\/screen.css":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/css\/print.css":1,"0":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/css\/colors\/primary\/primary-grey.css":1,"profiles\/ucsf_b1gfoot\/themes\/ucsf_b1gfoot_theme\/css\/colors\/secondary\/secondary-blue.css":1}},"googleanalytics":{"account":["UA-174314-31","G-YWK55T7MSC"],"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip"},"urlIsAjaxTrusted":{"\/node\/256":true}}); //--><!]]> </script> </head> <body class="html not-front not-logged-in page-node page-node- page-node-256 node-type-page slider-secondary ucsf-b1gfoot font--header--granjon slider-secondary-no-image profile--grid sidebar sidebar--right sidebar-color--white" > <div id="skip-link"> <a href="#main-content" class="element-invisible element-focusable">Skip to main content</a> </div> <div id="page-wrapper"> <div id="page"> <div class="ucsf-top-header row-full-width no-logo"> <div class="inside"> <ul class="menu"> <li class="first"><a href="http://www.ucsf.edu">University of California San Francisco</a></li> <li><a href="http://www.ucsfhealth.org/">UCSF Health</a></li> <li><a href="http://www.ucsf.edu/search" title="">Search UCSF</a></li> <li><a href="http://www.ucsf.edu/about">About UCSF</a></li> </ul> </div> </div> <div id="header" class="row-full-width"> <div class="inside clearfix"> <h1 id="site-name"> <a href="/" title="Home" rel="home"> UCSF Websites </a> </h1> <div class="region region-header"> <div id="block-search-form" class="block block-search"> <div class="content"> <form onsubmit="if(this.search_block_form.value=='Search'){ alert('Please enter a search'); return false; }" action="/node/256" method="post" id="search-block-form" accept-charset="UTF-8"><div><div class="container-inline"> <h2 class="element-invisible">Search form</h2> <div class="form-item form-type-textfield form-item-search-block-form"> <label class="element-invisible" for="edit-search-block-form--2">Search... </label> <input title="Enter the terms you wish to search for." placeholder="Search..." class="text-input fa fa-search form-text" aria-hidden="" type="text" id="edit-search-block-form--2" name="search_block_form" value="" size="40" maxlength="128" /> </div> <div class="form-actions form-wrapper" id="edit-actions"><input type="submit" id="edit-submit" name="op" value="" class="form-submit" /></div><input type="hidden" name="form_build_id" value="form-j6wiaHH_khV7kOWCdtj8zm4dRL3MvCUHvhzHHqp79Dc" /> <input type="hidden" name="form_id" value="search_block_form" /> </div> </div></form> </div> </div> <div id="block-ucsf-b1gfoot-tweaks-header-socialmedia" class="block block-ucsf-b1gfoot-tweaks"> <div class="content"> <div class="nav-social"></div> </div> </div> <div id="block-menu-block-1" class="block block-menu-block"> <div class="content"> <div class="menu-block-wrapper menu-block-1 menu-name-main-menu parent-mlid-0 menu-level-1"> <ul class="menu"><li class="first expanded active-trail menu-mlid-1966"><a href="/checklist-create-website" class="active-trail">Get Started</a><ul class="menu"><li class="first leaf menu-mlid-2036"><a href="/checklist-create-website" title="">New Website Checklist</a></li> <li class="leaf menu-mlid-1976"><a href="/quiz-do-i-need-website">Quiz: Do I Need A Website?</a></li> <li class="leaf menu-mlid-2021"><a href="/ucsf-site-builder">UCSF Site Builder</a></li> <li class="leaf has-children active-trail menu-mlid-2032"><a href="/custom-built-sites" class="active-trail">Custom-Built Sites</a></li> <li class="leaf menu-mlid-3921"><a href="/website-hosting">Website Hosting</a></li> <li class="last leaf menu-mlid-5791"><a href="/consulting-services">Consulting Services</a></li> </ul></li> <li class="expanded menu-mlid-1981"><a href="/policies-standards">Policies & Standards</a><ul class="menu"><li class="first leaf menu-mlid-2041"><a href="/policies-standards" title="">Overview & Requirements</a></li> <li class="leaf menu-mlid-4051"><a href="/policies-standards/ucsf-policy-registration-and-use-domain-names">Registration and Use of Domain Names</a></li> <li class="leaf menu-mlid-2046"><a href="/brand-standards">Brand Standards</a></li> <li class="leaf has-children menu-mlid-2051"><a href="/digital-accessibility">Digital Accessibility</a></li> <li class="last leaf menu-mlid-12426"><a href="/website-security">Website Security</a></li> </ul></li> <li class="leaf menu-mlid-1996"><a href="/showcase">Showcase</a></li> <li class="expanded menu-mlid-2256"><a href="/blog" title="">News & Events</a><ul class="menu"><li class="first leaf menu-mlid-2261"><a href="/blog" title="">News & Announcements</a></li> <li class="last leaf menu-mlid-2061"><a href="/events">Events</a></li> </ul></li> <li class="expanded menu-mlid-2001"><a href="/help">Help</a><ul class="menu"><li class="first leaf menu-mlid-13161"><a href="/training">Training</a></li> <li class="leaf menu-mlid-2016"><a href="/frequently-asked-questions">Frequently Asked Questions</a></li> <li class="leaf menu-mlid-2006"><a href="https://it.ucsf.edu/service/digital-accessibility-program" title="">Accessibility Resources</a></li> <li class="last leaf menu-mlid-9841"><a href="/drupal-tutorials" title="">Tutorials</a></li> </ul></li> <li class="last expanded menu-mlid-8591"><a href="/azlist" title="">A-Z Websites</a><ul class="menu"><li class="first leaf menu-mlid-9836"><a href="/azlist" title="">A-Z Websites List</a></li> <li class="last leaf menu-mlid-9826"><a href="/updating-z-website-list">Updating the A-Z list</a></li> </ul></li> </ul></div> </div> </div> </div> </div> </div> <div id="breadcrumb" class="row-full-width"><div class="inside"><h2 class="element-invisible">You are here</h2><div class="breadcrumb"><a href="/">Home</a> > <a href="/checklist-create-website">Get Started</a> > <a href="/custom-built-sites">Custom-Built Sites</a> > <span class="breadcrumb-page-title">UCSF Web Patterns Library</span></div></div></div> <h1 class="title" id="page-title">UCSF Web Patterns Library</h1> <div class="content-top"> </div> <div id="main-wrapper"> <div id="main" class="clearfix"> <div id="content" class="column"> <div class="inside"> <a id="main-content"></a> <div class="tabs"></div> <div class="region region-content"> <div id="block-system-main" class="block block-system"> <div class="content"> <div id="node-256" class="node node-page slider-secondary clearfix" about="/node/256" typeof="sioc:Item foaf:Document"> <span property="dc:title" content="UCSF Web Patterns Library" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span> <div class="content"> <div class="field field-name-field-body field-type-text-long field-label-hidden"><div class="field-items"><div class="field-item even"><figure class="image" style="float:right"><img alt="Examples of Web Patterns" height="294" src="/sites/websites.ucsf.edu/files/wysiwyg/examples-of-pattern-library-01.png" width="500" /> <figcaption></figcaption> </figure> <p>If you're looking to build a fully customized website or application, UCSF has an easy-to-use聽Web Patterns Library that will allow聽you to build a unique look and feel without designing common elements from scratch. Developers across the UCSF community can borrow聽and contribute聽patterns, making聽it easier to forge聽functional, beautiful聽websites or applications聽with less effort.聽</p> <h2>What Is It?</h2> <p>A pattern library houses snippets of CSS, HTML, and Javascript聽needed to build聽various web elements. They range from simple to complex,聽and聽include聽everything聽from buttons to animated聽slideshows.</p> <h2>Who Should Use It?</h2> <p>The library itself is a resource for web developers. If you are managing or overseeing a website project at UCSF, refer your design and development team to this resource.</p> <h2>Why Should I Use It?</h2> <p>There are many benefits to using the Web Pattern聽Library:</p> <p style="margin-left: 40px;"><strong>Combining efforts:聽</strong>Having a central pattern library allows multiple development teams across UCSF to work together on devising new features. If a bug needs to be fixed and one team finds a solution, that solution will apply everywhere.</p> <p style="margin-left: 40px;"><strong>Saving time and money: </strong>Designing and building new features is expensive and time-consuming. Using this library allows you to avoid "reinventing the wheel" for basic or common elements and instead focus on creating more complex, unique features that will take your custom website to the next level.</p> <p style="margin-left: 40px;"><strong>Creating unique combinations: </strong>The more patterns there are, the more possibilities. This makes UCSF feel visually unified while allowing individual sites and applications to feel distinct.</p> <p style="margin-left: 40px;"><strong>Providing a consistent user experience:</strong> When visitors enter a UCSF website, they expect a high-quality online experience that reflects a brand that they know and trust. Having the required elements and other universal patterns helps orient visitors, and lends credibility to your website.</p> <hr /> <p>聽</p> <div class="wysiwyg_twocols layout--50-50"> <div class="wysiwyg_twocols--first bg--transparent"> <h2>Getting Started</h2> <p>If you have a digital project coming up, you can take advantage of current web elements that already exist聽in the Web Patterns Library.</p> <p>To get started, developers can jump over to the Pattern Library and familiarize themselves with existing elements.</p> <p>Have additional questions? <a href="/cdn-cgi/l/email-protection#99eefcfbeafcebeff0fafcead9ecfaeaffb7fcfdeca6eaecfbf3fcfaeda4ccdacadfbcaba9cefcfbbcaba9c9f8ededfcebf7eabcaba9d5f0fbebf8ebe0bcaba9b4bcaba9c8ecfceaedf0f6f7ea">Contact IT Web Services.</a></p> <p><a class="btn--small btn--blue btn--full-width" href="http://webpatterns.ucsf.edu" target="_blank">Read the How-To Guide</a></p> </div> <div class="wysiwyg_twocols--second bg--transparent"> <h2>Contributing a Pattern</h2> <p>New patterns must undergo a three-step process before being integrated into the Web Patterns Library.</p> <ol> <li>You submit a request for a new or existing pattern you'd like added.</li> <li>The IT Web Services Team will work with you to design and develop a new pattern or make sure that your existing pattern passes accessibility and compliance requirements.</li> <li>The UCSF Brand Team will make sure it fits into our visual system and offer suggestions for updates if needed.</li> <li>If you'd like to suggest or contribute a new pattern, please submit a ticket through <a href="http://help.ucsf.edu">help.ucsf.edu</a>.</li> </ol> </div> </div> </div></div></div> </div> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="column"> <div class="sidebar_top"> <div class="region region-sidebar-top"> <div id="block-menu-block-2" class="block block-menu-block"> <h3><a href="/checklist-create-website" class="active-trail">Get Started</a></h3> <div class="content"> <div class="menu-block-wrapper menu-block-2 menu-name-main-menu parent-mlid-0 menu-level-2"> <ul class="menu"><li class="first leaf menu-mlid-2036"><a href="/checklist-create-website" title="">New Website Checklist</a></li> <li class="leaf menu-mlid-1976"><a href="/quiz-do-i-need-website">Quiz: Do I Need A Website?</a></li> <li class="leaf menu-mlid-2021"><a href="/ucsf-site-builder">UCSF Site Builder</a></li> <li class="expanded active-trail menu-mlid-2032"><a href="/custom-built-sites" class="active-trail">Custom-Built Sites</a><ul class="menu"><li class="first last collapsed active-trail active menu-mlid-4061"><a href="/node/256" class="active-trail active">UCSF Web Patterns Library</a></li> </ul></li> <li class="leaf menu-mlid-3921"><a href="/website-hosting">Website Hosting</a></li> <li class="last leaf menu-mlid-5791"><a href="/consulting-services">Consulting Services</a></li> </ul></div> </div> </div> </div> </div> <div class="sidebar"> <div class="section"> <div class="region region-sidebar"> <div id="block-fieldblock-node-page-default-field-blockref-sidebar" class="block block-fieldblock"> <div class="content"> <div class="field field-name-field-blockref-sidebar field-type-blockreference field-label-hidden"><div class="field-items"><div class="field-item even"><div id="block-block-16" class="block block-block"> <h3>Custom-built Sites</h3> <div class="content"> <p>While we offer <a href="http://websites.ucsf.edu/ucsf-site-builder">UCSF Site Builder</a> for ease of use, branded design and overall compliance, you are not required to use it. However, if you choose to develop a site independently, you will be responsible for all development costs, accessibility, data security, and overall adherence to UCSF brand standards.</p> <p>聽</p> <p>Please review our <a href="http://websites.ucsf.edu/policies-standards">Standards & Policies</a> to ensure you have full comprehension of these responsibilities.</p> <p>聽</p> <p><strong><a href="/custom-built-sites">IT offers custom web hosting for UCSF entities that need Drupal hosting.</a></strong></p> </div> </div></div></div></div> </div> </div> </div> </div> </div> </div> </div></div> <div id="footer"> <div class="section"> <div class="region region-footer"> <div id="block-block-31" class="block block-block"> <div class="content"> <p>Is there additional information on UCSF websites that would be helpful to you? Send us feedback at <a href="/cdn-cgi/l/email-protection#88ffedeafbedfafee1ebedfbc8fdebfbeea6edecfd"><span class="__cf_email__" data-cfemail="cbbcaea9b8aeb9bda2a8aeb88bbea8b8ade5aeafbe">[email protected]</span></a>.</p> </div> </div> </div> <div class="footer-bottom"> <nav aria-label="Footer Navigation" class="footer--navigation"> <ul> <li><a href="/consulting-services">Contact Us</a></li> <li><a href="https://websites.ucsf.edu/digital-accessibility">Accessibility</a></li> <li><a href="https://www.ucsf.edu/website-privacy-policy">Privacy Policy</a></li> <li><a href="https://websites.ucsf.edu/website-terms-use">Terms of Use </a></li> <li><a href="https://websites.ucsf.edu/azlist">A-Z Website List</a></li> </ul> </nav> <div class="footer--copyright"> <p>© 2024 The Regents of the University of California</p> </div> </div> </div> </div> </div> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript"> /*<![CDATA[*/ (function() { var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true; sz.src = '//siteimproveanalytics.com/js/siteanalyze_8343.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sz, s); })(); /*]]>*/ </script> </body> </html>