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

  • ​Use decoration tag "mayon-button-small" to get a smaller button, you can apply this in combination with any of the other buttons style decorations from above.

BUTTON SMALL

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Morbi in facilisis libero, eget congue lorem. Nulla non ligula eget erat aliquam lacinia a eget felis.

  • Nulla turpis sapien, ultricies sit amet suscipit quis, auctor id risus. Donec pellentesque tellus metus, in eleifend lacus euismod eget. Vestibulum vehicula ut metus id vestibulum. 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. 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.

  1. Cras elementum lacinia tristique.

  2. Vestibulum nec sem sit amet velit lobortis accumsan ut eget lacus.

  3. Nulla eros ipsum, pellentesque sed vehicula id, pulvinar ut dolor.

  4. Proin facilisis ligula vel faucibus iaculis. Donec venenatis massa lorem, sed tempus libero vulputate nec.

  5. Vestibulum semper nibh id tortor dapibus, a pellentesque libero porttitor.

  6. Pellentesque id elit nulla. Duis congue hendrerit rhoncus.

  7. Vivamus accumsan tincidunt augue in sollicitudin. Cras sed augue eget elit semper interdum tristique at ligula. Aliquam vel pretium sem. Donec egestas nisi blandit congue pretium.

Blank