ThemeKit Accordion

BUY Widgets

Menu

The links are arranged in an auto grid. The number of links per row for any given brwoser/device width will depend on the link minimum width setting and accordion item's width.

Links

The links have …

  • Controls for font, generic fallback, size and
  • Controls for link background color & animated hover background color
  • The current page is indicated using a contrasting background color
  • Controls for link border radius and link spacing

Action

The icon in the action tab is different from the rest of the ThemeKit Accordion widgets. It animates for the " trigram for heaven icon" to a close icon on click.

Stack Styles

Most of the examples show the accordion widgets with bordr, vorder radius, bottom box shadow and vertical spacing.
The stack below shows these removed to create a compact and versatile accordion with the apearance of a single unit.

Article

ThemeKit Accordion Artcle

Article

Optional Span

The text area has a heading, optional styled span for price etc, text and an optional internal/external link.
Below the selected breakpoint the text appears below the image.
The image has the option to be lazy loade.

More Info

Content

ThemeKit Accordion Content

Content

Options

The content has an option for an image, a heading, text, an optional list, more text which can be used as a disclaimer and a link.
The image is inserte in two sizes for compoter and mobile devices and has

  • The list can have up to 48 items
  • A choice of eight list style types
  • Controls for list item font size & inset
  • List item line height and spacing are adjustable

* All specifications subject to change *

Article

Carousel

Carousel

Images To Show

The carousel has controls for setting the number of images to show for computer, tablet landscape, tablet portrait and phone in portrait mode.

Content Slider

ThemeKit Accordion Content Slider

Slides

Layout

The slides have a two column grid layout with the image in the left column and everything else in the right.

Accordion Content Slider 2

Images

Lazy

The images have a lazy loading option and have controls for border with, color and radius for definition.

Accordion Content Slider 3

Content

Text

The content area has a heading, optional styled span, text and an internal/external link.

Accordion Content Slider 4

Mobile

Breakpoint

Below the breakpoint the right column moves to row [2] and the slides can be swiped.

Image Grid

Accordion Grid 1

Blackstar ID:Core 20

£129.00

The Blackstar ID:Core 10 V3 Stereo Digital Combo is the next generation of the ID:Core Series.

Accordion Grid 2

Blackstar St. James

£1099.00

The Blackstar St. James 50 EL34 Combo Amp is the next step forward in amplification engineering.

Accordion Grid 3

Boss Cube Street

£313.00

The Boss Cube Street 2 Battery Powered Stereo Amplifier is the ultimate tool of translation for any mobile street artist.

Accordion Grid 3

Boss Katana Artist

£619.00

The Boss Katana Artist MK-II builds on the legacy of its predecessors, bringing you a familiar tonal palette with all new features.

Accordion Grid 5

G4M Amp Head

£99.99

The G4M GA-20E Guitar Amp Head is a solid-state amplifier that offers a range of features to help you shape your sound.

Accordion Grid 6

Marshall JVM410C

£1,379.00

The JVM410C 100 Watt 4-Channel Valve 2x12 Combo is built on the classic design responsible for the legendary Marshall roar.

Text Wrap

Text Wrap Image

Text wrapping an image means that the image only needs 50% (in thise case 480px) of the width so the file is smaller and doesn't required a second smaller image for mobile devices.

Accordio Text Wrap Image
Optional Caption

Wrap Text

Text wrapping an image is rather dated since it associated with print media. However it can be brought into this century by making it suitable for responsive web pages.
Image
The image is floated left in the usual way with a 50% width and a suitable right marign.
The image is inserted in an HTML5 <figure> element with an optional overlay caption in the <figcaption> tags.
The image has controls for border width, color and radius.
On devices with a screen width less than the breakpoint setting the image becomes full width and pushes the text down below it. The image can have a border to define its edges if required and has a control for border radius
Text Area
To add some more up to date features and functionality the text has a block heading and the wrap text can have sub headings using styled spans with controls for font size, color and text align.
Mark
Words or phrases can be highlighted using the <mark> tag and to draw attention to a link in the navigation bar to related information.
The mark tag has controls for font color and background.
Links
The optional row of links can have a mix of internal and external destinations. They have controls for link minimum width and horizontal spacing.
The links have a control for border radius and have a background hover animation.