e-addons

Share

ic Interface bwe-User Interface

Tabs Sections

Produce Tabs with numerous graphic styles and alternate the display of sections on the page.

The evolution is that all each element is on the same page you are processing and the contents of the tabs can have the custom structure you need, not through template-library.

Tabs based on the content of sections built directly on the page
tabs sections 1

Sections

Define which sections you want to use as content and the characteristics of your tabs:

  • The label of item
  • The #ID target of section or element (view *)
  • Tab icon

Tabs Style

You can choose from numerous graphic styles and build horizontal tabs that best suit your needs.

The width and position of the tabs complete the layout.

tabs sections 2
tabs sections 3
tab bar

Bar

Icon Box

tab line

Line

tab linetriangle

Triangle

tab fillup

Flip up

tab iconfall

Icon fall

tab circle

Circle

tab shape

Shape

Line Box

tab flip

Flip

tab circlefill

Circle Fill

tab tzoid

Trapezoid

* Get the ID in any element

copypaste element id 1
Right click
copypaste element id 2
Copy ID
copypaste element id 3
Paste in the field

Styles

tabs sections style

Colors

Custom colors for each state:

  • Normal
  • Active

for the following items:

  • Tab color
  • Tab background color
  • Line color
  • Background color  of content (optional)
tabs sections style 2

Title & Icon

Customize the title and icon based on your favorite style.

Title

  • Color
  • Typography
  • Alignment

Icon

  • Color
  • Size
  • Space

DEMO

Tabs Sections

Base example

placeholder

Add Your Heading Text Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This page is Amazing