Page Headings, Divisions, and Paragraphs

The h2 and h3 headings can be selected through the wysiwyg editor, usually by clicking the 3-dot menu and setting the "Formats" type in the drop menu. The normal h1 header would have to be done in the code editor by surrounding the text with <h1> and </h1> tags.

To replicate the page title text format, you will also need to do this in the code editor using <h1 class="pageTitle"> and </h1> tags.

Page Titles: <h1 class="pageTitle">

Heading 1: <h1> (this is a 24pt font)

Heading 2: <h2> (this is an 18pt font)

Heading 3: <h3> (this is a 14pt font)

 

There are also headings 4 through 6 (shown below). These would also need to be done in the code editor.

Heading 4: <h4> (this is a 12pt font, All caps and full page width underline)

Heading 5: <h5> (this is a 12pt font, gray and italicized)
Heading 6: <h6> (this is a 12pt font, gray)

Division and paragraph tags can be selected through the wysiwyg editor, usually by clicking the 3-dot menu and setting the "Formats" type in the drop menu. You can then change the size of the font by clicking the 3-dot menu and setting the "Font sizes" in the drop menu.

To replicate the page title text format, you will need to use the code editor and add <p style="font-size: 2.25rem;"> and </p> tags, or <div style="font-size: 2.25rem;"> and </div> tags around the text you want to give that style to.

Page Titles: 2.25rem font
<div style="font-size: 2.25rem;"> or
<p style="font-size: 2.25rem;">

Division and paragraph: 24pt font
<div style="font-size: 24pt;"> or
<p style="font-size: 24pt;">

Division and paragraph: 18pt font
<div style="font-size: 18pt;"> or
<p style="font-size: 18pt;">

Division and paragraph: 14pt font
<div style="font-size: 14pt;"> or
<p style="font-size: 14pt;">

* Division and paragraph: 12pt font
<div style="font-size: 12pt;"> or
<p style="font-size: 12pt;">

* This is the default text size, you don't need to do anything here, I've just listed it for completeness.

Normal text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tellus elementum sagittis vitae et. Aliquet enim tortor at auctor urna nunc id cursus. Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Sem et tortor consequat id porta nibh venenatis cras. Id aliquet risus feugiat in ante. Nisl rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Ornare aenean euismod elementum nisi quis. Ornare quam viverra orci sagittis eu volutpat odio. Nibh tortor id aliquet lectus proin nibh nisl. Ac tincidunt vitae semper quis. Nulla pellentesque dignissim enim sit amet venenatis. At tellus at urna condimentum mattis pellentesque id nibh. Velit dignissim sodales ut eu sem integer vitae justo. Adipiscing bibendum est ultricies integer quis.

Bold text: Odio tempor orci dapibus ultrices in. Id diam maecenas ultricies mi eget mauris pharetra. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Egestas congue quisque egestas diam. At imperdiet dui accumsan sit. Amet est placerat in egestas erat imperdiet sed. Massa ultricies mi quis hendrerit dolor magna eget. Viverra adipiscing at in tellus integer feugiat scelerisque. Diam phasellus vestibulum lorem sed risus ultricies. Risus ultricies tristique nulla aliquet enim tortor at auctor urna. Felis bibendum ut tristique et egestas. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Urna duis convallis convallis tellus id interdum velit laoreet. A diam maecenas sed enim. Habitant morbi tristique senectus et netus et malesuada fames ac. Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. Aliquet enim tortor at auctor urna nunc id. Facilisis leo vel fringilla est ullamcorper eget nulla. Habitant morbi tristique senectus et netus et.

Unformatted text and example code can be written between <code> and </code> brackets to remove all text formatting allowing a user to copy and paste. You will need to replace all < and > symbols with &lt; and &gt; within the code (there are other symbols that would also need to be replaced).

You can also allow for long lines of unformatted text/code, and avoid line wrapping, by enclosing the <code> and </code> tags within <pre style="overflow: auto;"> and </pre> tags.