Carousel

The Carousel works fine!

NOTE: to add new items it is necessary to make changes in the CSS, this might require some additional work.

Download
Example
<!-- Carousel -->
<div class="carousel">
  <div class="carousel-inner">
    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked>
    <div class="carousel-item">
      ...
    </div>
    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden>
    <div class="carousel-item">
      ...
    </div>
    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden>
    <div class="carousel-item">
      ...
    </div>
    <label for="carousel-3" class="carousel-control prev control-1"></label>
    <label for="carousel-2" class="carousel-control next control-1"></label>
    <label for="carousel-1" class="carousel-control prev control-2"></label>
    <label for="carousel-3" class="carousel-control next control-2"></label>
    <label for="carousel-2" class="carousel-control prev control-3"></label>
    <label for="carousel-1" class="carousel-control next control-3"></label>
    <ol class="carousel-indicators">
      <li><label for="carousel-1" class="carousel-bullet"></label></li>
      <li><label for="carousel-2" class="carousel-bullet"></label></li>
      <li><label for="carousel-3" class="carousel-bullet"></label></li>
    </ol>
  </div>
</div>
        

Collapse

The "Collapse" component can be used in two ways: one that opens each element that is clicked OR like an accordion, where only the last clicked element remains open.

Download
Example
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

<!-- Collapse -->
<div class="collapse">
  <label class="collapse-btn" for="collapse-1">Lorem ipsum dolor sit amet</label>
  <input class="collapse-open" type="checkbox" id="collapse-1" aria-hidden="true" hidden />
  <div class="collapse-content">
    <div class="collapse-inner">
      ...
    </div>
  </div>
</div>

With Accordion

Example
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, non.

<!-- Collapse -->
<div class="collapse">
  <label class="collapse-open" for="accordion-1">Lorem ipsum dolor sit amet</label>
  <input class="collapse-open" type="radio" id="accordion-1" name="accordion" aria-hidden="true" hidden checked />
  <div class="collapse-content">
    <div class="collapse-inner">
      ...
    </div>
  </div>
</div>

Dropdown

The Dropdown can be used in two ways: click or hover.

Download
Example
<!-- Dropdown -->
<div class="dropdown">
  <label for="dropdown-1" class="btn btn-dropdown">One Dropdown</label>
  <input class="dropdown-open" type="checkbox" id="dropdown-1" aria-hidden="true" hidden />
  <label for="dropdown-1" class="dropdown-overlay"></label>
  <div class="dropdown-inner">
    ...
  </div>
</div>

With hover

Example
<!-- Dropdown with hover -->
<div class="dropdown">
  <label for="dropdown-1" class="btn btn-dropdown">One Dropdown</label>
  <input class="dropdown-open" type="checkbox" id="dropdown-1" name="dropdown-1" aria-hidden="true" hidden />
  <div class="dropdown-inner">
    ...
  </div>
</div>

Modal

The Modal uses the <input hidden> technique and works fine! :D

It's possible close the modal by clicking on background.

Download
Example
<label class="btn" for="modal-one">Example</label>

<!-- Modal One -->
<div class="modal">
  <input class="modal-open" id="modal-one" type="checkbox" hidden>
  <div class="modal-wrap" aria-hidden="true" role="dialog">
    <label class="modal-overlay" for="modal-one"></label>
    <div class="modal-dialog">
      <div class="modal-header">
        <h2>Modal in CSS?</h2>
        <label class="btn-close" for="modal-one" aria-hidden="true">×</label>
      </div>
      <div class="modal-body">
        <p>One modal example here! :D</p>
      </div>
      <div class="modal-footer">
        <label class="btn btn-primary" for="modal-one">Nice!</label>
      </div>
    </div>
  </div>
</div>

Tab

The "tab" component presents an interesting behavior and could be used without any issues. You do not need any special adaptation in the CSS.

Download
Example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, commodi.
<!-- Tab -->
<div class="tab">

  <!-- Tab panel -->
  <div class="tab-panel">
    <input class="tab-open" id="tab-1" name="tab-wrap-1" type="radio" checked>
    <label class="tab-nav" for="tab-1">Tab 1</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

  <div class="tab-panel">
    <input class="tab-open" id="tab-2" name="tab-wrap-1" type="radio">
    <label class="tab-nav" for="tab-2">Tab 2</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

  <div class="tab-panel">
    <input class="tab-open" id="tab-3" name="tab-wrap-1" type="radio" >
    <label class="tab-nav" for="tab-3">Tab 3</label>
    <div class="tab-inner">
      ...
    </div>
  </div>

</div>

Tooltip

By Deivid Marques

Tooltip displayed with hover or focus only css. Wai-aria was used which leaves the element accessible for screen readers.

Download
Example
<!-- Tooltip -->
<a href="#component-tooltip" role="tooltip" class="tooltip-top btn" aria-label="content displayed over ">Top</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-right btn" aria-label="content displayed to the right">Right</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-bottom btn" aria-label="content displayed below ">Bottom</a>
<a href="#component-tooltip" role="tooltip" class="tooltip-left btn" aria-label="content displayed to the left ">Left</a>