ThemeKit UI Text

The ThemeKit UI Text widget has a lot of options to add items that make for a much more professsional text area.
Layout
The widget has a main heading followed by a paragraph. Next there is an optionl list with heading and intro text.
This is followed by an optional text area with a heading.. The last item is an optional navigation with up to three links.
Overlap
The ThemeKit UI Text widget can overlap the item above as shown here where it overlaps the jumbotron,
Animation
There is an option to animate the item up when in view. Follow the link at the bottom of this container to see an example. The animation can occur once or every time the item enters the viewport.
By default the animation is removed for mobile phones but can be used on thes devices if really necessary.

Optional List

The list has its own heading and this paragraph for list info.

• The list can have up to 48 items
• A choice of seven list style types
• Controls for list item font size and line height
• Controls for list item inset and spacing

Inserting Mark & Span Tags

Span
A <span> tag is an inline container used to insert text with different styles from the main text.
Spans are insert like this …<span>Span Text</span>Mark
The Mark tag is used to heighlight words or phrases. The browser deafault styles for the mark tag are kind of nasty so the widget has controls for the text color and background.
Marks are insert like this …<mark>Mark Text</mark>The mark tag should be used rather than bold or underline Bold text should be avoided since it causes readability issuses.
Underlined text should be avoided since since it can be confused with outdated text links.
NOTE that links in text should not be used on a responsive website.
According to Google, links need to have a target size of no less than 28 x 28px and a 40px clear area around it. Obviously this is not possible in text.
Any links related to text content should be inserted below the text as CTA (call to action) style links …