Sidebar Page Example
contact.email@usu.edu
(435) 797-2601
First Heading (H2)
Lead paragraph uses lead class to highlight key information. Main container uses my-5 to add whitespace between top and bottom of page if no breadcrumbs are used. If breadcrumbs are present, use mt-3 mb-5. Depending on content and padding preceding it, you may want to add mt-0 to first H2 to reduce unnecessary whitespace.
Heading (H2)
Most interior text should use text-xl class in most cases. This can be set per element as needed, but best practices is to include in containing div for main column. Advisable to not set for entire page container, so that sidebar or other text can be rendered normal-size when necessary.
Subheading (H3)
Standard H3s should use class h4 and text-bright-light to better distinguish from H2.
Need Help?
Note
Generally, all interior pages should utilize a 75/25 layout with main content nested in a col-9 container and sidebar using col-3. Sidebars are highly recommended to maintain consistency and standard layout. If a sidebar needs to be dropped, a left-justified col-9 container should still be used for main content for readability.
Top bottom contact bars are optional and can be mixed with sidebar as needed. Right-hand sidebars should generally be reserved only for page-level navigation OR for displaying contact info, links to forms, key pages etc.
Sidebars should not use text-xl. In most cases, use H2 heading to indicate that sidebar is dedicated, top-level section, but stylize as H4 for visual design. Sidebars can include additional subheadings, but shouldn't go more than one level deep (H3, stylized as H5).