Information Centre

The components on these page are rendered in information centre articles when their respective shortcode is entered into the article's rich text field. You can customise the styling of the elements and the text elements inside them.

Implementation tip
When typing in shortcodes into the CMS, you can add any content inside them such as headings, links and images, and they will all be rendered as usual inside their element.

Content aside

Used to display secondary content inside articles. Rendered through the following shortcode:

[content_aside]Content goes here[/content_aside]

Implementation tip
The element on this page is set up as a rich text block. You can style the appearance of headings, paragraphs and links inside, and this styling will carry across to the articles.

You will need to publish the Information Centre article in order to see the shortcode transformation.

Tip box

Used to display useful tips. Rendered through the following shortcode:

[tip_box]Content goes here[/tip_box]

Implementation tip
The element on this page is set up as a rich text block. You can style the appearance of headings, paragraphs and links inside, and this styling will carry across to the articles.

You will need to publish the Information Centre article in order to see the shortcode transformation.

Feature link

Used to display useful tips. Rendered through the following shortcode:

[feature_link]HTML content goes here[/feature_link]

Implementation tip
The element on this page is set up as a rich text block. You can style the appearance of headings, paragraphs and links inside, and this styling will carry across to the articles.

You will need to publish the Information Centre article in order to see the shortcode transformation.

Tables

DIsplays an HTML table with a header row and body rows. Can contain any number of rows and columns.

To create a table in the rich text field, the markup for a HTML table must be followed, but with [square brackets] instead of <html> tags. The square brackets will be converted to HTML brackets via Javascript on page load.</html>

There can be paragraph spaces <p> or paragraph breaks <br> within this data for easier readability when content publishing. However avoid adding paragraph spaces within each cell data text to avoid adding extra paragraph styling within these cells.</p>

See a below example that contains a header row and 3 body rows, with 3 columns formatted correctly.

[table]
[thead]
[tr]
[th]header cell 1[/th]
[th]header cell 2[/th]
[th]header cell 3[/th]
[/tr]
[/thead]
[tbody]
[tr]
[td]Cell 1A[/td]
[td]Cell 2A[/td]
[td]Cell 3A[/td]
[/tr]
[tr]
[td]Cell 1B[/td]
[td]Cell 2B[/td]
[td]Cell 3B[/td]
[/tr]
[tr]
[td]Cell 1C[/td]
[td]Cell 2C[/td]
[td]Cell 3C[/td]
[/tr]
[/tbody]
[/table]

Implementation tip
Edit the styles in the divs below, not directly on the table.

On mobile, the table will have a fixed width and will scroll horizontally. This width can be changed via the "min width" property of the table element.

By default, on mobile there is 15px of whitespace to the left and the right edges of the table. You may change this by editing .c-ic-table-wrapper and .c-ic-table-wrapper__spacer

Edit styles here



Table

Header cell
Body cell




Table preview

Header cell 1 Header cell 2 Header cell 3
Cell 1A Cell 2A Cell 3A
Cell 1B Cell 2B Cell 3B
Cell 1C Cell 2C Cell 3C

Article footer CTA

Typically used to prompt the user to click on a link. This is populated in the CMS field “Footer CTA text”.

Implementation tip
The element on this page is set up as a rich text block. You can style the appearance of headings, paragraphs and links inside, and this styling will carry across to the articles.

You will need to publish the Information Centre article in order to see the shortcode transformation.