Accordion

Simple, lightweight, responsive accordion

Default

<div class="accordion accordion-horizontal accordion-singleopen">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ac1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="ac1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ac2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="ac2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ac3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="ac3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ac4">Our work is never over</div>
    <div class="panel-body" data-acc-content="ac4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

No border

<div class="accordion accordion-horizontal accordion-singleopen accordion-no-border">
  <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acn1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acn1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acn2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acn2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acn3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acn3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>

    <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acn4">Our work is never over</div>
    <div class="panel-body" data-acc-content="acn4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>
</div>

Work it harder, make it better

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Combined

<div class="accordion accordion-horizontal accordion-singleopen accordion-combined">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acj1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acj1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acj2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acj2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acj3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acj3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Multiopen

<div class="accordion accordion-horizontal accordion-multiopen">
  <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acm1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acm1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acm2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acm2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading rounded-block" data-acc-link="acm3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acm3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Theme color

<div class="accordion accordion-horizontal accordion-singleopen">
  
  <div class="panel panel-theme">
    <div class="panel-heading" data-acc-link="act1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="act1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-theme">
    <div class="panel-heading" data-acc-link="act2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="act2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-theme">
    <div class="panel-heading" data-acc-link="act3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="act3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-theme">
    <div class="panel-heading" data-acc-link="act4">Our work is never over</div>
    <div class="panel-body" data-acc-content="act4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

No color

<div class="accordion accordion-horizontal accordion-singleopen accordion-no-color">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="aco1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="aco1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="aco2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="aco2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="aco3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="aco3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="aco4">Our work is never over</div>
    <div class="panel-body" data-acc-content="aco4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Unstyled

<div class="accordion accordion-horizontal accordion-singleopen accordion-no-color accordion-no-border">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acs1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acs1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acs2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acs2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acs3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acs3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acs4">Our work is never over</div>
    <div class="panel-body" data-acc-content="acs4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Contextual

<div class="accordion accordion-horizontal accordion-singleopen">
  
  <div class="panel panel-primary acc-open">
    <div class="panel-heading" data-acc-link="acc1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acc1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-success">
    <div class="panel-heading" data-acc-link="acc2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acc2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-info">
    <div class="panel-heading" data-acc-link="acc3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acc3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-warning">
    <div class="panel-heading" data-acc-link="acc4">Our work is never over</div>
    <div class="panel-body" data-acc-content="acc4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-danger">
    <div class="panel-heading" data-acc-link="acc5">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acc5"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Work it harder, make it better

Border bottom

<div class="accordion accordion-horizontal accordion-singleopen accordion-no-color accordion-no-border accordion-border">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acrt1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acrt1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acrt2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acrt2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acrt3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acrt3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acrt4">Our work is never over</div>
    <div class="panel-body" data-acc-content="acrt4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Border theme color

<div class="accordion accordion-horizontal accordion-singleopen accordion-no-color accordion-no-border accordion-border-theme">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acr1">Work it harder, make it better</div>
    <div class="panel-body" data-acc-content="acr1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acr2">Do it faster, makes us stronger</div>
    <div class="panel-body" data-acc-content="acr2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acr3">More than ever, hour after</div>
    <div class="panel-body" data-acc-content="acr3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="acr4">Our work is never over</div>
    <div class="panel-body" data-acc-content="acr4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Big heading

<div class="accordion accordion-horizontal accordion-singleopen">
  
  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ach1">
      <p class="panel-title">Work it harder, make it better</p>
    </div>
    <div class="panel-body" data-acc-content="ach1"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ach2">
      <p class="panel-title">Do it faster, makes us stronger</p>
    </div>
    <div class="panel-body" data-acc-content="ach2"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ach3">
      <p class="panel-title">More than ever, hour after</p>
    </div>
    <div class="panel-body" data-acc-content="ach3"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" data-acc-link="ach4">
      <p class="panel-title">Our work is never over</p>
    </div>
    <div class="panel-body" data-acc-content="ach4"><p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p></div>
  </div>
</div>

Work it harder, make it better

Do it faster, makes us stronger

More than ever, hour after

Our work is never over

Vertical Dark

<div class="accordion accordion-vertical av-dark">
  <ol>
    <li>
      <h2><span>Text</span></h2>
      <div><div class="av-inner">
        <h3>Work it harder, make it better</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<br><a href="#">Link somewhere</a>
      </div></div>
    </li>
    <li>
      <h2><span>Image</span></h2>
      <div><div class="av-inner av-inner-media">
        <div class="av-image"></div>
      </div></div>
    </li>
    <li>
      <h2><span>Video</span></h2>
      <div><div class="av-inner av-inner-media">
        <span><video src="/vid/landscape/land6.mp4" class="html5-video" controls preload="auto"></video></span>
      </div></div>
    </li>
    <li>
      <h2><span>Text with buttons</span></h2>
      <div><div class="av-inner">
        <h3>Do it faster, makes us stronger</h3>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
        <br><br>
        <button class="button button-primary button-square button-rounded"><i class="fa fa-briefcase"></i></button>
        <a href="#" class="button button-primary button-rounded">Read more</a>
      </div></div>
    </li>
  </ol>
</div>

Text

Work it harder, make it better
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
Link somewhere
Image
Video
Text with buttons

Do it faster, makes us stronger
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Read more

Vertical light

Vertical mouseover

Panel

Default

<div class="panel panel-default">
  <div class="panel-body">
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

With heading

<div class="panel panel-default">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
  </div>
</div>

Panel heading. Kate Template

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Big heading

<div class="panel panel-default">
  <div class="panel-heading">
    <p class="panel-title">Panel heading. Kate Template</p>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

With footer

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Panel content

Panel footer

Theme color

<div class="panel panel-theme">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

Primary color

<div class="panel panel-primary">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

Success color

<div class="panel panel-success">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

Info color

<div class="panel panel-info">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

Warning color

<div class="panel panel-warning">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

Danger color

<div class="panel panel-danger">
  <div class="panel-heading">Panel heading. Kate Template</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Panel heading. Kate Template

Panel content

Footer table

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p class="content">Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table

<div class="panel panel-default">
  <div class="panel-heading">Panel heading</div>
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Panel heading

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

List group

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Panel heading

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Well

Default

<div class="well">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Small

<div class="well well-sm">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Large

<div class="well well-lg">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

⌃