Programmatic or user selection of a culture.
Selects a random photo from lorempixel.com.
A text area that expands to contain its text.
Shows its content inside a simple button.
A calendar showing a single month. Highly customizable.
A month calendar with month name, year, and day of week headings. Locale-
specific calendar preferences are automatically localized via the
library of 300+ cultures.
An input area with a dropdown arrow that invokes a popup. This is intended for
use as base class for custom combo boxes.
You can populate a popup like this with choices for the user to pick.
Shows its content at the largest size that maintains the aspect ratio
specified by its aspect attribute.
Quetzal is a collection of general-purpose standards-based HTML web components.
This is not a framework, just a set of reusable HTML elements created with new
standards. You can add these elements to your own web applications.
The Quetzal source code is on GitHub.
The Quetzal element collection relies on Google's Polymer
project to support aspects of custom elements which are not yet supported in
For the time being, use Google Chrome Canary to view this page.
Results are also more predictable if you open chrome://flags and Enable
Experimental Platform Features.
This box has a 1:2 aspect ratio.
A scrolling surface that adds elements as necessary to ensure the user can
continue scrolling indefinitely. By default, simply repeats its content, but
can also be extended to load data or perform other work when new items are
A list of items that supports single selection and keyboard navigation
(Up/Down, Page Up/Down, Home/End).
A combo box in which choices are rendered in a dropdown list box.
A button which, when clicked, shows a popup which
is positioned above or below the button.
Here's the popup
Click for a popup
A base class for elements which produce a popup
when clicked. See also popup-button.
Here's the popup
A highly-customizable week calendar. See also quetzal-calendar-month.