Category: Snippets

H2|H3 Stylized Headings Snippet

This snippet is used to create stylized level 2 or level 3 headings, including the Graybar, Bar Separator, Top Title, and Top Title w/ More Links. These stylized headings can be used in place of a regular heading 2 or heading 3. Except for special uses of the Bar Separator, you should be consistent with the style of a heading level you use throughout a webpage.

Examples of the graybar heading levels 2 and 3.
Graybar headings.
Examples of the bar separator heading levels 2 and 3.
Bar separator headings.
Examples of the Top Title and Top Title with More Links headings levels 2 and 3.
Top Title and Top Title w/ More Links headings.

Accordion Snippet

This snippet creates Slider- or FAQ-styled accordions. Clicking on one of the accordions would open or close that section. Each row in the snippet will create one accordion. Creating three or more accordions within one snippet would automatically add an Expand All/Collapse All link at the top right. If you have more than seven accordions together, it is recommended that you try to split them into multiple categories.

Screen shot of a slider with the first one open.

Screen shot of an FAQ with the last question open.