Banner Default Image

Typescale Test Page

Heading 1 H1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading 2 H2 Morbi in facilisis libero, eget congue lorem.

Heading 3 H3 Nulla non ligula eget erat aliquam lacinia a eget felis.

Heading 4 H4 Nulla turpis sapien, ultricies sit amet suscipit quis, auctor id risus.

Heading 5 H5 Donec pellentesque tellus metus, in eleifend lacus euismod eget.
Heading 6 H6 Vestibulum vehicula ut metus id vestibulum.
​
  • ​Use decoration tag "mayon-lead-text" to get a lead paragraph text area.

Paragraph Nam vulputate sapien sit amet tempor efficitur. Donec dictum tellus nec leo fringilla, eu tempor neque posuere. Integer porta, velit quis interdum ultricies, quam enim suscipit eros, quis ornare metus ante vitae est.

​

  • ​This is just your normal paragraph and website body font sizing for visual comparison.

Sed quis dignissim justo, at ultrices urna. Suspendisse gravida, tortor sed semper tristique, erat metus vulputate augue, quis tempor mi nisi vitae magna. Donec auctor fermentum magna, ut feugiat odio tincidunt sit amet. Donec accumsan lorem mi, ut placerat ex lacinia vel. Nullam ut magna feugiat, ornare nibh vel, tincidunt nisi.Fusce tincidunt malesuada posuere.

​

  • ​Use decoration tag "mayon-small-text" to get a text area that is smaller text, ideal for using on disclaimer, or less important text that fits under a form.

this is going to be your small text! for disclaimers and copyright

    • ​Use decoration tag "mayon-display-1" to get a display text that can be an emphasis or a spotlight heading. You have 4 Display text available and these can be used anywhere on the site within an editable text area like this.

Display Text 1

    • ​Use decoration tag "mayon-display-2" to get a display text that can be a emphasis or a spotlight heading.

Display text 2.​

    • ​Use decoration tag "mayon-display-3" to get a display text that can be a emphasis or a spotlight heading.

Display Text 3

​

  • ​Use decoration tag "mayon-display-4" to get a display text that can be an emphasis or a spotlight heading.

Display text 4

​

  • ​Use decoration tag "mayon-button-large" to get a button added, after you have created a hyperlink. This is your primary button styling but as large button that can be applied.

BUTTON LARGE​

​

  • ​Use decoration tag "mayon-button" to get a button added, after you have created a hyperlink. This is your primary button styling across the website.

BUTTON PRIMARY

​

  • ​Use decoration tag "mayon-button-inverse" to get a button added, after you have created a hyperlink. This button is an inverse from the default button.

BUTTON SECONDARY

​

  • ​Use decoration tag "mayon-button-outline" to get a button added, after you have created a hyperlink. This is your outline button styling across the website

BUTTON OUTLINE