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.

Example

‹ › ‹ › ‹ ›

1. •
2. •
3. •

<!-- 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.

Example

<!-- 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

<!-- 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.

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.

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.

Example

<!-- 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.

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>