Example: Style Guide

Below is a style guide containing examples of all elements and layouts.

Select multiple (Select2)

One

This is a description.

Two

This is a description.

Three

This is a description.

Date/time

Date list

Date list: Year

Date list: Month

Date list: Day

Date list: Hour

Date list: Minute

Email multiple

Multiple email addresses may be separated by commas. Emails are only sent to cc and bcc addresses if a To email address is provided.

Telephone (International)

Text format

About text formats

Restricted HTML

Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
Lines and paragraphs break automatically.
Web page addresses and email addresses turn into links automatically.

File upload

One file only.
8 MB limit.
Allowed types: gif jpg jpeg png bmp eps tif pict psd txt rtf html odf pdf doc docx ppt pptx xls xlsx xml avi mov mp3 mp4 ogg wav bz2 dmg gz jar rar sit svg tar zip.

File upload multiple

Unlimited number of files can be uploaded to this field.
8 MB limit.
Allowed types: gif jpg jpeg png bmp eps tif pict psd txt rtf html odf pdf doc docx ppt pptx xls xlsx xml avi mov mp3 mp4 ogg wav bz2 dmg gz jar rar sit svg tar zip.

File upload button

Choose file

One file only.
8 MB limit.
Allowed types: gif jpg jpeg png bmp eps tif pict psd txt rtf html odf pdf doc docx ppt pptx xls xlsx xml avi mov mp3 mp4 ogg wav bz2 dmg gz jar rar sit svg tar zip.

	Table select
One	One
Two	Two
Three	Three

	Tableselect sort	Weight
One	One	Weight for One
Two	Two	Weight for Two

Table sort	Weight
One	Weight for One
Two	Weight for Two
Three	Weight for Three

inches

Signature

Sign above

I agree to the terms of service.

These are the terms of service.

Likert

Questions	1	2	3	4	5
Please answer question 1?	1	2	3	4	5
How about now answering question 2?	1	2	3	4	5
Finally, here is question 3?	1	2	3	4	5

Entity autocomplete tags

Entity autocomplete multiple

Entity autocomplete multiple
	Entity autocomplete multiple	Item weight

more items

Entity select multiple

Term select multiple

Second address same as the first address

Link multiple

Re-order	Link Title	Link URL	Weight	Operations
	Link Title	Link URL	Item weight

more items

Custom composite

Re-order	First name	Last name	Sex	Martial status	Employment status	Age	Weight	Operations
	First name	Last name	Sex Sex Enter other…	Martial status Martial status Enter other…	Employment status Employment status Enter other…	Age	Item weight

more items

Form element $ .00

{description}

Form element (Required)

Form element (Disabled)

Form element (Input mask: Phone)

Form element (Input hiding)

Title displayed before

This is a description.

Title displayed after

This is a description.

Title with help (tooltip)

Title displayed inline

This is a description.

Description displayed before

This description is displayed before the input.

Description displayed in tooltip

Description with (read) more

This is a description.

This is more text

Table

First Name	Last Name	Gender
First name (1)	Last name (1)	Gender (1)
First name (2)	Last name (2)	Gender (2)
First name (3)	Last name (3)	Gender (3)

Restricted HTML

Section