Header One Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for H1](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-H1.png)
Output
Heading One
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Two Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for H2](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-H2.png)
Output
Heading Two
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Three Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for H3](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-H3.png)
Output
Heading Three
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Four Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for H4](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-H4.png)
Output
Heading Four
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Five Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for H5](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-H5.png)
Output
Heading Five
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Header Six Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for H6](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-H6.png)
Output
Heading Six
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Paragraph Styling
WYSIWYG Settings
![WYSIWYG Settings Reference for Paragraphs](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-BlockStyles-P.png)
Output
This is a test paragraph. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
This is a paragraph that contains some inline styles. To add some length to it, let us mention that this page was primarily written for testing the effect of user style sheets. You can use it for various other purposes as well, like just checking how your browser displays various HTML elements.
Inline Text Styling
WYSIWYG Setting
![WYSIWYG Settings Reference for Bold Text Inline Style](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-InlineStyles-Bold.png)
Output
Bold Text
WYSIWYG Setting
![WYSIWYG Settings Reference for Italic Text Inline Style](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-InlineStyles-Italic.png)
Output
Italic Text
WYSIWYG Setting
![WYSIWYG Settings Reference for Underline Text Inline Style](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-InlineStyles-Underline.png)
Output
Underline Text
Icon System
HTML Code
<i class="material-icons-outlined">ICON_NAME</i>
A full list of available icons can be found here.
Output
whatshot
Brand Colors
Available Colors
These colors are available for use for text, backgrounds and buttons.
Grid System
Page Builder Settings
Output
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-1_6.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-1_5.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-1_4.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-1_3.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-1_2.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-2_3.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-3_4.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-5_6.png)
![WYSIWYG Settings Reference for Column Widths](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ColumnWidths-1_1.png)
Full Grid
Hiding System
Sections and elements can be hidden in the Page Builder by adding the following classes.
Page Builder Setting
![Page Builder Settings Reference for hiding onmobile class](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ClassOptions-HideMobile.png)
Adding the classname hide-mobile
will hide the element at all screen sizes less than 840 pixels wide.
Page Builder Setting
![Page Builder Settings Reference for hiding ontablet class](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ClassOptions-HideTablet.png)
Adding the classname hide-tablet
will hide the element at all screen sizes between 840 and 1280 pixels wide.
Page Builder Setting
![Page Builder Settings Reference for hiding ondesktop class](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ClassOptions-HideDesktop.png)
Adding the classname hide-desktop
will hide the element at all screen sizes larger than 1280 pixels wide.
Page Builder Setting
![Page Builder Settings Reference for hiding onall class](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ClassOptions-HideAll.png)
Adding the classname hide-all
will hide the element at all screen sizes.
Page Builder Setting
![Page Builder Settings Reference for hiding oncombined class](https://www.sarcoidosisri.org/wp-content/themes/sri/inc/assets/images/style-guide/StyleGuide-ClassOptions-HideCombined.png)
Classes can also be combined separated by a space to hide elements at mixed sizes.