basic page
Basic Page Example
Description
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.
Usage
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.
Welcome to UCSF’s Web Pattern Library
Built Using an Atomic Framework
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.
How to Navigate
Base
This section contains elements that provide the underlying framework for everything else, such as colors, fonts, grids, and utilities.
Atoms
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
Molecules combine a minimum of two atoms to form a meaningful component, like a hero or a card.
Organisms
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
Templates combine various organisms to show how they can work together to form a fully functional webpage.
Pages
Pages take templates a step further, with dummy information to help show how a template will look with “real” information.
Putting the Pieces Together
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:
Contributing a Pattern
New patterns must undergo a three-step process before being integrated into the Web Pattern Library.
- You submit a request for a new or existing pattern you'd like added.
- 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.
- The UCSF Brand Team will make sure it fits into our visual system and offer suggestions for updates if needed.