UI and Component Library

–base

–base-10

–base-20

–base-30

–base-40

–base-50

–base-60

–base-70

–base-80

–base-90

–base-100

–contrast

–contrast-alt

–accent

Heading 1, –h1, .h1

Heading 2, –h2, .h2

Heading 3, –h3, .h3

Heading 4, –h4, .h4

Heading 5, –h5, .h5
Heading 6, –h6, .h6

.text–3xl

.text–xxl

.text–xl

.text–l

.text–m

.text–s

.text–xs

.text–xxs

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

This is an H1 heading.

This is an H2 heading.

This is an H3 heading.

This is an H4 heading.

This is an H5 heading.
This is an H6 heading.

This is regular paragraph text. 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. Here is a link.

This is text in italics. 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.

This is text in bold. 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.

This is a pull-quote.

  • This is a bulleted list.
  • This is a bulleted list.
  • This is a bulleted list.
  1. This is a numbered list.
  2. This is a numbered list.
  3. This is a numbered list.

This is an HTML form.










Fluent Form styling

Contact Form Demo

GeneratePress global colors

–contrast
–contrast-2
–contrast-3
–base
–base-2
–base-3
–accent
Primary Button Primary Outline Button Secondary Button Secondary Outline Button

Colors

–surface-50

–surface-100

–surface-200

–surface-300

–surface-400

–surface-500

–surface-600

–surface-700

–surface-800

–surface-900

–primary

–primary-alt-light

–primary-alt-dark

–light-accent

–dark-accent