Class Demonstration
All these things can be achieved by using the correct html. You can copy and paste from the source in the RTE.
You don't need to put anything in the control tab
Remember to always edit the text on the source - so as to not overwrite the classes that are included in the HTML.
For ease of copy and paste I have put each thing in a separate RTEs - but you don't need to do that on real pages as these things generally work ok together and there is no need to add the extra spacing that separate RTEs will produce.
For clarity, I've divided each section with a horizontal rule, noting when you use the horizontal rule in the RTE you need to remove the extra paragraph it puts in after the <hr>.
To ensure the buttons display correctly (with no underline on the text) you must apply the button style to the word that forms the button before adding the hyperlink: documented here
Publication links have no underline
Sample Publication Title Link Other publication details
This is documented here
Coloured wrapper blocks
Logo blue wrapper
Example content
Dark blue wrapper
Example content
Coloured content blocks
'Special use' means you need to have a clear rationale for using it as it differs from the overall usual design pattern
Logo blue block
Body text auto changes colour
Dark blue block
Body text auto changes colour
Logo yellow block (special use)
Body text auto changes colour
Logo orange block (special use)
Body text auto changes colour
Tint blocks
Text colours
Paragraph text automatically changes to white on a blue background
White text Using a span makes it yellow
Yellow text Using a span makes it white
Anchor links
Links on the same page go in the left hand sidebar
When making anchor links in the sidebar it's really important to edit in the RTE source and keep the structure - which is a paragraph for each link and the list is wrapped in a div. Editing in the RTE preview panel will usually result in wonky formatting.
Links to other pages go in the right hand sidebar
When making links in the sidebar it's really important to edit in the RTE source and keep the structure - which is a paragraph for each link and the list is wrapped in a div. Editing in the RTE preview panel will usually result in wonky formatting.
Line Styles
This block has vertical line to the right of the text of the text. It's less useful but sometime can be used to create a divider between two columns. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis vulputate est, eget efficitur ante. Suspendisse felis quam, commodo eleifend ipsum eu, tempus elementum urna. Cras pellentesque massa ac posuere hendrerit. Sed nibh magna, faucibus sed ex sed, facilisis vulputate justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Line Styles
This doesn't have any styles applied. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis vulputate est, eget efficitur ante. Suspendisse felis quam, commodo eleifend ipsum eu, tempus elementum urna. Cras pellentesque massa ac posuere hendrerit. Sed nibh magna, faucibus sed ex sed, facilisis vulputate justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
This block has vertical line to the right of the text of the text. It's likely less useful but sometimes can be used to create a divider between two columns. or when the left column has more content - then you would use this - so the vertical line matches the height of the tallest content.
Less content in this column
- This doesn't have any styles applied - and has less content
- This doesn't have any styles applied
This doesn't have any styles applied.
This block has a vertical line to the left of the text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis vulputate est, eget efficitur ante. Suspendisse felis quam, commodo eleifend ipsum eu, tempus elementum urna. Cras pellentesque massa ac posuere hendrerit. Sed nibh magna, faucibus sed ex sed, facilisis vulputate justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Open this RTE to copy and paste sticky button html