Form Builder design reference form

Heading XXL

DPP design has six levels of headings, namely, XXL, XL, L, M, S and XS. This FormAssembly theme has use the css classes of heading-xxl, heading-xl, heading-l, heading-m, heading-s and heading-xs to implement the heading styles.

Please note those classes won't set any margins for the headings. To set spaces between those headings, please use the margin utility classes. For vertical margins, please use my-0, my-1, my-2, my-3, and my-4. The space is using rem as unit and incremented by 0.25rem each step.

Link to Figma Design

Heading XL

Heading L

Heading M

Heading S
Heading XS

Labels

Section Heading Medium

Section Heading Large

Body Text/Regular

Large text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large text italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular text italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Text/Medium not working, need to get the fonts with 500 wight

Large text Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular text Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text Medium. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large text Medium italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular text Medium italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text Medium italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Body Text/Bold

Large text bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular text bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text bold. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large text bold italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Regular text bold italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text bold italic. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Links

Normal weight

Hyperlink Default Large
Hyperlink Default Large
Hyperlink Default Large

Medium weight

Hyperlink Default Large
Hyperlink Default Large
Hyperlink Default Large

Bold weight

Hyperlink Default Large
Hyperlink Default Large
Hyperlink Default Large

Normal weight - Italic

Hyperlink Default Large
Hyperlink Default Large
Hyperlink Default Large

Medium weight - Italic

Hyperlink Default Large
Hyperlink Default Large
Hyperlink Default Large

Bold weight - Italic

Hyperlink Default Large
Hyperlink Default Large
Hyperlink Default Large

Ordered List - TBC

  1. Ordered List Item one
  2. Ordered List Item two

Unordered List - TBC

  • Unordered List Item one
  • Unordered List Item two

Table

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Alerts

Warning Panel
Info Panel
Error Panel

Inputs


Hint text for text input

Hint text for text area

Hint text for file upload, plain text only by default

Hint text for password input, plaint text by default

Hint Text for Drop Down Menu. The placeholder is the first selection on the list and the text is not configurable.

Hint text for Multi-Select List. The placeholder is the first choice on the list and the text is not configurable.

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons
Option 1 Option 2 Option 3 Option 4 Option 5

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons

Hint text for Radio Buttons
Option 1 Option 2 Option 3 Option 4 Option 5
Field Set



Text input Text input Checkbox Checkbox


















Contact Information

Acknowledgement of Country

UTS acknowledges the Gadigal people of the Eora Nation, the Boorooberongal people of the Dharug Nation, the Bidiagal people and the Gamaygal people, upon whose ancestral lands our university stands. We would also like to pay respect to the Elders both past and present, acknowledging them as the traditional custodians of knowledge for these lands.