These are the offically supported colors for web properties of UCSF. Note they are used in "primary" and "secondary" main colors on many of the sites, although the other colors have been designed for complimentary look and feel. Future goals are to build out the suggested color combinations that ensure best practices for design and accessiblity. E.g, a light font used on a dark background.
Colors are the digital or interactive versions of the UCSF Brand master palette, and provide opportunities for greater contrast in order to meet W3C’s Web Content Accessibility Guideline (WCAG) AA level color contrast standards. Font size and other key details still need to be considered when using colored backgrounds. Visit identity.ucsf.edu for precise use cases and applications.
The fonts in the Pattern Library at the time of creation have been taken from the UCSF approved branding and supporting digital and web use. Note that some fonts require licensing to use.
Helvetica Neue Light is UCSF's primary typeface, and Granjon is secondary. Font licenses can be secured through services like myfonts.com; if you need help with this process, contact [email protected]. Information on best practices and examples of incorrect usage are available on identity.ucsf.edu.
Primary Typeface - Helvetica Neue
Helvetica Neue Light Italic
Helvetica Neue Roman
Helvetica Neue Italic
Helvetica Neue Bold
Helvetic Neue Substitute: Arial
Arial Regular
Arial Italic
Arial Bold
Arial Bold Italic
Secondary Typeface - Granjon Roman
Granjon Roman
Granjon Italic
Granjon Bold
Granjon Roman Substitute: Garamond Regular
Garamond Regular
Garamond Italic
Garamond Bold
This section contains all form elements and their accessible treatments. Future implementation requires an accessible error-handling treatment for when form elements don't pass validation.
Form elements should always have an intelligible order and proper attribution, so that a user can easily understand why and what is required of them. Forms should be tested for screen reader accessibility and responsive design.
This section contains a visible representation of the grid structure to support the site design. Singularity was chosen for the grid technology to provide a lighter framework with enough support to address all layout needs.
When developing new features, this framework should be considered so that elements can be interchanged easily.
These are headings.
Headings should be used to enhance navigation and information hierarchy. H1 should be used for page titles only, and all other titles should use H2 - H5 according to their level of importance. For visual interest and distinction, it's recommended that both serif and sans-serif are used. For instance, H1 and H2 are serif, but H3 and H4 are sans-serif. Headers should be used consistently across a site's pages to help orient users.
This section contains images used in other organisms and molecules across the site. If you create a new organism or molecule requiring a new image size, make the image here first and include it in your other code.
Images should meet UCSF Brand Guidelines, which you can review at identity.ucsf.edu. Free images for UCSF websites are available in the Brand Photography Library, accessible through MyAccess. Be careful to select images that will crop well to the chosen aspect ratio, that image file sizes aren't bigger than 1.5MB, that an image is large enough to fit the desired display size, and that alt tag information is added so that users with screen readers can understand each image's context.
This section contains stylized ordered and unordered lists. At initial development, there were only standard styles, but this section is intended to define the multiple stylized list treatments in one place.
Lists should be used to delineate a series of items. Lists help a user quickly scan a page for relevant information.
Add stylized media treatments to this area, such as embedded video. Your group may explore additional video styles and treatments for specific use cases. The additional video treatments would be added to this section for future reference.
Media should meet general guidelines for accessibility and branding, available on identity.ucsf.edu.
The tables in the section were styled based on the approach used by UCD. They are classic tables and not yet responsive. This section is intended to display approved table styling for true tabular formatted data. Leverage teasers and cards in lists or rows if you are looking for more stylized layout structures.
Tables should be used sparingly; formatting can be frustrating for end users on mobile devices if the data cannot be compressed or expressed easily at a narrow size. Tables should also be used to complement other information, and should not be the main thrust of your webpage.
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot td | tfoot td | tfoot td |
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot td | tfoot td | tfoot td |
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot td | tfoot td | tfoot td |
Most standard HTML text-like elements have been styled. Should you add additional style variants to the Pattern Library, add them here for reference and follow the structure for adding the global CSS.
Text styles should be applied universally for consistent user experience. For examples of proper and improper font usage, visit identity.ucsf.edu.
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Strong is used to indicate strong importance
This text has added emphasis
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
Abbreviation: HTML
This text is a short inline quotation
This is a citation
The mark element indicates a highlight
Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is a text linking something. Nulla vel iaculis diam. Nunc tincidunt, quam pulvinar luctus tempus, nisi diam ultricies felis, id egestas erat justo congue nisi.
Paragraph Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Large Paragraph Style
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Through development, you may need to add padding or other layout utilities to your structures. These classes provide a consistent way to apply padding and, if required in the future, can be changed globally.
Elements should sit comfortably away from one another so that a page's contents don't appear cramped or illegible.
Left Alignment
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Center Alignment
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
Right Alignment
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis.
No Space Left
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Spacing Left Small
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Spacing Left
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Space Left Large
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
One Fourth Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
One Third Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Half Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Two Thirds Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Three Fourths Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Two Fifths Width
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.
Use the animation section to contain shared client-end "animated" interactions with content used across the site. The naming "Animation" was adopted from the implementation at UCD and it seemed to fit pretty well within the UCSF component naming structure. Good candidates for this section are sliders, timelines, and other structured sectional content within the page. Note, this is not the same as programmatic list results, such as teasers or cards that are in other component sections.
Animations should be applied consistently across the site to maintain a comprehensive user experience.
This is the body of the accordion. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet.
This is the body of the accordion. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet.
This is the body of the first tab...
This is the body of the second tab
And this is the body of the third tab.
This is the body of the first tab...
This is the body of the second tab
And this is the body of the third tab.
Card layouts are commonly used in grids, even if the grid is a single card on a sidebar. The term "Card" is an industry standard in web design and conceptually is like an index card.
Cards display a stylistically consistent set of information that are meant to be used in multiple places. Often a set of cards will be grouped together; they may look strange alone unless placed in a sidebar as a single item. See individual use cases for best practices.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2330 Post St #420, San Francisco, California 94115, United States
Appointments: (415) 476-7500
Fax: (415) 502-6361
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Ut enim ad minim veniam.
Components are helper content groups that require specific styles and are used across many places on the website. Samples include Social Media sharing links, bylines, and link lists.
Components should always be used in context and as needed.
Date: June 21, 2017
Time: 6:20PM
Place: Ullamco laboris nisi
Designation / Job Title
Primary Department / School Information
+1 2345 67890
This section contains the structure for content elements. For example a content element is a sidebar, which can be styled in a few ways. In the future, stylized callouts or specialized content sections can be added here. Content elements normally contain other elements, such as cards, short teasers, or content blurbs.
Structured areas allow consistent styling across your site. Once styles are chosen, content elements should be used uniformly to promote a unified experience.
UCSF UR has approved a variety of treatments of hero / slideshow experiences to be used on the home page. The intent is to customize the slideshows with your group's imagery and message.
Hero/slideshow text is meant to ground users with a quick introduction of the site before sending them elsewhere, so text should be kept short and should be decipherable to an unaffiliated audience. These heroes should only be used on the homepage. If used elsewhere, it will disrupt a site's hierarchy and confuse an ordinary visitor.
Should your image require special handling that should conform to the image and not be included in a more complex element, the style should live here.
Accent bars and other elements can improve basic image styling while creating a common visual language throughout your site.
This section is intended to collect all system level messaging, such as alerts, notices, and warnings.
Most of these messages won't apply to common end users.
Widgets are very specifically named. A widget is anything that represents a chuck of content that is included with a JS widget, like the calendar/events feed or a Google Map.
Pull in third-party data and display it on your site.
THIS SECTION IS UNDER CONSTRUCTION The term Call To Action (CTA) normally refers to any stylized treatment that will prompt a user to "click". Commonly design will do this with a set of button colors or specific layouts.
The CTA's that are in this section were called CTAs in the design comps, but may be confused with the banner sections.
TODO - Sara - branding usage
This group of elements contains layouts for full-page listing results, like all articles or all profiles. Surrounding elements, such as page title and pagination are not included here, but on the page templates. This section is intended to view element interactions, separations, and padding.
Full sections contain groups or feeds of smaller elements to create a landing page, and generally include pagination after a certain number is reached.
Organisms are groups of molecules that are meant to live together in one place.
A site's header and footer combine several key molecules to convey universal site data and navigation options. They are the primary ways people will navigate the site, and are critical to site's design.
Some patterns react and display in different variations, such as a card with 2, 3, or 4 on a single row of a grid. This section is intended to show patterns in their multiple variations with supporting documentation of usage of each variation.
Examples of different applications and formats for flexible molecules that you can apply on your site.
Left-aligned half-width quote, blue. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Left-aligned two-fifth, navy. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Left-aligned one-third, teal. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Right-aligned half-width, green. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Right-aligned two-fifth, orange. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Right-aligned one-third, blue. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Phasellus varius libero non tellus euismod suscipit. Sed tempus est sed rutrum commodo. Morbi vel feugiat purus. Nunc varius arcu ac velit rutrum, sit amet sollicitudin metus efficitur. Aliquam felis eros, sagittis ac sodales nec, imperdiet viverra magna. Cras vel lacus sit amet velit consectetur elementum. Vivamus ornare metus eu sem pellentesque euismod sit amet at ligula. Phasellus vitae fermentum est, consequat rhoncus magna.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
This section shows the molecules of Content Element Styles with embedded content, including spacing, borders and embellishments.
Sidebars are a great way of adding information to a page without bogging down the main content area. Sidebar styling is flexible and will adjust based on the elements it contains. Sidebars should never extend past the main content area.
2330 Post St #420, San Francisco, California 94115, United States
Appointments: (415) 476-7500
Fax: (415) 502-6361
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Ut enim ad minim veniam.
A Basic Page template conveys the global page structures. A Basic Page can contain a sidebar, or no sidebar.
Differentiator: it does not have features defined soley for home and specialized landing pages (e.g., the hero slideshow reserved for the home page)..
A basic page is very flexible, and can be built piece by piece. In general, you should organize each page's structure based on order of importance. Break up text with a title and subheaders, use lists when possible, add images, and break up content into multiple columns, if it makes sense to do so. For legibility, body text should never run the full-width of a page. Break content into columns, add a sidebar, or add multimedia to make text more narrow.
Left-aligned half-width quote, blue. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Left-aligned two-fifth, navy. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Left-aligned one-third, teal. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Right-aligned half-width, green. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Right-aligned two-fifth, orange. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Right-aligned one-third, blue. Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
This section contains well-structured layouts specific to a specific type of content. For example, a specific article, event, or profile.
Detailed pages are meant to display structured content types that always require a specific set of data. This allows for consistent, quick styling that a user can easily understand, especially when navigating between multiple pages of the same type.
Date: June 22, 2017
Time: 6:20PM
Place: Ullamco laboris nisi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et elit quis est varius porttitor. In varius purus turpis, a placerat elit eleifend et. Nullam vulputate mattis ipsum, sed tristique risus auctor lobortis. Aliquam ultricies id ligula sit amet eleifend. Pellentesque nec dictum augue, vitae ornare velit.
Sed quis urna id dolor efficitur placerat. Duis tempus fringilla mauris. Maecenas interdum efficitur ipsum quis rutrum. Duis sagittis lectus augue, vitae ultrices orci condimentum ac. Nulla at lobortis ex. Donec turpis magna, pulvinar vel vehicula vitae, pulvinar quis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum, velit nec varius lobortis, odio mauris malesuada urna, ut elementum tellus mauris quis libero. Sed nec porta magna. Aliquam eu leo turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla eleifend odio non gravida tempus.
Nulla efficitur rhoncus convallis. Integer nec tempus lectus, eu lobortis ipsum. Duis pharetra egestas nisl, sit amet efficitur neque commodo id. Donec vel est tristique, pretium lorem vehicula, lacinia dolor. Donec volutpat sollicitudin rutrum. Donec efficitur nibh ut elit condimentum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum nisi eget magna volutpat tempus. Donec vitae placerat nisi. Praesent neque quam, lacinia ac eros dignissim, condimentum sollicitudin sem. Ut condimentum iaculis odio id porttitor.
Nullam vel libero quis ex sodales lacinia ac ut sem. Aenean placerat congue sapien, nec sollicitudin nunc. Sed fringilla aliquet tortor in pretium. Pellentesque velit quam, blandit non urna sed, placerat sollicitudin nisl. Morbi accumsan arcu justo, sit amet congue nisi imperdiet ut.
Integer nisi risus, varius sed varius in, pretium in nulla. Phasellus est erat, iaculis ut massa nec, malesuada semper turpis. Nam eget fringilla nisl. Ut scelerisque ante quam, facilisis viverra lacus porttitor id. Aliquam tristique vel orci quis porta.
Aliquam erat volutpat. Suspendisse accumsan, tortor sodales vulputate finibus, sapien urna pretium lectus, nec tristique nunc metus sit amet mauris. Mauris quis tortor ligula. Vivamus malesuada dui vitae turpis mollis aliquet. Nunc nec lobortis felis. Suspendisse a tortor a lorem luctus consectetur sit amet sit amet metus. Ut at blandit tortor. Fusce a tellus fringilla, auctor dui ut, fermentum urna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et elit quis est varius porttitor. In varius purus turpis, a placerat elit eleifend et. Nullam vulputate mattis ipsum, sed tristique risus auctor lobortis. Aliquam ultricies id ligula sit amet eleifend. Pellentesque nec dictum augue, vitae ornare velit.
Sed quis urna id dolor efficitur placerat. Duis tempus fringilla mauris. Maecenas interdum efficitur ipsum quis rutrum. Duis sagittis lectus augue, vitae ultrices orci condimentum ac. Nulla at lobortis ex. Donec turpis magna, pulvinar vel vehicula vitae, pulvinar quis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum, velit nec varius lobortis, odio mauris malesuada urna, ut elementum tellus mauris quis libero. Sed nec porta magna. Aliquam eu leo turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla eleifend odio non gravida tempus.
Nulla efficitur rhoncus convallis. Integer nec tempus lectus, eu lobortis ipsum. Duis pharetra egestas nisl, sit amet efficitur neque commodo id. Donec vel est tristique, pretium lorem vehicula, lacinia dolor. Donec volutpat sollicitudin rutrum. Donec efficitur nibh ut elit condimentum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum nisi eget magna volutpat tempus. Donec vitae placerat nisi. Praesent neque quam, lacinia ac eros dignissim, condimentum sollicitudin sem. Ut condimentum iaculis odio id porttitor.
Nullam vel libero quis ex sodales lacinia ac ut sem. Aenean placerat congue sapien, nec sollicitudin nunc. Sed fringilla aliquet tortor in pretium. Pellentesque velit quam, blandit non urna sed, placerat sollicitudin nisl. Morbi accumsan arcu justo, sit amet congue nisi imperdiet ut.
Integer nisi risus, varius sed varius in, pretium in nulla. Phasellus est erat, iaculis ut massa nec, malesuada semper turpis. Nam eget fringilla nisl. Ut scelerisque ante quam, facilisis viverra lacus porttitor id. Aliquam tristique vel orci quis porta.
Aliquam erat volutpat. Suspendisse accumsan, tortor sodales vulputate finibus, sapien urna pretium lectus, nec tristique nunc metus sit amet mauris. Mauris quis tortor ligula. Vivamus malesuada dui vitae turpis mollis aliquet. Nunc nec lobortis felis. Suspendisse a tortor a lorem luctus consectetur sit amet sit amet metus. Ut at blandit tortor. Fusce a tellus fringilla, auctor dui ut, fermentum urna.
Designation / Job Title
Primary Department / School Information
+1 2345 67890
Maecenas interdum efficitur ipsum quis rutrum. Duis sagittis lectus augue, vitae ultrices orci condimentum ac. Nulla at lobortis ex. Donec turpis magna, pulvinar vel vehicula vitae, pulvinar quis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam elementum, velit nec varius lobortis, odio mauris malesuada urna, ut elementum tellus mauris quis libero. Sed nec porta magna. Aliquam eu leo turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla eleifend odio non gravida tempus. Nulla efficitur rhoncus convallis.
Integer nec tempus lectus, eu lobortis ipsum. Duis pharetra egestas nisl, sit amet efficitur neque commodo id. Donec vel est tristique, pretium lorem vehicula, lacinia dolor. Donec volutpat sollicitudin rutrum. Donec efficitur nibh ut elit condimentum aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum nisi eget magna volutpat tempus. Donec vitae placerat nisi. Praesent neque quam, lacinia ac eros dignissim, condimentum sollicitudin sem. Ut condimentum iaculis odio id porttitor.
This section is dedicated to providing multiple home page templates. Note that many permutations of a home page can use the same layout (see Homepage - Hero 1 through 5) and Homepage (2 Column Footer, Alternate header) with some variations on the organism and sample data level.
At initial development, the Homepage Iteration 1 is the only template with multiple sample page variations applied in the Pages section with different .json files.
Homepages are intended to be your site's biggest splash. They need to establish who you are, key areas a user should visit, and why a user should take time to explore your content. Generally, simplicity is best; don't overwhelm a user, but provide guideposts to other pages. Try to structure your content based on order of importance. Think about why your user might be visiting your site and what they need to know first. Plan how your content will change over time and what will need to be updated. Keep text short, explore different formatting options, and use compelling imagery.
Idil ipsum dolor sit amet, altera fabellas adipisci et mei. Mazim scripserit est id, usu cu meis modus. Est id nemore equidem suscipiantur. In oblique denique sit, te prompta interpretaris eum, eos et quod incorrupte. Vix ne phaedrum posidonium referrentur, ut mei prima tritani.
Tota mazim imperdiet ad per, amet aperiri vis te, eam mentitum patrioque ne. Splendide reformidans eam ad. Cum reque nonumy partiendo ei, ut elitr numquam gubergren est. Ex vix altera vocent, mel no feugiat salutandi expetendis. Aeque delicata inimicus an duo, sed cu stet hinc nusquam.
Landing Pages are commonly containers of paginated list data, such as All Articles, All Profiles and they are used in the first level of navigation of a website.
Pattern: Home > Landing Page > Detail Page Depth: Home > Articles > UCSF Contributes to the San Francisco community URl: your.doman.edu > articles > articles/ucsf-contributes-san-francisco-community
Landing pages are essentially feeds of information that give people a quick way to choose from a range of similar content. For instance, a news feed would fit well here.
The page samples in this section leverage one of the Basic Page Templates in conjunction with a JSON data file to have realistic examples instead of Lorem Ipsum. Note that the JSON data files contain some configurations to tell the template to display certain information, like the current page in pagination, how many columns to use, and to contain a sidebar or not.
A basic page is very flexible, and can be built piece by piece. In general, you should organize each page's structure based on order of importance. Break up text with a title and subheaders, use lists when possible, add images, and break up content into multiple columns, if it makes sense to do so. For legibility, body text should never run the full-width of a page. Break content into columns, add a sidebar, or add multimedia to make text more narrow.
Lorem ipsum dolor sit amet, ex labore vivendo laboramus has, vel at putant legendos. Quod appareat id eos, noster malorum et mea.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
Laudem efficiendi ea pri, ex vel facete imperdiet dissentiet, in vim autem essent appareat. In eos iudico consetetur, pri nullam graeci te, ea eos munere apeirian. Eam autem iisque ut. Sed et quas consequat, etiam appetere forensibus vim ne, id duo altera vocibus omnesque. Mei saepe aperiam sententiae an. Nullam facete quodsi te ius, in simul nominati reformidans usu.
Eu vim elitr homero graeci, eam te magna percipit, eripuit tibique invidunt usu no. Nibh soluta sea no, omnes eirmod labores mea ea. Duo labitur legendos et, qui in putant regione labitur. Aperiri graecis has id, te debet electram dignissim sea. Duo sumo praesent et, nam posse corpora recteque an. Has ne vide prodesset, tamquam epicuri et usu.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Pattern Library 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.
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
These are the smallest functional units in the pattern library. Just like the atom, they can’t be broken down any further without losing their meaning. This includes buttons, form fields, headings and other small elements.
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms contain multiple molecules to form a larger piece of functionality. For instance, you could take multiple cards to form a row of related items.
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
These elements work together much like a Russian nesting doll. For instance, if you made a change to an atom, it would automatically reflect in any molecules that contain it, making it a very flexible and robust system of design.
Keep in mind that this is a living library and that it isn’t meant to be prescriptive. You can use any combination of elements while also contributing new ones.
If you’re a developer and you’re ready to begin:
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
The page samples in this section leverage one of the specific Detail Page Templates in conjunction with a JSON data file to have realistic examples instead of Lorem Ipsum. Note that the JSON data files contain some configurations to tell the template to display certain information, like the current page in pagination, how many columns to use, and to contain a sidebar or not.
A detail page is intended for a specific content type. For instance, it could be a news article, a profile, or an event. They have slight stylistic variations based on common information, but will typically have an open area that allows for some flexibility.
The page samples in this section leverage one of the Home Page Templates in conjunction with a JSON data file to have realistic examples instead of Lorem Ipsum. Note that the JSON data files contain some configurations to tell the template to display certain information, like the current page in pagination, how many columns to use, and to contain a sidebar or not.
Homepages are intended to be your site's biggest splash. They need to establish who you are, key areas a user should visit, and why a user should take time to explore your content. Generally, simplicity is best; don't overwhelm a user, but provide guideposts to other pages. Try to structure your content based on order of importance. Think about why your user might be visiting your site and what they need to know first. Plan how your content change will change over time and what will need to be updated. Keep text short, explore different formatting options, and use compelling imagery.
The University of California, San Francisco offers an interdisciplinary program for graduate training in neuroscience. The purpose of this program is to train doctoral students for independent research and teaching in neuroscience. Participation in Neuroscience Program activities does not require membership in the Neuroscience Program. The program welcomes attendance of all interested UCSF faculty, students and other trainees at its retreat, seminars and journal club..
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
The University of California, San Francisco offers an interdisciplinary program for graduate training in neuroscience. The purpose of this program is to train doctoral students for independent research and teaching in neuroscience. Participation in Neuroscience Program activities does not require membership in the Neuroscience Program. The program welcomes attendance of all interested UCSF faculty, students and other trainees at its retreat, seminars and journal club..
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
The University of California, San Francisco offers an interdisciplinary program for graduate training in neuroscience. The purpose of this program is to train doctoral students for independent research and teaching in neuroscience. Participation in Neuroscience Program activities does not require membership in the Neuroscience Program. The program welcomes attendance of all interested UCSF faculty, students and other trainees at its retreat, seminars and journal club..
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
The University of California, San Francisco offers an interdisciplinary program for graduate training in neuroscience. The purpose of this program is to train doctoral students for independent research and teaching in neuroscience. Participation in Neuroscience Program activities does not require membership in the Neuroscience Program. The program welcomes attendance of all interested UCSF faculty, students and other trainees at its retreat, seminars and journal club..
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
The University of California, San Francisco offers an interdisciplinary program for graduate training in neuroscience. The purpose of this program is to train doctoral students for independent research and teaching in neuroscience. Participation in Neuroscience Program activities does not require membership in the Neuroscience Program. The program welcomes attendance of all interested UCSF faculty, students and other trainees at its retreat, seminars and journal club..
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
The University of California, San Francisco offers an interdisciplinary program for graduate training in neuroscience. The purpose of this program is to train doctoral students for independent research and teaching in neuroscience. Participation in Neuroscience Program activities does not require membership in the Neuroscience Program. The program welcomes attendance of all interested UCSF faculty, students and other trainees at its retreat, seminars and journal club..
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
If you're looking to build a fully customized website or application, UCSF’s easy-to-use Web Patterns Library 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.
Our program seeks to train students who will be expert in one particular approach to neuroscientific research, but who will also have a strong general background in other areas of neuroscience and related disciplines. To achieve this objective, our students take interdisciplinary core and advanced courses in neuroscience, as well as related courses sponsored by other graduate programs. In addition, they carry out research under the supervision of faculty members in the program.
The page samples in this section leverage one of the Landing Page Templates in conjunction with a JSON data file to have realistic examples instead of Lorem Ipsum. Note that the JSON data files contain some configurations to tell the template to display certain information, like the current page in pagination, how many columns to use, and to contain a sidebar or not.
TODO - Sara - branding usage
