HEADINGS

h1 Main page heading

h2 heading

h3 heading

h4 heading

h1 in jb callout

h2 in jb callout

h3 in jb callout

Element: Header or Paragraph texr     HTML tag: H1 or p     Attributes: class = tag

I'm a LIL' tag heading!

Styled headings

Here's how to make our brand headings using JB Callout or Crazy font

Element: Header     HTML tag: H1     Attributes: class = boxit

Boxed JB callout heading

crazy standard heading!

crazy boxed heading!

text

To use: In the Style tab on the right select Style 2 Intro.

This is some page intro text that stands out to start the top of the page or a section to introduce what we're talking about. 

This is a standard paragraph in all its consistent glory with the rest of our website. To fill some space, we'll hand over to Bogun Ipsum to do the talking. Paddock stonkered gyno rubbish spit the dummy stickybeak. Mate gyno arvo bizzo. Fisho dunny slappa chook jug gobful waggin' school. Mickey mouse mate fairy floss going off roadie. Boozer stoked no dramas strewth cracker ciggies jug jillaroo not my bowl of rice spag bol. Lets get some rack off brumby billy freckle bottlo mokkies. Paddock middy coathanger roadie bingle smoko dead horse. This is a standard text link

• This is actual text
• This is actual text
• Wow this is also actual text

• This is actual text
• This is actual text
• Wow this is also actual text

Element: List
Attributes: class = tickit

Add the class above to the whole List element to make the JB tick icons replace the bullet points.

• This is actual text
• This is actual text
• Wow this is also actual text

To use disclaimer style: Select the Style tab on the right and choose Style 4 Disclaimer

* I'm a disclaimer paragraph that shows a little smaller but is still clear to read and still AA compliant for accessibility to cater for vision impaired users. This is a link

buttons & call to actions

Here's our money makers. Keep them Sentence case unless linking to an official product or service name. e.g. 'Shop all Google products' or 'How Click & Collect works'

Fun fact: Title case is slower for the human brain to read. See article

Primary default button

Primary button: Select Primary from the Global style list.

Secondary button

To be used secondary call to actions when there are already primary actions present or you have secondary information with equal call to actions.

To use: Select Secondary from the Global style list.

Primary green button

Primary button: Select Transactional green from the Global style list.

Action links

These are action links with an icon for secondary call to action or content links when you're already using a primary or secondary button in the same section. e.g. Buy now being a primary button vs Learn more being this style indicating to the user it will lead to more content.

To use: Choose 'Button with icon' from the elements and select with icon from the Global style list.

anchor links

Element: List     Attributes: class = anchor-nav

To use: Grab this from Saved sections area and just change the text and section link for each list item.
To set the first item as active add class = anchor-active to the first list item.

Tabs

Accordions

Windows 11

Introducing Windows 11

A new Windows experience, bringing you closer to the people and things you love.

Microsoft Surface

Get started with confidence

Work smart and be productive with hardware and software designed to help you stay connected and get things done the way you want to.

callouts

Element: Row, Column or Block     Attributes: class = callout

Cards & content tiles

Just grab me from the Saved sections area through the folder icon on the left.

Name: Content - Tiles
Attributes and setup: The outer column must have a class = card and everything under the image must be in a Block element to bring in correct padding and let the image be full bleed at the top.

Category links

Just grab me from the Saved sections.