Dev | Icons | Page Design
Custom Icons
Here you’ll find a list of all custom icons available in the theme, along with the code snippet required to insert it, using the Custom HTML block. For details on how to add these to the page, see the Font Awesome section. Bionic Roundel Webinars Podcasts Articles Downloads Note that in these examples, there are…
Dev | Icons | Page Design
Font Awesome
We use Font Awesome to handle icons across the site. We have a Pro licence which is integrated directly into the theme, meaning all FA icons can be called directly in a page layout by adding an html block and typing the FA code, which can be found against the icon in the Font Awesome…
Dev | Guidelines | Page Design
Typography
Previous iterations of the brand used the Poppins typeface exclusively. With the Bionic version of the theme, we have introduced a serif font (Neuton) which is used for headers. When writing content, the theme will automatically apply the default styles and typeface to headers and paragraph text respectively, so in most cases, you don’t need…
Tabs
The Tabs block allows you to insert tabbed content within the confines of a standard page layout. The initial design options are as follows Since this is a third-party block, it doesn’t automatically inherit the theme styles, and will default to a blue tab. The hover background should always be updated to the brand orange…
Modal
The Modal block is available if you need to have some popup text on your page. If added, in the editor field it will look like this: Useage
Button
Button Primary Button-Primary Disabled Button-primary Hover Button Secondary Button-Secondary Disabled Button-Secondary Hover Button Tertiary Button-Tertiary Disabled Button-Tertiary Hover
Accordion
If you wish to break up content on your page, as well as the Tab block, the Accordion block is available.