Heading Styles

Code Snippet Library

Heading With Border

Heading

Heading With Border Code

<h2 style="border-bottom: 0.1rem solid #002157; margin: 2rem 0 1rem 0; color: #002157;">Heading</h2>

Heading With Color Banner

Heading Text

Color Banner Heading Code

<h2 style="background: #009CDE; padding: 0.25rem 1rem; margin: 0px 0px 2.5rem; color: #ffffff;">Heading Text</h2>

Heading With Top and Bottom Borders

Heading Text

Heading With Top and Bottom Borders Code

<h2 style="color: #1e407c; background: #ccdae650; border-top: 3px solid #1e407c; border-bottom: 3px solid #1e407c; padding: 0.25rem 1rem; margin: 0px 0px 2.5rem; text-align: center;">Heading Text</h2>

Heading With Styled Borders

Heading Text

Heading With Styled Borders Code

<div style="color: #1e407c; border-top: 3px solid #1e407c; border-bottom: 3px solid #1e407c; margin: 0px 0px 2.5rem;">
    <h2 style="color: #ffffff; background: #1e407c; border-top: 3px solid #ffffff; border-bottom: 3px solid #ffffff; padding: 0.25rem 1rem; margin: 0px; text-align: center;">Heading Text</h2>
</div>

Guidelines

Whatever heading style you use, be consistent throughout the course.
These styles are best used for the top-level heading only; the exception is the Heading With Border.
Use the Accessibility Checker to verify good color contrast between the font and background color.
Use good heading structure Links to an external site..
For colors that match Penn State branding, see the Color Code page in Guidelines and Best Practices