The clip-path property in CSS makes it possible to define a region of an element to be displayed, and the rest hidden by being clipped away.
The ThemeKit Graphic Design Article widget splits the background into two areas and uses a ploygon clip-path to hide the appropriate "invisible" part of each one.
Controls
The coordinates are adjusted using a single to alter the meeting angle of the background areas. Since this is a responsive item the coordinates are expressed as a percentage.
Each area has a control for the background color and its opacity so the clip can be removed if required by setting both colors the same.

The ThemeKit Graphic Design Heading shown at the top of this page has a two column grid layoult with and op'tional logo/link and an h1 through h3 heading.
The heading has the option to add sidelines which can be animated if requred.
Using Headings
All the widgets made by EverWeb Widgets and ThemeKit Widgets use HTML5 for content items. Whne using HTNL5 each comtainer is regarded as a mini page in its own right so the first heading is always an h1.
In an HTML5 layout only three types of heading are required …

• h1 is used for the website name usually inserted in the header or hero item.
• h2 is used for page name
• h3 is used for a section heading or to denote a change of subject

Sidelines

The sidelines have controls for line height, color, style, radius and padding. The line length is adjusted relative to the text by increasing/decreasing the heading width.