• Home
  • Tools
    • View all [0]
    • Shopping Tools
          • test
          • test 2
        • test 3
  • Reference
    • Icons
  • Tests
    • Locations
    • Form Test
    • Custom HTML Snippets
    • Payment Calculator
    • Porsche Header Test
  • blog
  • UI Guidelines
BMartin's Playground logo
  • Home
  • Tools
    • View all [0]
    • Shopping Tools
        • test
        • test 2
      • test 3
  • Reference
    • Icons
  • Tests
    • Locations
    • Form Test
    • Custom HTML Snippets
    • Payment Calculator
    • Porsche Header Test
  • blog
  • UI Guidelines
Home / UI Guideline

Colors

Buttons

Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button
Primary Button Secondary Button Tertiary Button Quaternary Button Quinary Button

Typography

H1 Headline 1

H2 Headline 2

H3 Headline 3

H4 Headline 4

H5 Headline 5
H6 Headline 6


H1 Headline 1

Body Copy Lorem Ipsum with inline links with default styling.

H2 Headline 2

Body Copy Lorem Ipsum with inline links with default styling.

H3 Headline 3

Body Copy Lorem Ipsum with inline links with default styling.

H4 Headline 4

Body Copy Lorem Ipsum with inline links with default styling.

H1 Headline 1

H5 headline 5 makes a good subheadline

Body Copy Lorem Ipsum with inline links with default styling.

H2 Headline 2

H5 headline 5 makes a good subheadline

Body Copy Lorem Ipsum with inline links with default styling.

H3 Headline 3

H5 headline 5 makes a good subheadline

Body Copy Lorem Ipsum with inline links with default styling.

H4 Headline 4

H6 headline 6 makes a good subheadline

Body Copy Lorem Ipsum with inline links with default styling.

Lists & Tables

H1 Headline 1 Unordered Lists

H5 headline 5 makes a good subheadline
  • Body Copy Lorem Ipsum with inline links with default styling.
  • Body Copy Lorem Ipsum with inline links with default styling.
  • Body Copy Lorem Ipsum with inline links with default styling.

H2 Headline 2 Unordered Lists

H5 headline 5 makes a good subheadline
  • Body Copy Lorem Ipsum with inline links with default styling.
  • Body Copy Lorem Ipsum with inline links with default styling.
  • Body Copy Lorem Ipsum with inline links with default styling.

H3 Headline 3 Ordered Lists

H5 headline 5 makes a good subheadline
  1. Body Copy Lorem Ipsum with inline links with default styling.
  2. Body Copy Lorem Ipsum with inline links with default styling.
  3. Body Copy Lorem Ipsum with inline links with default styling.

H4 Headline 4 Ordered Lists

H6 headline 6 makes a good subheadline
  1. Body Copy Lorem Ipsum with inline links with default styling.
  2. Body Copy Lorem Ipsum with inline links with default styling.
  3. Body Copy Lorem Ipsum with inline links with default styling.

H3 Headline 3 Paragraph Tables

H5 headline 5 makes a good subheadline

Body Copy Lorem Ipsum with inline links with default styling.

Inserted Table
Paragraph Module
Alternate Rows
Adjustable Columns
Adjustable Styles
Automatic Header
Default Settings
Default Colors
Custom Colors
Combine/Merge Cells
Split Cells
Border Styles



H4 Headline 4 Block Quote

H6 headline 6 makes a good subheadline

Body Copy Lorem Ipsum with inline links with default styling.

Block Quote Standard Style Lorem Ipsum Te usu justo mazim equidem, an tantas possim volutpat quo, duo summo nonumy menandri no. Cum ea chor saepe populo, ius blandit dignissim ne, an eam hinc hendrerit. Ad simul recusabo conceptam qui, pro ea semper commodo. Ne vide dolore has, mea ne dictas quaeque.

Popups

H3 Headline 3 Popup Links

H5 headline 5 makes a good subheadline

A standard contact form popup is linked for preview - if url is not found you are missing the contact popup form - relink the button to test.
Test the effect below:

Popup Test

H4 Headline 4 Popover Links

H6 headline 6 makes a good subheadline


It is not possible to achieve the popover effect in inline text.
You may test the effect with the Header Module Hours or the Department Hours Theme1 module.
The module has been added below - if nothing displays you need to edit the module and add at least 1 department for testing.