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.

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 with an icon: Just choose the second options from the Buttons elements section.

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: Add class 'btn-secondary' in the Attributes section.

Primary green button

To be used for transactional actions like linking to product pages or collections.

To use: Add class 'btn-green' in the Attributes section.

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 add class 'btn-action' in the Attributes section.

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.

Alerts & callouts

This is an info box ... be alert, but not alarmed.

This is to be used when wanting to highlight important information within pages that you want to make a bit more prominent for users to ensure they get the message.

This is an warning box

Use this to callout something that a customer should know in relation to the content they're looking at e.g. we have no PS5's but come back here to check or Contactless Collect is now on again because someone ate a bat.

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.

Product Anchor and collection buttons

Element: Row with columns inside     Attributes: class = anchor-tiles