Accordion

The word "accordion" may be imagined as a musical instrument of your favorite band, but in web design/developing accordion is a collapsible component for presenting information in limited space. On start user see only headers but when he click on one of them it will expand its content like the musical instrument. It might be used with menus, widgets, contents areas, etc.

Width options

Full width

Fixed width - default: 60%

One/multi collapsing

One

Multiple

Themes

Add theme

Accordion #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, amet, architecto consequuntur culpa eius eligendi est et eveniet ipsam laudantium minima modi nobis quam, quisquam repudiandae sunt veniam! Ad, molestias!

Accordion #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!

Accordion #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis non, nostrum obcaecati quos suscipit temporibus ut! Animi, blanditiis culpa ducimus et fuga illo illum pariatur quam, quo rerum sunt, totam.

<div class="accordion accordion--full-width accordion--blue">
 
  <div class="accordion__object">
    <input type="radio" id="acc1" name="accordion">
    <label for="acc1" class="accordion__header">Accordion #1</label>
    <div class="accordion__content">
      <h2>Accordion 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis distinctio doloremque magni quod repudiandae, voluptas voluptates. Atque delectus dignissimos dolores, esse eum ipsa maxime minima officia qui repellat ullam voluptate!</p>
    </div> <!-- /.accordion__content -->
  </div> <!-- /.accordion__object -->
 
  <div class="accordion__object">
    <input type="radio" id="acc2" name="accordion">
    <label for="acc2" class="accordion__header">Accordion #2</label>
    <div class="accordion__content">
      <h2>Accordion 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, commodi deleniti dolor doloremque eaque fugit iste nobis reprehenderit sint veritatis vitae voluptates! Accusantium consequuntur error hic labore provident ut voluptas?</p>
    </div> <!-- /.accordion__content -->
  </div> <!-- /.accordion__object -->
 
  <div class="accordion__object">
    <input type="radio" id="acc2" name="accordion">
    <label for="acc2" class="accordion__header">Accordion #3</label>
    <div class="accordion__content">
      <h2>Accordion 3</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex labore libero officiis soluta? Animi architecto blanditiis commodi consequatur, distinctio ipsum repellendus tempora! A aperiam eius facere in libero nemo, officiis?</p>
    </div> <!-- /.accordion__content -->
  </div> <!-- /.accordion__object -->
 
</div> <!-- /.accordion -->

Dropdown

Dropdown is a list of items that appears when user click on.

Simple dropdown

There are two basic classes: .dropdown--out and .dropdown--in. The first one has absolutely positioned content and second one has content inside menu so when dropdown is clicked then content below will slide down to make place. Moreover the first one can have one of four additional class: .dropdown--down .dropdown--up .dropdown--left .dropdown--right. It determines on which side of container content will appear.

Content position

Down

Left

Right

Themes

Add theme

<div class="dropdown dropdown--out dropdown--down dropdown--blue">
  <input type="checkbox" name="dropdown" id="dd-1">
  <label for="dd-1">Dropdown Menu <span class="trigger arrow"></span></label>
  <ul class="dropdown__menu">
    <li>
      <a href="#"><label for="dd-1">Item 1</label></a>
    </li>
    <li>
      <a href="#"><label for="dd-1">Item 2</label></a>
    </li>
    <li>
      <a href="#"><label for="dd-1">Item 3</label></a>
    </li>
    <li>
      <a href="#"><label for="dd-1">Item 4</label></a>
    </li>
    <li>
      <a href="#"><label for="dd-1">Item 5</label></a>
    </li>
  </ul>
</div>

Nested dropdown

There are two types of trigger icons (icons placed next to dropdown labels) - plus/minus sign or arrows. To use first one simply put span.trigger into label tag and to use second one add to the span tag .arrow class. Direction of arrow is related to position of menu.

<nav>
  <ul>
 
    <li class="dropdown dropdown--blue dropdown--out dropdown--left">
      <input type="checkbox" name="dropdown-nested" id="dd-n-1">
      <label for="dd-n-1">Dropdown Menu 1 <span class="trigger arrow"></span></label>
      <ul class="dropdown__menu">
        <li>
          <a href="#"><label for="dd-n-1">Item 1</label></a>
        </li>
        <li>
          <a href="#"><label for="dd-n-1">Item 2</label></a>
        </li>
        <li>
          <a href="#"><label for="dd-n-1">Item 3</label></a>
        </li>
        <li class="dropdown dropdown--in">
          <input type="checkbox" name="dropdown-nested" id="dd-n-2">
          <label for="dd-n-2">Item 4 <span class="trigger"></span></label>
          <ul class="dropdown__menu">
            <li>
              <a href="#"><label for="dd-n-1">Subitem 1</label></a>
            </li>
            <li>
              <a href="#"><label for="dd-n-1">Subitem 2</label></a>
            </li>
            <li>
              <a href="#"><label for="dd-n-1">Subitem 3</label></a>
            </li>
            <li>
              <a href="#"><label for="dd-n-1">Subitem 4</label></a>
            </li>
          </ul> <!-- /nested .dropdown__menu -->
        </li> <!-- /nested .dropdown -->
        <li>
          <a href="#"><label for="dd-n-1">Item 5</label></a>
        </li>
      </ul> <!-- /.dropdown__menu -->
    </li> <!-- /.dropdown -->
 
    <li class="dropdown dropdown--blue dropdown--out dropdown--down">
      <input type="checkbox" name="dropdown-nested" id="dd-n-3">
      <label for="dd-n-3">Dropdown Menu 2 <span class="trigger arrow"></span></label>
      <ul class="dropdown__menu">
        <li>
          <a href="#"><label for="dd-n-3">Item 1</label></a>
        </li>
        <li>
          <a href="#"><label for="dd-n-3">Item 2</label></a>
        </li>
        <li>
          <a href="#"><label for="dd-n-3">Item 3</label></a>
        </li>
        <li class="dropdown dropdown--out dropdown--right">
          <input type="checkbox" name="dropdown-nested" id="dd-n-4">
          <label for="dd-n-4">Item 4 <span class="trigger arrow"></span></label>
          <ul class="dropdown__menu">
            <li class="dropdown dropdown--out dropdown--up">
              <input type="checkbox" name="dropdown-nested" id="dd-n-5">
              <label for="dd-n-5">Subitem 1 <span class="trigger arrow"></span></label>
              <ul class="dropdown__menu">
                <li>
                  <a href="#"><label for="dd-n-3">Subsubitem 1</label></a>
                </li>
                <li>
                  <a href="#"><label for="dd-n-3">Subsubitem 2</label></a>
                </li>
                <li>
                  <a href="#"><label for="dd-n-3">Subsubitem 3</label></a>
                </li>
              </ul> <!-- /second nested .dropdown__menu -->
            </li> <!-- /second nested .dropdown -->
            <li>
              <a href="#"><label for="dd-n-3">Subitem 2</label></a>
            </li>
            <li>
              <a href="#"><label for="dd-n-3">Subitem 3</label></a>
            </li>
            <li>
              <a href="#"><label for="dd-n-3">Subitem 4</label></a>
            </li>
          </ul> <!-- /first nested .dropdown__menu -->
        </li> <!-- /first nested .dropdown -->
        <li>
          <a href="#"><label for="dd-n-3">Item 5</label></a>
        </li>
      </ul> <!-- /first .dropdown__menu -->
    </li>
 
  </ul>
</nav>

Modalbox

Displays dialog with various informations. It can be used for dialog boxes, showing informations, confirmations.

Width options

Full width

Fixed width - default 60%

Wide

Wide short

Theme

Launch Modal

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aspernatur debitis eaque, esse hic iure labore laboriosam magni, nemo neque placeat quae quod quos reiciendis rerum voluptatum. Ea, magni!

<div>
  <input type="checkbox" name="modal" id="modal" class="modal__trigger">
  <label for="modal" class="btn btn-lg btn-blue-inverse">Launch modal</label>
  <div class="modal__overlay" role="dialog">
    <label for="modal" class="modal__overlay--dismiss"></label>
    <div class="modal__dialog modal__dialog--fixed-size modal__dialog--blue">
      <div class="modal__header">
        <h3>Modal</h3>
        <label for="modal" class="close"></label>
      <div class="modal__body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci aspernatur debitis eaque, esse hic iure labore laboriosam magni, nemo neque placeat quae quod quos reiciendis rerum voluptatum. Ea, magni!</p>
      </div> <!-- /.modal__body -->
    </div> <!-- /.modal__dialog -->
  </div> <!-- /.modal__overlay -->
</div> <!-- / container -->

Slider

Also known as carousel or slideshow. This component can be a convenient way to display multiple images, videos, slides with text, etc. on website. Note: If you do not want to have slider pills (navigation dots) or slider arrows in your page simply delete div .slider__pills or .slider__arrows with their content from this code snippet.

Width options

Full width

Fixed width - default 80%

Pills position

Bottom

Top

Left

Right

Finite sliding

Finite

Theme

slide #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!
slide #2
slide #4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto assumenda dicta dolor eligendi eos esse, et eum ex hic illo inventore laboriosam maiores nisi quia sit unde voluptas voluptatem.

• • • •

<div class="slider slider--fixed-width slider--blue">
 
  <input type="radio" name="slider" id="slide-1" checked="">
  <input type="radio" name="slider" id="slide-2">
  <input type="radio" name="slider" id="slide-3">
  <input type="radio" name="slider" id="slide-4">
 
  <ul>
    <li>
      <img src="https://placekitten.com/800/600">
      <div class="slide__content">
        <h2>slide #1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!</p>
      </div>
    </li> <!-- /slide 1 -->
    <li>
      <img src="https://placekitten.com/850/600">
      <div class="slide__content animated">
        <h2>slide #2</h2>
      </div>
    </li> <!-- /slide 2 -->
    <li>
      <img src="https://placekitten.com/900/600">
      <div class="slide__content">
      </div>
    </li> <!-- /slide 3 -->
    <li>
      <div class="slide__content">
        <h2>slide #4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto assumenda dicta dolor eligendi eos esse, et eum ex hic illo inventore laboriosam maiores nisi quia sit unde voluptas voluptatem.</p>
      </div>
    </li> <!-- /slide 4 -->
  </ul> <!-- /slider images -->
 
  <div class="slider__pills slider__pills--bottom">
    <label for="slide-1">•</label>
    <label for="slide-2">•</label>
    <label for="slide-3">•</label>
    <label for="slide-4">•</label>
  </div> <!-- /.slider__pills -->
 
  <div class="slider__arrows">
    <label for="slide-1"><span></span></label>
    <label for="slide-2"><span></span></label>
    <label for="slide-3"><span></span></label>
    <label for="slide-4"><span></span></label>
    <label for="slide-1"><span></span></label>
    <label for="slide-4"><span></span></label>
  </div> <!-- /.slider__arrows -->
 
</div> <!-- /.slider -->

Tabs

Like in accordion, this component is used to show informations in limited amount of space. Instead of accordion, tabs shows data in form of table or bookmarks. Note: Because of absolute positioning of each tab content it need to set to the .tab__content class height property (default: 200px) and equivalent margin-bottom for tabs container. To make a container scrollable simply put .tab__content--scrollable class.

Width options

Full width

Fixed width - default 70%

Theme

tab 1

Tab #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, amet, architecto consequuntur culpa eius eligendi est et eveniet ipsam laudantium minima modi nobis quam, quisquam repudiandae sunt veniam! Ad, molestias!
tab 2

Tab #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Admirals walk from metamorphosis like remarkable girls. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!
tab 3

Tab #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis non, nostrum obcaecati quos suscipit temporibus ut! Animi, blanditiis culpa ducimus et fuga illo illum pariatur quam, quo rerum sunt, totam.
tab 4

Tab #4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto assumenda dicta dolor eligendi eos esse, et eum ex hic illo inventore laboriosam maiores nisi quia sit unde voluptas voluptatem.

<ul class="tabs tabs--full-width tabs--blue">
 
  <li>
    <input type="radio" name="tabs" id="tab1" checked>
    <label for="tab1">tab1 header</label>
    <div class="tab__content">
      <h2>Tab 1</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, amet, architecto consequuntur culpa eius eligendi est et eveniet ipsam laudantium minima modi nobis quam, quisquam repudiandae sunt veniam! Ad, molestias!</p>
    </div> <!-- /.tab__content -->
  </li> <!-- /tab element -->
 
  <li>
    <input type="radio" name="tabs" id="tab2">
    <label for="tab2">tab2 header</label>
    <div class="tab__content tab__content--scrollable">
      <h2>Tab 2</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Admirals walk from metamorphosis like remarkable girls. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, inventore, nisi! Accusantium ad aliquam beatae culpa dignissimos eligendi esse explicabo fugit laboriosam maxime modi nam nulla, obcaecati odit, provident vero!</p>
    </div> <!-- /.tab__content -->
  </li> <!-- /tab element -->
 
  <li>
    <input type="radio" name="tabs" id="tab3">
    <label for="tab3">tab3 header</label>
    <div class="tab__content">
      <h2>Tab 3</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis non, nostrum obcaecati quos suscipit temporibus ut! Animi, blanditiis culpa ducimus et fuga illo illum pariatur quam, quo rerum sunt, totam.</p>
    </div> <!-- /.tab__content -->
  </li> <!-- /tab element -->
 
  <li>
    <input type="radio" name="tabs" id="tab4">
    <label for="tab4">tab4 header</label>
    <div class="tab__content">
      <h2>Tab 4</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto assumenda dicta dolor eligendi eos esse, et eum ex hic illo inventore laboriosam maiores nisi quia sit unde voluptas voluptatem.</p>
    </div> <!-- /.tab__content -->
  </li> <!-- /tab element -->
 
</ul> <!-- /.tabs -->

Accordion

Width options

One/multi collapsing

Themes

Accordion #1

Accordion #2

Accordion #3

Dropdown

Simple dropdown

Content position

Themes

Nested dropdown

Modalbox

Width options

Theme

Modal

Slider

Width options

Pills position

Finite sliding

Theme

slide #1

slide #2

slide #4

Tabs

Width options

Theme

Tab #1

Tab #2

Tab #3

Tab #4