EverWeb ThemeKit Text

Text Row

The columns are created using the CSS Grid Layout Module.
Each column has an <article> element which can have a border and/or a bottom box shadow.
The article has a heading with optional icon and animation, text and an optional link.

Text Plus

Columns

When there are three columns the last one is centered in row 2 below the break point.
The columns stack vertically on mobile phones in portrait mode.
This example has four items with the number of items set to 2 to create two rows.

Zoom Wrap

Icons

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.

Lists

Animation

The custom animation uses a single keyframe and the animation time and delay are adjustable in milliseconds.
Checking a box will add a staggered delay using the nth-of type selector.

Mark Wrap

Text Grid

Layout

Each row is a two column grid layout with relative column widths of 3:2 and 2:3 on alternate rows.

Optional Span

Article

Each article has a header with an optional number/letter, a heading and optional link.

Name

Links

The items can be links and globally switched for internal or external pages.

Google Font

Main Heading

The optional main heading has a grid layout with the option for an SVG icon to denote the type of the content.

Rock Salt

Name

Note the optional span used for the name of the comment author which can be aligned left, center or right.

User Name

Signature

The signature font used here is Rock Salt with controls for font size, color, weight and style

The End

Text Grid

The text grid is a custom design using the CSS Grid Layout Module to create rows with a staggered column layout and allow alternating item text color, backgroundand and link icons.
Grid
The layout varies the grid column spans, nth-of-type(odd) and nth-of-type(even) to create a unique design with easy to find content items.
Header
The optional header has a heading and the option to add an SVG icon to denote the type of content. The default is comments. Any SVG from the 100s available from the download link in the widget pack's "Read Me First" file.
Links
When the internal or external link option is selected each item becomes a link denoted by an icon at the top right. The icon rotates on hover when viewed on computers.