Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

Element List

This is a checklist of different visual design aspects (“elements”) of a page on the site, including structural features, tables, navigation, controls, and so on.

This table includes early mockups (Style Tile 01, Style Tile 02, Style Tile 03), as well as the final page design (Style Tile Revised).

Other Formats

Table

Element Name/Description Style Tile 01 Style Tile 02 Style Tile 03 Style Tile Revised Notes/Comments
Header ✓ ✓ ✓ ✓
Page Title, H1 ✓ ✓ ✓ ✓
Section header, H2 ✓ ✓ ✓ ✓
Section header description (indented) ✓ ✓ ✓ ✓
Subhead, H3 ✓
Definition list ✓ ✓ ✓ ✓
Body copy ✓ ✓ ✓ ✓
In-site textual hyperlinks ✓ ✓ ✓ ✓
External hyperlink ✓ An icon showing a jump to a new site
Textual link hover states Create a hover states reference document
Code sample ✓
Elements and properties ✓ ✓ ✓ ✓
Unordered list ✓
Ordered list ✓
Global navigation ✓ ✓ ✓ ✓
Global navigation expanded view Requires an understanding of finalized site structure
Secondary navigation
  • article/page level anchors
✓ (2 options)
Secondary navigation element hover state Create a hover states reference document
Page level navigation and tools, authorized
  • page tools: page, discussion, edit (edit page, move page, upload file, page history), watch, refresh, print, link
  • utility: username, my talk, my preferences, my watchlist, my contributions, sign out
  • page info: what links here, related changes, browse properties
  • site info: special pages, recent changes, random page
✓
Page level navigation and tools, unauthorized
  • actions: page, discussion, edit (view source, page history)
  • utility: sign in
  • page info: what links here, related changes, browse properties
  • site info: special pages, recent changes, random page
✓
Tools button hover states Create a hover states reference document
Breadcrumb ✓ ✓ ✓ ✓
Breadcrumb link hover states Create a hover states reference document
Footer
Page details (last modified on, by, etc.)
Article tags
Table ✓
Horizontal tabs (within article) For example, to show browser compatibility for Desktop and Mobile
Flags: like "deprecated", full list required here
Top of article blockquote
In page note block ✓
In page warning block ✓
Search field ✓
Form?