STYLE GUIDE - DO NOT DELETE!

Typographic Scale

<h1> 3.05em (48px)

<h2> 2.44em (39px)

<h3> 1.95em (31px)

<h4> 1.56em (25px)

<h5> 1.25em (20px)
<h6> 1em (16px)

<p>, <body> 1em (16px)

Base size: 16px / 1 em
Ratio: 1.25 (Major Third)

All In One Text Widget

Heading 1. Text spans multiple lines to check line height.

This is the Kitchen Sink Text Editor Widget. It is included to show what the default typographic styles look like as defined by the Astra template. The individual Heading widgets provided by Elementor should match the styles contained in this widget. If they do not, change the styles in Astra first before using Style overrides in Elementor. (No additional hard returns or spaces have been added at these ending H# transitions.)

Heading 2: Clear formatting when pasting content into a text editor

Elementor keeps formatting when you paste content into the text editor. Always paste content into the text editor without formatting (on Mac this can be done by pressing Shift + Option + Command + V). On Windows you can use PureText to paste without formatting, or you can copy and paste the content into a raw text editor first, and copy/paste from there.

You can also use the “clear formatting” button in the text editor to remove any styles. (This clears in-line elements such a bold and italics, but does not convert headings into paragraphs.) You can check the HTML code to make sure it’s clean.

Heading 3: Text is spanning two lines to check for line height.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod. Duis elementum mattis sem, eget tempor elit malesuada vel. Nullam elementum tempor odio non ornare. Cras viverra rhoncus enim sed placerat.

H4: Text is spanning two lines to check for line height. Two lines for height check.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod. Duis elementum mattis sem, eget tempor elit malesuada vel. Nullam elementum tempor odio non ornare. Cras viverra rhoncus enim sed placerat.

H5: Text is spanning two lines to check for line height. Two lines for height check.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod.

  • Bulleted list 1
  • Bulleted list 2
  • Bulleted list 3 just before paragraph

H6: Text is spanning two lines to check for line height. Two lines for height check. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod.

  • Bulleted list 1
  • Bulleted list 2
  • Bulleted list 3 just before paragraph
while(noSuccess)
{
    tryAgain();
    if(Dead)
        break;
}

Block Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod. Duis elementum mattis sem, eget tempor elit malesuada vel. Nullam elementum tempor odio non ornare. Cras viverra rhoncus enim sed placerat.

– Lorem Ipsum


Horizontal rule. If no rule shows up directly above, fix it. This will need to be changed in Dashboard: Appearance > Customize >>> Astra: “Additional CSS”.

Individual Widgets

Heading 1. Text spans multiple lines to check line height.

This is the Individual Text Editor Widget. It is included to show what the default typographic styles look like as defined by the Astra template. The individual Heading widgets provided by Elementor should match the styles contained in this widget. If they do not, change the styles in Astra first before using Style overrides in Elementor. (A margin-bottom: .33em was added via “Customize: Additional CSS”)

Heading 2: Clear formatting when pasting content into a text editor

Elementor keeps formatting when you paste content into the text editor. Always paste content into the text editor without formatting (on Mac this can be done by pressing Shift + Option + Command + V). On Windows you can use PureText to paste without formatting, or you can copy and paste the content into a raw text editor first, and copy/paste from there.

You can also use the “clear formatting” button in the text editor to remove any styles. (This clears in-line elements such a bold and italics, but does not convert headings into paragraphs.) You can check the HTML code to make sure it’s clean.

Heading 3: Text is spanning two lines to check for line height. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod. Duis elementum mattis sem, eget tempor elit malesuada vel. Nullam elementum tempor odio non ornare. Cras viverra rhoncus enim sed placerat.

H4: Text is spanning two lines to check for line height. Two lines for height check.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod. Duis elementum mattis sem, eget tempor elit malesuada vel. Nullam elementum tempor odio non ornare. Cras viverra rhoncus enim sed placerat.

H5: Text is spanning two lines to check for line height. Two lines for height check.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod.

  • Bulleted list 1
  • Bulleted list 2
  • Bulleted list 3 just before paragraph
H6: Text is spanning two lines to check for line height. Two lines for height check.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod.

  • Bulleted list 1
  • Bulleted list 2
  • Bulleted list 3 just before paragraph
while(noSuccess)
{
tryAgain();
if(Dead)
break;
}

Block Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam at turpis tristique, laoreet arcu quis, egestas nisl. Mauris semper euismod sem ac euismod. Duis elementum mattis sem, eget tempor elit malesuada vel. Nullam elementum tempor odio non ornare. Cras viverra rhoncus enim sed placerat.

– Lorem Ipsum

Horizontal rule. The rule shows up because it is its own divider element.