Responsive Mega List

Description

This list widget uses the EverWeb Assets List to quickly compile a list with different styles.
The list will accomodate up to 100 items and can have styled, finger sized tab links with contrasting background. Hover colors can be set for full site use.

Full Width Mega List Widget

This widget is included in the Full Width widget pack.

The image is a 1px square transparent PNG which is in the download folder. Drag it into Assets where it will appear as "001-list.png".

  • Check the Full Width box in the Metrics inspector and set the maximum width.
  • Check the box to show the lead in text which can be configured as a heading by centering it or as a lead in paragraph by aligning it left.
  • Use the "Choose" button to add a list item. Highlight it in the Assets List but do NOT double click. Enter the text into the "List Item" box.
  • Choose the list style type and set the list item inset from the left margin.
  • Enter the font family name, check the box if it is Google hosted and choose a suitable web safe fallback font.
  • Set the text font size and the list font size.
  • Use the value for "Line Height" for adjusting the vertical spacing of the list items. This should be at least 28px if text hyperlinks are being used in any of the items.
  • Choose the font color.
  • Choose the HTML5 container type. This can be article, aside or section.
  • Set the container background color, its opacity and the overall padding.
  • Set the container's border width, color and corner radius if required.
  • Set a box shadow radius and color if required.
  • Hyperlinks can be inserted using HTML as shown in the next item…
  • <a href="page-name.html">Link Text</a>
  • Use target="_blank"> to open the link in a new window like this …
  • <a href="page-name.html" target="_blank">Link Text</a>
  • Set the hyperlink color, hover color and text decoration.
  • Set a contrasting background color for touch device users to more easily access the link.
  • Set the hyperlink's padding so that the tab is at least 32px wide and 28px in height as shown in the example below …
  • Ask your questions about EverWeb and widgets in the USER FORUM so that the rest of the community will benefit from this valuable resource.

EverWeb Widgets