ThemeKit UI

Details Article

Extra Info

Details

The ThemeKit UI Details Article is a really simple and efficient way to add extra info to an item while keeping the on load in view content to a minimum.

Accordion

Details

HTML <details> Tag

The tag specifies additional details which can be open/closed without resorting to Javascript.
The <details> tag can be used to create an interactive widget that the visitor can open and close. It is closed by default and will open to display the content.

Summary

HTML <summary> Tag

The <summary> creates a heading for the <details> element which can be clicked to show/hide the details.

Open

[open] Attribute

The <details> can be visible on page load or for edting on the EverWeb design canvas by inserting the [open] attribute.

Styles

Summary

The summary has controls for font size, color, background color and border-radius.

Content

Summary Content

The container, heading and text have the same styles as the <article> in the grid.

Container

Type

The <details> elements are contained in an HTML5 <aside> which is centered and can be reduced in width by adding a value for maximum width.

Accordion Style

Auto Close

To close an open item when another is open just check the "Create Accordion" box.

List Upgrade

Lists have a number of style types the most common being "disc" which is often erroneously referred to as "bullet points". There is no such thing as a "bullet" in web design!
List style types like disc, square and circle are not very user friendly if there are more than a few items in the list.
The basic browser generated stye types cannot be style so, for a more professional appearance when need to use some less common CSS properties.
The ThemeKit UI List can created suto generated numbers with a prefi if required. The markers can be round, square or rectangular and have quite a few styling options.

ThemeKit UI List

The ThemeKit UI List widget has a heading, two optional paragraphs, two optional links and a list with custom incremental markers

The marker is a CSS pseudo element
The numbers appear automatically as list items are added
The number can have an optional prefix - letter or number - if required
Markers have controls for width, height, font size and color, background, border radius, a checkbox to make them round/oval & a control to adjust the spacing between the marker and the link item text. spacing
List item text has controls for font size, color, line height and list item spacing
The list items and their markers have a control to adjust the inset
The list items are created using a two column CSS grid layout . The marker is in column one. When the list item text runs to two or more lines the marker's vertical position can be sett to the top or - in this case - be aligned center
The text above and below the list is optional
The container has controls for adding a border and/or a bottom box shadow.
It has a control to remove the bottom border when the box shadow is present for a more professional appearance
The text below the list has its own text align control so that it can be aligned center if used for a disclaimer
There are two optional links. The first one is internaland the other can be configured internal/external
The incremental list uses the CSS3 properties - "counter-increment" in conjunction with "counter-reset"

* All specifications are subject to change *

Text Info Content Info