Components

Defined and flexible design style we can use on each elements.

Button

Basic Buttons

Get Started

Primary

Button
Primary
Get Started

Primary Small

Button
Primary Small
Get Started

Primary Large

Button
Primary Large
Get Started

Secondary

Button
Secondary
Get Started

Secondary Small

Button
Secondary Small
Get Started

Secondary Large

Button
Secondary Large
Get Started

Outline

Button
Outline
Get Started

Outline Small

Button
Outline Small
Get Started

Outline Large

Button
Outline Large
Get Started

Text

Button
Text
Get Started

Text small

Button
Text Small

Invert Buttons

Get Started

Primary

Button
Invert - Primary
Get Started

Primary Small

Button
Invert - Primary Small
Get Started

Primary Large

Button
Invert - Primary Large
Get Started

Outline

Button
Invert - Outline
Get Started

Outline Small

Button
Invert - Outline Small
Get Started

Outline Large

Button
Invert - Outline Large
Get Started

Text

Button
Invert - Text
Get Started

Text Small

Button
Invert - Text Small

Icon

Icon by IMAGE

icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-xxlarge
icon-height-huge
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-xxlarge
icon-1x1-huge

Icon by SVG CODE

icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-xxlarge
icon-embed-huge

Icon by Component

MAST V2.0

XXSMALL

Icon
xxSmall

XSmall

Icon
xSmall

SMALL

Icon
Small

BASE

Icon
Base

Medium

Icon
Medium

Large

Icon
Large

xLarge

Icon
xLarge

xxLarge

Icon
xxLarge

Customise

Icon
Customise
Go to the Icon section of Variable and change the value of Custom to desired size.

Form

MAST V2.0
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.
*Required

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Interactive

Accordion

MAST V2.0

Modal

MAST V2.0

This uses an HTML <dialog> to get all of the accessibility benefits for free. The modal should always come before the button that opens it. To update the modal contents, select it in the navigator, and add any value to open attribute in the element settings.

This is a modal!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Get Started
Get Started

Content

Eyebrow

MAST V2.0
Lorem ipsum

Breadcrumb

MAST V2.0

Card

MAST V2.0

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

card-body

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

card-body-box

Rich Text

MAST V2.0

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Image caption here
Block quote (same font size as paragraph-1.25)

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Inline code

Superscript

Subscript

Global

Nav Banner

MAST V2.0

Nav

MAST V2.0

Footer

MAST V2.0

Build Mode

Section

MAST V2.0

Container

MAST V2.0

Grid

MAST V2.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Content

MAST V2.0

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.