Brewing...

Live Demo

Basic Tabs

In this example, tabs are implemented in their simplest form: Along the top of the content block is a row(s) of buttons, which when clicked open the corresponding tab and displays the relevant content.

The style of the buttons and the content blocks can be styled to suit your website.


Advanced One

This is an example we've taken the basic setup and applied a more complex layout: The buttons are no longer at the top on larger screen devices (tablets and laptops) but now on the left-hand side, and instead of being simple buttons they are now "boxes" with the tab name and an embedded button to open the corresponding content block.

As the page width gets smaller (smartphones etc.), the layout reverts to that of the "Basic Tabs" setup.


Monday

Tuesday

Wednesday

Thursday

Friday

Saturday

Sunday

Advanced Two

This is an example we've taken the same layout as "Advance One" but made the "boxes" on the left a bit more visual, with an image background and a different layout. This enhances the look of the whole tabbed system, making it very aesthetically pleasing. We've also changed the type of content, to highlight the versatility of tabs.

As the page width gets smaller (smartphones etc.), the layout reverts to that of the "Basic Tabs" set-up.


Class One

Class Two

Class Three

Tabs

About Tabs

Tabs are another great way to get a lot of information and content onto a single page, splitting it up into bite-size chunks at the same time.

The design and layout of tabs can range from very simple to very elaborate.

Have a look at some of the examples above to get an idea of what is possible.

Newsletter Sign-up

© v2.2.7
  • Facebook
  • Facebook
  • This website only uses essential third party cookies and all requests are anonymised so no user identifying data is shared.

    BY CONTINUING TO USE THIS SITE YOU ACKNOWLEDGE ACCEPTANCE.