ThemeKit UI Headline

ThemeKit UI


Headline

Headline

The ThemeKit UI Headline can have a solid, two color gradient or an image background. The image is inserted in two sizes with alt text.
The headline can have one or two lines which share the same styles and have optional underlines.
Note that the optional bottom shadow will not be visible on the EverWeb design canvas.

Text

The text items use a Google hoted font - the default is Alfa Slab One. The controls are …

  • Font size and mobile font size
  • Font style, font weight and text fill color and opacity
  • Text stroke stroke width, stroke color & letter spacing
  • Text shadow radius, shadow blur and shadow color - shadow removed on phones

Animation

The text items can animated in from the left, center or right and the lines from the center or right. The text items have their own controls for time, delay and direction.
The lines have their own controls for time and delay and a checkbox for changing the origin from left to center.
More headlines …

Svg Vector Icons : http://www.onlinewebfonts.com/icon

ThemeKit UI Content

ThemeKit UI Content Widgets

Content

The ThemeKit UI Content widget combines several items in one widget for maximum efficiency and download speed.
They are inserted in a CSS Grid Layout Module which is centered with a maximum width setting.
The items have the option be separated for better visibilty using a grid row gap and a border and/or a bottom box shadow.
Header
The header has controls for font size, color and background color
Image
The image is inserted in two sizes for computer and mobile devices and has the option to insert a portrait image for phones in portrait mode. The image has a lazy loading option.

Content [2]

Another optional HTML5 <article> element with a heading and a paragraph.
The widget has controls for styling span tags and mark tags. The span has controls for font size and color. The mark has controls for font color and background color.
Link Bar
The link bar has the option for two internal links and one external link.
Comtainers
The containers can be styled using the controls for border width. color and radius and for bottom box shadow radius, spread and color.
The containers are separated ussing the grid row gap control.