Example Style Guide

Current Start
Preview
Complete

1 of 3 (0%)

Indicates required field

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

Basic elements

Date elements

Date

Date/time

Date list

Date picker

Time

Advanced elements

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.

Confirm email

Telephone

Telephone (International)

URL

Number

Range

$ .00

Color

Text format

File upload

One file only.
30 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.
90 MB limit per form.

File upload multiple

Unlimited number of files can be uploaded to this field.
30 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.
90 MB limit per form.

File upload button

Choose file

	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

Autocomplete

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 reference elements

Entity autocomplete

Entity autocomplete tags

Entity autocomplete multiple

Entity autocomplete multiple
	Entity autocomplete multiple	Item weight

more items

Entity checkboxes

Administrator

Anonymous

Entity radios

Administrator

Anonymous

Entity select

Entity select multiple

Term checkboxes

Term select

Term select multiple

Webform composites

Addresses

First address

Address

Address 2

City/Town

State/Province

ZIP/Postal Code

Country

Second address same as the first address

Second address

Address

Address 2

City/Town

State/Province

ZIP/Postal Code

Country

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	Gender	Martial status	Employment status	Age	Weight	Operations
	First name	Last name	Gender Gender Enter other…	Martial status Martial status Enter other…	Employment status Employment status Enter other…	Age	Item weight

more items

Form elements

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 with (read) more

This is a description.

This is more text

Containers elements

Details

This is a description.

Fieldset

This is a description.

Section

This is a description.

Form inline 01

Form inline 02

Container inline

Dividers

Messages

Flexbox

Element (Flex: 1)

Element (Flex: 2)

Element (Flex: 3)

Contrib modules

Address

@see https://www.drupal.org/project/address