Components

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

Button

Basic Buttons

Primary

Button
Primary

Primary Small

Button
Primary Small

Primary Large

Button
Primary Large

Secondary

Button
Secondary

Secondary Small

Button
Secondary Small

Secondary Large

Button
Secondary Large

Outline

Button
Outline

Outline Small

Button
Outline Small

Outline Large

Button
Outline Large

Text

Button
Text

Text small

Button
Text Small

Invert Buttons

Primary

Button
Invert - Primary

Primary Small

Button
Invert - Primary Small

Primary Large

Button
Invert - Primary Large

Outline

Button
Invert - Outline

Outline Small

Button
Invert - Outline Small

Outline Large

Button
Invert - Outline Large

Text

Button
Invert - Text

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.

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.