ThemeKit Tabs
Text Wrap
Content
Images & Links

Tabs

Traditional tab layouts have fallen by the wayside due to their funky appearance and being unsuitable for responsive ages on small mobile devices.
This tab design has been created with a more modern look and a grid layout for the navigation tabs.
Tabs Nav
The tab nav has a grid layout so the tabs fill the container width and have a minimum width setting. The tab background color has a hover animation and the active link is indicated by a different background color.
On screen widths below the break point the tabs have a block layout and stack vertically. There are controls for the horizontal spacing above the break point and vertical spacing below it.

Text Wrap

Images are centered by default and can have their percentage width set using a slider.
There are two checkboxes for show/hide images and links. If any panel has a link and/or an image the appropriate box(es) must be checked.
Show/hide images and/or links can then be turned on individually per panel.

Float
Panels can be set up for the text to wrap the image …
◼ Check the box to display the image
◼ Choose the image
◼ Set its percentage width to about 50%
◼ Check the "Float for text wrap" box
Set the break point at which the float will be removed and the image will be 100% in width.

Links
Links can be added globally and can open internal or external pages with a new window option. The link shown below has a right pointing angle character - ❯ - inserted after the link text. Change this to ❮ and insert it before the text for a link to a previous page.
When the global link option is turned on, a link can be invisible if no link text or file path has been entered and the individual "Show link" option was left unchecked which makes the display property set to "none".

More Info ❯

Content Items

Apart from the optional image with alt text the tabs have a heading, text and an optional link which can open internal or external pages and has a new window option.
The image has its width reduced to 90%.
Animation
The tabs have a preset hover animation when viewed on computers and the content panels have an optional fade in animation which is turned on by checking a box and setting the animation time in milliseconds.

Symbols & Pseudo Lists

If only some of the panels need images the global "Show Images" box should be checked. When the panel content is being added leave the "Display Image " box unchecked and don't choose an image.
Links
Links can be added globally and can open internal or external pages with a new window option. The link shown below has a right pointing angle character - ❯ - inserted after the link text. Change this to ❮ and insert it before the text for a link to a previous page.
Symbols
Suitable HTML symbols can be inserted in line in widget text boxes. Here's an example of a pseudo list …
◼ Follow the link below to find the required symbol
◼ Copy the HTML version of the code and paste it into the text line.
◼ Inset the line by adding one or more HTML non breaking spaces code ( ).
Spaces
In HTML hitting the space bar once creates a space. Hitting it again and again has no effect except to create a non visible space. For extra spacing hit the space bar, enter  , hit the space bar, enter   and so on …

HTML Symbols ❯

ThemeKit Accordion Stack

Optional Images

In this panel the optional image is set to a width of 100%. When the text wrap box is left unchecked the image will remain centered when its percentage width is reduced.
The accordion panels can be open when viewed on the EverWeb design canvas and are closed prior to publishing by unchecking the "Open Panel" box. Panels can be set individually to show on page load.

More Info ❯

Text Wrap Image

Layout

Each item is an HTML5 <article>. It has a header for the trigger and a "body" for the content.
The header has an h1 heading and an arrow down marker when closed. When the panel is open, the marker switches to arrow up and the color changes.
The panels can be spaced out vertically by applying a bottom margin.
Show/Hide
There are two checkboxes for show/hide images and links. If any panel has a link and/or an image the appropriate box(es) must be checked.
Show/hide images and/or links can then be turned on individually per panel.
Float
Panels can be set up for the text to wrap the image …
◼ Choose the image
◼ Set its percentage width to about 50%
◼ Check the "Float for text wrap" box
Set the break point at which the float will be removed and the image will be 100% in width.
Links
Although the global link option is turned on, the link in this panel has no text or file path entered and the individual "Show link" option was left unchecked so that it is hidden due to the display property being set to "none".

Images & Links

HTML Symbols ❯

Accordion Stack

The accordion stack inserts up to 48 panels in the same container. It is centered with a maximum width setting. All the panels can be opened while editing the content and any one panel can be open on page load. When a panel is opened a previously opened one will close.
Action Tabs
The action tab has a text label and a chevron down icon when the panel is closed. The icon switches to chevron up when the panel is open. The icon is an SVG so its color for both the open and closed state can be edited.
The tab background can have a linear two color gradient with a choice of gradient angle. The tab height can be adjusted using the control for top/bottom padding.