Satellite Sites
Include a note that the site is created on behalf of the Unitarian Universalist Association with a link back to UUA.org.
Style Notes
Our styles are built on top of Bootstrap v5.0 and we use Font Awesome v6.4 for some icons. See UUA Branding Graphics, Colors, and Fonts for additional guidance.
Our site's CSS may be used, but it may be more complicated than necessary for the project, and may change without warning.
Regions
| Gutter | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Gutter |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Site header | |||||||||||||
| Breadcrumbs Title | |||||||||||||
| Page header | |||||||||||||
| Section menu (sidebar) | Body content | Sidebar content (discouraged) | |||||||||||
| Site footer | |||||||||||||
Basic Page HTML
<!DOCTYPE html><html> <head> <title>{{ title }}</title> <link rel="stylesheet" media="all" href="https://www.uua.org/themes/custom/b5_uua/css/style.css" /> </head> <body> <nav aria-labelledby="skip-link"> <a href="#h1" id="skip-link" class="visually-hidden-focusable">{{ 'Skip to main content (press Enter)'|t }}</a> </nav> <div class="layout-container"> <header aria-label="Site header: logo, search, and menus" id="page-header"> <div class="d-print-none bg-white"> {{ account_menu }} <div class="d-flex"> <div class="layout-logo position-relative mt-4 col-8 col-b720-3 col-md-4 px-3"> {{ header_logo }} </div> <div class="layout-menus col-4 col-b720-9 col-md-8 px-3"> <div class="row"> <div class="layout-engage-menu col-b400-12 col-b720-8 pe-3"> {{ engage_menu }} </div> <div class="layout-search d-none d-b720-block col-b720-4 px-3"> {{ search }} </div> </div> <div class="row"> <div class="layout-menu col-b400-12"> {{ site_menu }} </div> </div> </div> </div> </div> <div class="mb-4"></div> </header> <main class="container position-relative bg-white py-1" aria-labelledby="h1"> {{ breadcrumb }} <section class="row"> <div class="layout-title-hero debug-author-content col-12"> <div id="block-pagetitle" class="block-pagetitle"> <h1 id="h1">{{ title }}</h1> </div> {{ page_header }} </div> </section> <section class="row"> --- if has_section_menu and has_sidebar --- <article class="layout-content col-b480-7 col-sm-8 col-b720-7"> --- elseif has_section_menu and not has_sidebar --- <article class="layout-content col-b720-10"> --- elseif has_sidebar and not has_section_menu --- <article class="layout-content col-b480-7 col-sm-8 col-b720-9"> --- else --- <article class="layout-content col-b720-12"> --- endif --- <header aria-hidden="true" class="invisible"> <h1 property="schema:name">{{ title }}</h1> </header> <div class="debug-author-content"> {{ content }} </div> <footer> {{ content_footer|without('viewmode_body_footer', 'viewmode_meta_table_footer') }} </footer> </article> --- if has_sidebar --- <section class="layout-sidebar debug-author-content col-b480-5 col-sm-4 col-b720-3"> <div class="d-b480-none hr dotted gray"></div> {{ sidebar }} </section> --- endif --- --- if has_section_menu --- <nav class="layout-section-menu col-b720-2 d-print-none" aria-labelledby="section-menu"> <div class="d-b720-none hr dotted gray"></div> <h2 id="section-menu" class="d-b720-none">Section Menu</h2> {{ section_menu }} </nav> --- endif --- </section> </main> <div class="d-print-none bg-white pt-1 px-3"> <footer aria-label="Site footer: logo, search, and menus" class="p-0"> <hr class="dotted gray" /> <div class="row"> <div class="layout-footer-logo d-none d-b400-block col-b400-4 col-b480-3 col-md-2 pe-4 mb-3"> {{ footer_logo }} </div> <div class="layout-brand-footer col-sm-6"> {{ brand_footer }} </div> <div class="layout-footer-uuib400 col-b400-4 col-b480-5 col-md-2 mb-3"> {{ footer_uuism }} </div> <div class="layout-footer-utility col-b400-4 col-md-2 mb-3"> {{ footer_utility }} </div> <div class="layout-footer-copyright col mb-3"> {{ footer_copyright }} </div> </div> </footer> </div> </div> </body></html>
Menu Includes
We maintain HTML for our current menus and footer in the following include files, though they are not required on third-party sites. If cross-origin resource requests are supported, these may be included directly. Otherwise, they may be included as static HTML or just left out.