Style Guide
A complete guide to MnK's modular interface elements.
Colours
A complete colour swatch used to colour all interface elements on the website.
Theme Colours
Primary 1
#4ea295
Primary 2
#044362
Greys
Grey 1
#272929
Grey 2
#62636B
Grey 3
#ECEBEA
Grey 4
#f8f6f4
Accents
Accent 1
#f47648
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six – Class H6 Small
Text Large   
Link Large
This is some text inside of a div block.
日本語
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six – Class H6 Small
Text Large   
Link Large
This is some text inside of a div block.
Lists
Headings, body and other common text elements.
Unstyled
  • Apples
  • Oranges
  • Bananas
Japanese Lists
Headings, body and other common text elements.
Unstyled
  • Apples
  • Oranges
  • Bananas
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Default Styles
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Japanese
Form Inputs
Styles for form inputs and form feedback states.
Default Styles
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich Text
Styles for rich text and media
Default Styles

Title Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • List Item 1
  • List Item 2
  • List Item 3
Image caption here

Title Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • List Item 1
  • List Item 2
  • List Item 3
Image caption here

Title Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item with link
Image caption here

Title Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • h text
  • h text
  • h text
  • text with a link

Voila!

Static and dynamic content editing
Static and dynamic content editing
Image caption here

Title Heading 1

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • h text
  • h text
  • h text

Voila!

Static and dynamic content editing
Static and dynamic content editing
Image caption here
Block Quote
JS Bin ; ;