EverWeb Widgets HTML5

HTML5 List

HTML5 List Widget

Styled List

This widget will create various types of styled list in an HTML5 Section, Aside or Article element with HTML heading, lead in paragraph and up to 12 list items.

  • Select the HTML5 container type and enter the font family name.
  • Check the box if the font is Google hosted and choose a web safe fallback font, container background color, corner radius, shadow color and shadow radius.
  • Enter the heading text and set its background color, font size, color, style, weight and text align.
  • Enter the lead in parargraph text if required and set the font size and color for this and the list items.
  • Select the list style type from disk, circle square, none, decimal, decimal leading zero, lower alpha and upper alpha.
  • Set the position of the bullet points etc to inside or outside. Use outside if the list items extend to more than one line.
  • Set the list item's inset margin and vertical spacing.
  • Enter the list items in the boxes provided and check the "display" box for each one.
  • Set the hyperlink styles.

Widget Settings

HTML5 Heading Widget
HTML5 List Widget

Usage

The section element is the most used one on a web page but there are instances when the Article element is more appropriate.
This could be a list of instructions which make sense on their own and can be be transferred to another page or website as is.
An article element can be seen as a portable unit of information in much the same way that a blog post is - or should be!

Using An Aside

An HTML5 Aside element is used for content that is related to that of the web page but is not absolutely necessary.
The aside is normally used as a sidebar containing extra info or, more likely, links to other pages with related content.
The list widget can be used in "Aside" mode for this type of sidebar when a list of references and hyperlinks to other pages is required.

Get The Widget