Business Loans Accounts Style 02 Car Loans Checking Credit Cards Digital Banking Accounts Style 01 Home Equity Loans Insurance Investing Membership Mortgage Personal Loans RV, Boat, Motorcycle Loans Savings

Headings

Headings

.a-heading

Overview

Description

Headings are one to two lines of text that introduce a section of content. They help create a content hierarchy and aide in scannability—making it easier for users to quickly locate the information most important to them. They also help search engines determine what the page is about. They go from H1 at the largest to H5 at the smallest.

Best Practices

  • H1’s are typically reserved for page titles to improve SEO performance.
  • Headings should communicate only one idea at a time.
  • When used within standard body copy, they should be used in order. H2’s to introduce subsections within the page, h3s to introduce subsections within those, etc.

Schema

Name Description Type Default Value Option(s)
heading.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
heading.text
 The text of the heading string - any
heading.level
 The heading level string h2 h1 h2 h3 h4 h5
heading.url
 An optional heading link string - any

Example

h1. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h2. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h3. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h4. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h5. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Heading with Bracket

Heading with Bracket

.a-heading--with-bracket

Colors Used

Swatch Name Hex Variable Usage
Green #579904 $color--green Bracket color

Example

All your needs
under one roof