Core Content Styles
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt vulputate quam, in gravida libero rhoncus id. Suspendisse vitae nibh euismod testing tool tip, condimentum sapien sit amet, egestas felis. Duis nec condimentum elit. In hac habitasse platea dictumst. Nullam malesuada metus ligula, ut consectetur ante vehicula eget. Nunc eget bibendum mauris. Etiam tincidunt purus ut sapien iaculis interdum. Vivamus a enim non erat cursus feugiat vel quis dolor.
Primary button Secondary button
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt
vulputate quam, link to anchor in different Rich Text component. Suspendisse vitae nibh euismod,
condimentum sapien sit amet, egestas felis. Duis nec condimentum elit.
In hac habitasse platea dictumst. Nullam malesuada metus
ligula, ut consectetur ante vehicula eget.
Nunc eget bibendum mauris. Etiam tincidunt purus ut sapien iaculis
interdum.
Vivamus a enim non erat cursus feugiat vel quis dolor.
This is small text - apply 'Small Style #1'
Heading 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt
vulputate quam, in link to anchor on another page rhoncus id. Suspendisse vitae nibh euismod,
condimentum sapien sit amet, egestas felis. Duis nec condimentum elit.
In hac habitasse platea dictumst. Nullam malesuada metus
ligula, ut consectetur ante vehicula eget.
Nunc eget bibendum mauris. Etiam tincidunt purus ut sapien iaculis
interdum. Vivamus a enim non erat cursus feugiat vel quis dolor.
This is small text - apply 'Small Style #2'
Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt vulputate quam, in gravida libero rhoncus id. Suspendisse vitae nibh euismod, condimentum sapien sit amet, egestas felis. Duis nec condimentum elit. In hac habitasse platea dictumst. Nullam malesuada metus ligula, ut consectetur ante vehicula eget. Nunc eget bibendum mauris. Etiam tincidunt purus ut sapien iaculis interdum. Vivamus a enim non erat cursus feugiat vel quis dolor.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt vulputate quam, in gravida libero rhoncus id. Suspendisse vitae nibh euismod link style, condimentum sapien sit amet, egestas felis. Duis nec condimentum elit. In hac habitasse platea dictumst. Nullam malesuada metus ligula, ut consectetur ante vehicula eget. Nunc eget bibendum mauris. Etiam tincidunt purus ut sapien iaculis interdum. Vivamus a enim non erat cursus feugiat vel quis dolor.
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt vulputate quam, in gravida link up page to Heading 3 anchor on rhoncus id. Suspendisse vitae nibh euismod, condimentum sapien sit amet, egestas felis. Duis nec condimentum elit. In hac habitasse platea dictumst. Nullam malesuada metus ligula, ut consectetur ante vehicula eget. Nunc eget bibendum mauris. Etiam tincidunt purus ut sapien iaculis interdum. Vivamus a enim non erat cursus feugiat vel quis dolor.
Heading 1 - Style #1
Heading 2 - Style #1
Heading 3 - Style #1
Heading 4 - Style #1
Heading 5 - Style #1
Heading 6 - Style #1
Lists - basic
Ordered list- Level 1 - parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed
tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat,
quam orci posuere enim, eu luctus nibh lacus eu erat.
- Level 2 - Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Level 3 - Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Level 3 - Etiam vel lectus id enim vestibulum egestas sed nec massa.
- Level 2 - Etiam vel lectus id enim vestibulum egestas sed nec massa.
- Level 2 - Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Aenean ultricies augue eu sodales feugiat.
- Level 1 - parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed
tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat,
quam orci posuere enim, eu luctus nibh lacus eu erat.
- Level 2 - Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Level 3 - Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Level 3 - Etiam vel lectus id enim vestibulum egestas sed nec massa.
- Level 2 - Etiam vel lectus id enim vestibulum egestas sed nec massa.
- Level 2 - Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Aenean ultricies augue eu sodales feugiat.
Lists - alternative
Alternative unordered list
To use this style highlight the list and select List Style #1 from the Apply CSS Class drop-down list.
- Parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed
tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat,
quam orci posuere enim, eu luctus nibh lacus eu erat..
- Morbi at felis consectetur, hendrerit libero id, imperdiet mauris.
- Etiam vel lectus id enim vestibulum egestas sed nec massa.
- Aenean ultricies augue eu sodales feugiat.
Steps ordered list
To use this style highlight the list and select List Style Steps from the Apply CSS Class drop-down list.
- Aenean ultricies augue eu sodales feugiat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Aenean ultricies augue eu sodales feugiat.
List - Steps, advanced layout
The step titles have been wrapped in Heading 4 paragraph style, and step 2 has a default bullet list inserted. View the User Guide for step-by-step instructions on how to achieve this.
-
Step Title subheading 4
Aenean ultricies augue eu sodales feugiat. -
Step Title subheading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.- Parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat, quam orci posuere enim, eu luctus nibh lacus eu erat.
- Aenean ultricies augue eu sodales feugiat.
-
Step Title subheading 4
Aenean ultricies augue eu sodales feugiat.
Heading 3
Give a component or container a style of Background - Full Width Grey, or Full Width Pale Blue.
Suspendisse sollicitudin elit a mauris mattis, eu ultricies neque tempor.
Proin porta tellus accumsan, pharetra eros vitae, pharetra neque. Maecenas
enim ante, dignissim tristique posuere viverra, blandit non elit. Sed sed
nulla nisl. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla auctor sodales tortor, sed tincidunt mauris
pretium eu. Praesent cursus, tortor nec ultricies volutpat, quam orci posuere
enim, eu luctus nibh lacus eu erat.
Heading 3
Give a component or container a style of Background - Full Width Grey, or Full Width Pale Blue.
Suspendisse sollicitudin elit a mauris mattis, eu ultricies neque tempor.
Proin porta tellus accumsan, pharetra eros vitae, pharetra neque. Maecenas
enim ante, dignissim tristique posuere viverra, blandit non elit. Sed sed
nulla nisl. Orci varius natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nulla auctor sodales tortor, sed tincidunt mauris
pretium eu. Praesent cursus, tortor nec ultricies volutpat, quam orci posuere
enim, eu luctus nibh lacus eu erat.
This text is using Highlight Text #1.
Give Rich Text component style of Rich Text - Grey Background
Phasellus sed nibh cursus, semper mi non, condimentum felis. Sed et luctus
odio. Morbi tristique leo in tortor efficitur, id molestie massa volutpat.
Maecenas sapien sapien, ultrices vitae massa ut, mollis lacinia lorem. Duis
dolor diam, molestie nec auctor ut, placerat quis enim. Aliquam efficitur
maximus nisl non convallis. Donec urna nunc, vestibulum et erat eu, ultricies
commodo nunc.
This text is using Highlight Text #1.
Give Rich Text component style of Rich Text - Blue Background
Phasellus sed nibh cursus, semper mi non, condimentum felis. Sed et luctus
odio. Morbi tristique leo in tortor efficitur, id molestie massa volutpat.
Maecenas sapien sapien, ultrices vitae massa ut, mollis lacinia lorem. Duis
dolor diam, molestie nec auctor ut, placerat quis enim. Aliquam efficitur
maximus nisl non convallis. Donec urna nunc, vestibulum et erat eu, ultricies
commodo nunc.
This text is using Highlight Text #1.
Give Rich Text component style of Rich Text - Yellow Background
Phasellus sed nibh cursus, semper mi non, condimentum felis. Sed et luctus
odio. Morbi tristique leo in tortor efficitur, id molestie massa volutpat.
Maecenas sapien sapien, ultrices vitae massa ut, mollis lacinia lorem. Duis
dolor diam, molestie nec auctor ut, placerat quis enim. Aliquam efficitur
maximus nisl non convallis. Donec urna nunc, vestibulum et erat eu, ultricies
commodo nunc.
Lists with Extra spacing
When extra spacing is required between the first level items of a list, apply the component style Lists - add extra spacing to the Rich Text component.
- Sustainability
We always put safety first and strive for outcomes that benefit the environment and the communities in which we operate for the long term. - Simplicity
We relentlessly pursue the basics, eliminate waste and always focus on what matters most.- We always put safety first and strive for outcomes that benefit the environment and the communities in which we operate for the long term.
- We relentlessly pursue the basics, eliminate waste and always focus on what matters most.
- We do what we say we will do and hold ourselves and others to account.
- We always put safety first and strive for outcomes that benefit the environment and the communities in which we operate for the long term.
- We relentlessly pursue the basics, eliminate waste and always focus on what matters most.
- We do what we say we will do and hold ourselves and others to account.
- We always put safety first and strive for outcomes that benefit the environment and the communities in which we operate for the long term.
- Commitment
We do what we say we will do and hold ourselves and others to account. - Sustainability
We always put safety first and strive for outcomes that benefit the environment and the communities in which we operate for the long term. - Simplicity
We relentlessly pursue the basics, eliminate waste and always focus on what matters most. - Commitment
We do what we say we will do and hold ourselves and others to account.
Suspendisse sollicitudin elit a mauris mattis, eu ultricies neque tempor. Proin porta tellus accumsan, pharetra eros vitae, pharetra neque. Maecenas enim ante, dignissim tristique posuere viverra, blandit non elit. Sed sed nulla nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat, quam orci posuere enim, eu luctus nibh lacus eu erat.
Suspendisse sollicitudin elit a mauris mattis, eu ultricies neque tempor. Proin porta tellus accumsan, pharetra eros vitae, pharetra neque. Maecenas enim ante, dignissim tristique posuere viverra, blandit non elit. Sed sed nulla nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat, quam orci posuere enim, eu luctus nibh lacus eu erat.
Suspendisse sollicitudin elit a mauris mattis, eu ultricies neque tempor. Proin porta tellus accumsan, pharetra eros vitae, pharetra neque. Maecenas enim ante, dignissim tristique posuere viverra, blandit non elit. Sed sed nulla nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla auctor sodales tortor, sed tincidunt mauris pretium eu. Praesent cursus, tortor nec ultricies volutpat, quam orci posuere enim, eu luctus nibh lacus eu erat.