ThemeKit Brand Hero
In this examplae the hero has a gradient background with no bottom clip.
Both optional links are shown and the text will appear above the image below the break point.
ThemeKit Brand
Clip Cards
Most website designs are rather boring with their rows of little boxes. These info cards add a clip path to create a more interesting design.
The row can have twp, three or four cards. Each one has an iamge, heading, text area, optional phone number and a row of kinks.
The link row has a spam protected email funtion to the left and an info link to the right. When the pnone function id selected the phone call icon appears in the center of the link row on mobile phones.
Clip
The clip angle can be adjusted and there is a vertical adjust control for adjusting the clip in relation to the text.
Icon Row
The items are created using the CSS Grid Layout Module.
They are <article> elements which can have a border and/or a bottom box shadow.
When there are three columns the last one is centered in row 2 below the break point.
Columns
The article has a header with optional icon and a heading.
The text section can have styled spans.
The optional link bars are fixed at the bottom so that they remain in line despite varying content.
Icon
The icons are SVGs and are inserted by opening the SVG download folder, double clicking the file to open it in TextEdit in plain text mode, copying the code and pasting it into the SVG code box in the widget settings.
Animation
There is a choice of twenty custom animations, The animation occurs when the item enters the viewport. The time and delay are adjustable in milliseconds.
Checking a box will add a staggered delay using the nth-of type selector.
Header
The header has an optional logo/link, an h1 heading and an optional phone number/phone call icon. It can overlay the first item at the top of the page by checking a box.
Brand WidgetsToolbar
It is most inportant to show the contact info on page load and not hide it way in a footer. The toolbar has an info/home link, optional phone numbeer/phone call icon and a spam protected email function.
The toolbar can overlay the item above if required for adding the contact info to the hero item.
Links
Links in text are not acceptable in responsive page design since they don't create a large enough tarfet for fingertips or thumbs. Text links can be replaced by a CTA (call to action) style link bar below the text.
The ThemeKit Brand Links have a hover animation on computers and laptops which switches the text to an arrow.
The links can be a mixture of internal and external and have a new window function. There is a min width control and the horizontal and vertical spacing can be adusted.
The link bar's background can be a solid color or a two color gradient.
Brand Heading
Buy NowHeadings
Now that most websites are created with HTML5 the only headings required are h1 for a website name, h2 for the page name and h3 for section headings.
The ThemeKit Brand heading widget has options for an SVG icon to indicate a section type and an optional CTA style internal/external link.
Text Shadow
Using a bold font is not considered good pratice nowadays and many Google hosted fonts don't have a bold option anyway. Adding a text shadow helps to thicken up a font to make it more noticeable and using a contrasting shadow color makes it a feature.
Letter Spacing
Letter spacing should only be used when adding a text shadow to a heading. In normal circumstances adding letter spacing to text is nit acceptable since it causes problems for those with reading difficulties.
Spacing
Modern web design is all about breaking up the boxiness of outdated designs and providing plenty of spacing around and between items. Research has shown that this approach is much more successfull than tight rows of boxes.
The ThemeKit Brand Spacer widget is used to separate content areas. It has adjustable height, a solid or gradient background and the option to add a line.
The line is created using a CSS3 pseudo selector. The line has controls for percentage width, height, color and line style - dashed, dotted, double or solid. Using a line height of at leadt 6px for a diuble style.
Content Fade In
Using a fade in animation for the page content on load allows a smooth appearance of in view the items and gives the image in a hero item a little extra time to load.
The ThemeKit Brand Fade In widget can have a solid or two color gradient and the animation time is set in milliseconds.
The widget has adjustable height so it can be used as a spacer.