content-left-bg.png
content-right-bg.png
Zone 0 WebPart Area
Zone 0 - (12)
WebPartZone0_1
Zone 0 - (3|3|3|3)
WebPartZone0_3x3x3x3_1
WebPartZone0_3x3x3x3_2
WebPartZone0_3x3x3x3_3
WebPartZone0_3x3x3x3_4
Zone 0 - (4|4|4)
WebPartZone0_4x4x4_1
WebPartZone0_4x4x4_2
WebPartZone0_4x4x4_3
Zone 0 - (8|4)
WebPartZone0_8x4_1
WebPartZone0_8x4_2
Zone 0 - (6|6)
WebPartZone0_6x6_1
WebPartZone0_6x6_2
Zone 0 - (4|8)
WebPartZone0_4x8_1
WebPartZone0_4x8_2
Zone 1 WebPart Area
Zone 1 - Publishing Page Content + Above/Below Content
WebPartZone1_1
PublishingPageContent

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Page content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.​

Example of accordions - using H5 titles ​by default​​

Collapse allExpand all
Group 1 Title
Group 3 Title

​​​​​​

WebPartZone1_2

Article Rollup
Zone 1 - (12)
WebPartZone1_12
Zone 1 - (3|3|3|3)
WebPartZone1_3x3x3x3_1
WebPartZone1_3x3x3x3_2
WebPartZone1_3x3x3x3_3
WebPartZone1_3x3x3x3_4
Zone 1 - (4|4|4)
WebPartZone1_4x4x4_1
WebPartZone1_4x4x4_2
WebPartZone1_4x4x4_3
Zone 1 - (8|4)
WebPartZone1_8x4_1
WebPartZone1_8x4_2
Zone 1 - (6|6)
WebPartZone1_6x6_1
WebPartZone1_6x6_2
Zone 1 - (4|8)
WebPartZone1_4x8_1
WebPartZone1_4x8_2
Zone 2 WebPart Area
Zone 2 - (12)
WebPartZone2_12
Zone 2 - (3|3|3|3)
WebPartZone2_3x3x3x3_1
WebPartZone2_3x3x3x3_2
WebPartZone2_3x3x3x3_3
WebPartZone2_3x3x3x3_4
Zone 2 - (4|4|4)
WebPartZone2_4x4x4_1
WebPartZone2_4x4x4_2
WebPartZone2_4x4x4_3
Zone 2 - (8|4)
WebPartZone2_8x4_1
WebPartZone2_8x4_2
Zone 2 - (6|6)
WebPartZone2_6x6_1
WebPartZone2_6x6_2
Zone 2 - (4|8)
WebPartZone2_4x8_1
WebPartZone2_4x8_2
Zone 3 WebPart Area
Zone 3 - (12)
WebPartZone3_12
Zone 3 - (3|3|3|3)
WebPartZone3_3x3x3x3_1
WebPartZone3_3x3x3x3_2
WebPartZone3_3x3x3x3_3
WebPartZone3_3x3x3x3_4
Zone 3 - (4|4|4)
WebPartZone3_4x4x4_1
WebPartZone3_4x4x4_2
WebPartZone3_4x4x4_3
Zone 3 - (8|4)
WebPartZone3_8x4_1
WebPartZone3_8x4_2
Zone 3 - (6|6)
WebPartZone3_6x6_1
WebPartZone3_6x6_2
Zone 3 - (4|8)
WebPartZone3_4x8_1
WebPartZone3_4x8_2
Zone 4 WebPart Area
Zone 4 - (12)
WebPartZone4_12

Text Elements

This area shows standard text styles and how they are rendered by default in the SharePoint framework.


Example heading level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Example inline document download - alcohol and other drugs education program factsheet.

Here are some example links:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Another example heading level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Paragraph with "well" class - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Example heading level 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

  • incididunt ut labore et dolore magna aliqua
  • incididunt ut labore et dolore magna aliqua
    • incididunt ut labore et dolore magna aliqua
    • incididunt ut labore et dolore magna aliqua
    • incididunt ut labore et dolore magna aliqua
    • incididunt ut labore et dolore magna aliqua
  • incididunt ut labore et dolore magna aliqua
  • incididunt ut labore et dolore magna aliqua

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  1. incididunt ut labore et dolore magna aliqua
  2. incididunt ut labore et dolore magna aliqua
    1. incididunt ut labore et dolore magna aliqua
    2. incididunt ut labore et dolore magna aliqua
    3. incididunt ut labore et dolore magna aliqua
    4. incididunt ut labore et dolore magna aliqua
    5. incididunt ut labore et dolore magna aliqua


 

Example heading level 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Title

 Description
 Notes - this is a link
Example table with default table style Another example of cell information here - this one longer. And another example
This item is a link Another example here And another example
Another example row here And another example
 And another example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Example heading level 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title
 Another example here
 Example of a link in a table
Descripton
 Another example of cell information here - this one longer.
 And another example
This item is a link Another example here And another example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Example heading level 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Example heading level 1 that goes over two lines - this helps you see what line spacing gets applied by default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Paragraph with an example btn linkand another button link to demonstrate two buttons alongside text.

Example heading level 2 that goes over two lines - this helps you see what line spacing gets applied by default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Example heading level 3 that goes over two lines - this helps you see what line spacing gets applied by default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

A button added on its own line

Example heading level 4 that goes over two lines - this helps you see what line spacing gets applied by default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Example mailto link.


Zone 4 - (3|3|3|3)
WebPartZone4_3x3x3x3_1
WebPartZone4_3x3x3x3_2
WebPartZone4_3x3x3x3_3
WebPartZone4_3x3x3x3_4
Zone 4 - (4|4|4)
WebPartZone4_4x4x4_1
WebPartZone4_4x4x4_2
WebPartZone4_4x4x4_3
Zone 4 - (8|4)
WebPartZone4_8x4_1
WebPartZone4_8x4_2
Zone 4 - (6|6)
WebPartZone4_6x6_1
WebPartZone4_6x6_2
Zone 4 - (4|8)
WebPartZone4_4x8_1
WebPartZone4_4x8_2
Zone 5 WebPart Area
Zone 5 - (12)
WebPartZone5_12
Zone 5 - (3|3|3|3)
WebPartZone5_3x3x3x3_1
WebPartZone5_3x3x3x3_2
WebPartZone5_3x3x3x3_3
WebPartZone5_3x3x3x3_4
Zone 5 - (4|4|4)
WebPartZone5_4x4x4_1
WebPartZone5_4x4x4_2
WebPartZone5_4x4x4_3
Zone 5 - (8|4)
WebPartZone5_8x4_1
WebPartZone5_8x4_2
Zone 5 - (6|6)
WebPartZone5_6x6_1
WebPartZone5_6x6_2
Zone 5 - (4|8)
WebPartZone5_4x8_1
WebPartZone5_4x8_2
Zone 6 WebPart Area
Zone 6 - (12)
WebPartZone6_12
Zone 6 - (3|3|3|3)
WebPartZone6_3x3x3x3_1
WebPartZone6_3x3x3x3_2
WebPartZone6_3x3x3x3_3
WebPartZone6_3x3x3x3_4
Zone 6 - (4|4|4)
WebPartZone6_4x4x4_1
WebPartZone6_4x4x4_2
WebPartZone6_4x4x4_3
Zone 6 - (8|4)
WebPartZone6_8x4_1
WebPartZone6_8x4_2
Zone 6 - (6|6)
WebPartZone6_6x6_1
WebPartZone6_6x6_2
Zone 6 - (4|8)
WebPartZone6_4x8_1
WebPartZone6_4x8_2
Zone 7 WebPart Area
Zone 7 - (12)
WebPartZone7_12
Zone 7 - (3|3|3|3)
WebPartZone7_3x3x3x3_1
WebPartZone7_3x3x3x3_2
WebPartZone7_3x3x3x3_3
WebPartZone7_3x3x3x3_4
Zone 7 - (4|4|4)
WebPartZone7_4x4x4_1
WebPartZone7_4x4x4_2
WebPartZone7_4x4x4_3
Zone 7 - (8|4)
WebPartZone7_8x4_1
WebPartZone7_8x4_2
Zone 7 - (6|6)
WebPartZone7_6x6_1
WebPartZone7_6x6_2
Zone 7 - (4|8)
WebPartZone7_4x8_1
WebPartZone7_4x8_2
Zone 8 WebPart Area
Zone 8 - (12)
WebPartZone8_12
Zone 8 - (3|3|3|3)
WebPartZone8_3x3x3x3_1
WebPartZone8_3x3x3x3_2
WebPartZone8_3x3x3x3_3
WebPartZone8_3x3x3x3_4
Zone 8 - (4|4|4)
WebPartZone8_4x4x4_1
WebPartZone8_4x4x4_2
WebPartZone8_4x4x4_3
Zone 8 - (8|4)
WebPartZone8_8x4_1
WebPartZone8_8x4_2
Zone 8 - (6|6)
WebPartZone8_6x6_1
WebPartZone8_6x6_2
Zone 8 - (4|8)
WebPartZone8_4x8_1
WebPartZone8_4x8_2
Zone 9 WebPart Area
Zone 9 - (12)
WebPartZone9_1

Content Editor

Alternative styles for headings

Table style clear

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Title

 Description
 Notes - this is a link
Example table with default table style Another example of cell information here - this one longer.
 And another example
This item is a link Another example here And another example
Another example row here And another example
 And another example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Second table style clear

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Title

 Another example here
 Example of a link in a table
Descripton
 Another example of cell information here - this one longer.
 And another example
This item is a link Another example here And another example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

Default tabs out of the box

First tab content

Zone 9 - (3|3|3|3)
WebPartZone9_3x3x3x3_1
WebPartZone9_3x3x3x3_2
WebPartZone9_3x3x3x3_3
WebPartZone9_3x3x3x3_4
Zone 9 - (4|4|4)
WebPartZone9_4x4x4_1
WebPartZone9_4x4x4_2
WebPartZone9_4x4x4_3
Zone 9 - (8|4)
WebPartZone9_8x4_1
WebPartZone9_8x4_2
Zone 9 - (6|6)
WebPartZone9_6x6_1
WebPartZone9_6x6_2
Zone 9 - (4|8)
WebPartZone9_4x8_1
WebPartZone9_4x8_2
Last reviewed 05 March 2026
Last updated 05 March 2026