basic page
Basic Page Examples
Description
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)..
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.
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.
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.
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.
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.
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.
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.
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.