Circles

ThemeKit UI Circles
Optional
Caption

Circle

A responsive circlular container - centered text container with a heading and text.

Circle Wrap

Circle

While it is possible to insert text in a round container and have it follow the curve this more advanced CSS will not render in EverWeb.
Article
The item above has a two column layout with an image and a text area. The layout can be switched and the relative column widths adjusted.
So that the size of the text item is in relation to its content the column ratio is set at 5:3.
Ratio Change
As the browser/viewing device width decreases the text will break out of its container so the items realtive widths are changed to 1:1 at the breakpoint.
Mobile Phones
On phones in portrait mode the text can be above or below the image and the relative percentage widths can be adjusted.

Items

The iamage is in an HTML5 <figure>and the text content in an <article> …

  • Image alt text, lazy load and caption option
  • Image border and box shadow controls
  • Text area heading, text and optional internal/external link
  • Text circle border and box shadow controls

Wrap

Check out the illustrated list with animated tooltip links and the text content wrapping the round images …

Trail Nav

The ThemeKit UI Trail Navigation is similar to the Breadcrumbs widget except it is designed to be inserted near the top of the page and can be animated to draw attention to it.