# Plone User Interface elements test page

This page lists the common user interface elements that exist in Plone, and shows you how they are rendered. It also tests a couple of common Internet Explorer rendering bugs, so you can see if your changes have triggered any bad behaviour on this front.

- Typography
  - Headings
  - Body copies
  - Lists
- Code
  - Inline Kbd, Code
  - Block Pre
- Tables
- Forms
  - Basic
  - Checks and radios
  - Buttons
  - Groups
- Alerts
  - Standard
  - Deprecated
- Listing bar

# Typography

## Headings

# Headline h1

# Headline documentFirstHeading

## Headline h2

### Headline h3

#### Headline h4

##### Headline h5

###### Headline h6

Paragraf line p

## Body copies

### Paragraph, strong, em, abbr, a links, documentDescription, address

Normal document body text, strong text, emphasised text, abbr. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo. Vestibulum vitae urna et mi volutpat luctus. Nulla auctor, lacus ut consectetuer sagittis, erat odio vulputate sapien, eu placerat diam mauris id turpis. Aenean quis ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque rutrum. Sed mattis turpis sit amet ipsum viverra pharetra. Nunc facilisis, augue non dapibus gravida, risus quam vulputate quam, non venenatis dui massa in leo. Maecenas scelerisque dapibus libero. Suspendisse potenti. example Normal internal site link inside a paragraph, example External link to plone.org, example Secure (HTTPS) link to plone.org, example Mailto link, example FTP link, example NNTP (news) link, example WebCal link, example RSS feed link, example IRC link.

Discreet paragraph

The document description
by admin — last modified May 21, 2010 10:02 AM — History

DocumentByLine is not used anymore on the content Moved to plonebar

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

## Lists

### Ul, Ol, Dl DL is deprecated in Plone as a builder element

- Unordered list element 1
  - Unordered list subelement 1
- Unordered list element 2
- Unordered list element 3

1. Ordered list element 1
   1. Ordered list subelement 1
2. Ordered list element 2
3. Ordered list element 3

Definition list term
  Definition List description, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo.
  Another Definition List description, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque odio sem, aliquam ut, suscipit at, aliquet non, justo.

# Code

## Inline Kbd, Code

### Kbd, Code

`kbd` `code`

    Example document code inside pre

## Block Pre

### Pre with code in it

    Example document code inside pre

# Tables

## Plone tables styles

### Table

Table | Another heading (sortable, click to sort) | Fixed column (not sortable)
--- | --- | ---
Odd table item | Item 1 | Another item
Even table item | Item 2 | Yet another item
Odd table item | Item 3 | And one more item

### Table .listing

.Listing | Another heading (sortable, click to sort) | Fixed column (not sortable)
--- | --- | ---
Odd table item | Item 1 | Another item
Even table item | Item 2 | Yet another item
Odd table item | Item 3 | And one more item

### Table .vertical

.vertical.listing | Odd table item
Another heading | Even table item

# Forms

## Basic

Fieldset legend
Text field (Required)
This is the help for this form field. And links are also possible.
Text field with error (Required)
This field is just here to demonstrate an error message.
This is the error message.
File input

Example block-level help text here.

Select
Select Multiple
Textarea

## Checks and radios

Fieldset legend
Checkbox (Required)
This is a checkbox field.
Checkbox with error (Required)
This checkbox field is just here to demonstrate an error message.
This is the error message.
Checkbox without border (Required)
This is a checkbox field.
Checkbox without border with error (Required)
This checkbox field is just here to demonstrate an error message.
This is the error message.
Radio (Required)
This is a checkbox field.
First
Second
Third
Radio with error (Required)
This checkbox field is just here to demonstrate an error message.
This is the error message.
First
Second
Third

## Buttons

Fieldset legend

## Groups

Replaces Plone4 input+submit group

# Alerts

## Standard alerts

Non defined You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.
Info You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.
Warning You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.
Error You have not configured a mail host or a site 'From' address, various features including contact forms, email notification and password reset will not work. Go to the Mail control panel to fix this.

## Deprecated alerts

Alerts in DL not anymore Changed

Warning
  The portalMessage 'warning' class, can also contain links - used to give the user temporary status messages.

# Listing bar

## Plone pages listings

Need to be changed in structure a correct markup Must be changed

Appears on search page

« Previous 10 items Next 10 items » 1 [2] 3 4 5 6 7 8

Navigation

# Welcome!

Plone 5 rocks!

Learn more

#### in portlets

Portlet header

- Item one
- Item two

If a portlet has only one item:
Portlet header
There might be a login form here.

#### in listings

Item one

Description

Item two

Description

## Table with form elements

| Title | Stuff
--- | --- | ---
| Title | with class noborder
| Title | with class noborder

## Collapsible form

New items since
Return items added since you were last logged on, the last week, etc.
Author
Return items created by a particular person.

## Select All/None

Item type
Return items of a specific type.
Select All/None
Page
Folder
Collection

## Action menu

Action menu title
  Menu content

## Collapsible section

Collapsable section title
  Collapsible section content

## The Internet Explorer "Peekaboo" bug

Also known as the "disappearing text" bug. Full explanation of this bug can be found on the page dedicated to this at positioniseverything.net.

## Widgets

Content to be edited

Float
test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
This is text inside a div. Test link
This is bare text. Test link
Clearing div
This div is after the cleared div. (purple box) If cleared div does not touch float, bug is not triggered. Test link