Example: Style Guide

Current 1 - Start
2 - Preview
3 - Complete

1 of 3(0%)

Indicates required field

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

Date

Date/time

Date list

Time

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

Color

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

Upload

One file only.
100 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

Upload

Unlimited number of files can be uploaded to this field.
100 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 fileUpload

	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

Nazioni

CodeMirror

a = 1
b = 2
c = a + b

print c

Rating

Signature

Sign above

I agree to the terms of service.

These are the terms of service.

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

Height

feet

inches

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

Addresses

Address

Address 2

City/Town

State/Province

ZIP/Postal Code

Country

Second address same as the first 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	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.

This description is displayed before the input.

Description displayed before

Description with (read) more

This is a description.

This is more text

This is a description.

Fieldset

This is a description.

Section

This is a description.

Form inline 01

Form inline 02

Container inline

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)

Element (Flex: 1)

Element (Flex: 2)

Element (Flex: 3)

Address

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

Restricted HTML

Section

Contatti

Lorem ipsum

Lorem ipsum

Example: Style Guide

Basic elements

Date elements

Advanced elements

Restricted HTML

Entity reference elements

Webform composites

Form elements

Containers elements

Details

Section

Dividers

Messages

Flexbox

Contrib modules