Full Width Title Bar
This guide will show you how to set up a simple full-width title bar component. Use this component when you want to add a stylized title to the top of a page or section.
This component comes with a few color choices:
Divider colors:
- Blue/green gradient
- Red gradient
Banner colors:
- Stony Brook red
- Navy blue
- Turquoise
Keep titles concise and descriptive. Ensure that every title is brief yet provides enough context for the reader to understand the section's purpose at a glance.
Use visual elements sparingly to avoid visual overload. Incorporate graphics, bolding, or colors only when necessary to emphasize key points, preventing the layout from becoming cluttered or distracting.
Maintain a proper heading hierarchy. Organize your content using logical heading levels (such as H1, H2, and H3) to create a clear structural flow and improve overall readability.
What This Component Is
A full-width title bar used to introduce a page or major section.
When to Use
- Department homepages
- Major section introductions
Demo