Responsee version lightweight responsive css frameworkWhat's New in Version 7

Responsive timeline

Responsive timeline

Thanks to the timeline, you can show an events in the handy form. Each event can be presented using an icon or an image.
read more >

New free template Financer

New free template Financer

Completely new template named Financer comes with new edition of Responsee. You can look forward to excellent design and as usually completely free! We also upgraded all the other templates for Responsee 7.
read more >

Accordion

Accordion

Thanks to the accordion, you can display a huge contents even in a limited amount of space. Responsee Accordion supports an unlimited number of nested accordions. Thanks to this, you can divide a content into more and more smaller parts.
read more >

Responsive Modals

Responsive Modals

Thanks to Modals you can display a content in simple lightbox effect over particular page content. Modals may contain common text, headlines, images, buttons, iframes and a content of modal can be divided into the columns.
read more >

Ability to display the mobile navigation on the right

Ability to display the mobile navigation on the right

Thanks to the class "mobile-nav-right" you can show the mobile navigation on the right.
read more >

lorem ipsum generator professional logo generator

Responsive Tabs

Thanks to Responsive Tabs you easily distribute the content to particular sections without necessity of switching among sub-pages. Responsive Tabs have well-arranged structure and their activation is very intuitive and simple.

Important classes:

.tabs – selector for Responsive Tabs container
.tab-item – selector for one tab item
.tab-active – selector for active tab item
.tab-label – selector for tab item label (tabs navigation label)
.tab-active – selector for active tab item label
.tab-content – selector for tab content

Correct structure of Responsive Tabs:

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn">First Tab</a>
    <div class="tab-content">
      <h4>First Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label">Second Tab</a>        
    <div class="tab-content">
      <h4>Second Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label">Third Tab</a>
    <div class="tab-content">
      <h4>Third Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>
First Tab

First Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Second Tab

Second Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Third Tab

Third Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Responsive Tabs with URL hash:

This is great for when you want to open a specific tab by the URL.
If you want to allow URL hash for the tabs, is necessary to add the parameter “data-url” to the each “.tab-label” element. As second step, add some URL to “data-url” parameter (e.g. data-url=”some-tab-url”).

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn" data-url="first-tab">First Tab</a>
    <div class="tab-content">
      <h4>First Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label" data-url="second-tab">Second Tab</a>        
    <div class="tab-content">
      <h4>Second Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label" data-url="third-tab">Third Tab</a>
    <div class="tab-content">
      <h4>Third Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>
First Tab

First Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Second Tab

Second Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Third Tab

Third Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Responsive Tabs with icon in navigation:

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn"><i class="icon-message"></i> First Tab</a>
    <div class="tab-content">
      <h4>First Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label"><i class="icon-star"></i> Second Tab</a>        
    <div class="tab-content">
      <h4>Second Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label"><i class="icon-heart"></i> Third Tab</a>
    <div class="tab-content">
      <h4>Third Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>
First Tab

First Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Second Tab

Second Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Third Tab

Third Tab Content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Download Free Website Templates
Responsee Showcase

Add your website built on Responsee framework to our showcase