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-open" 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.

NOTE: When using it with click it's necessary to click on it in order to close it.

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 />
  <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 works through the :target selector and is stable enough to be used.

NOTE: It's not possible to close it by clicking anywhere on the screen, this could be a problem in some situations.

Example

<a href="#modal-one" class="btn">Example</a>

<!-- Modal -->
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      ...
      <a class="btn-close" href="#" aria-hidden="true">×</a>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      ...
    </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 Painel -->
  <div class="tab-painel">
    <input class="tab-open" id="tab-1" name="tab-wrap-1" type="radio" aria-hidden="true" hidden checked>
    <label class="tab-nav" for="tab-1">Tab 1</label>
    <div class="tab-inner">
      ...
    </div> 
  </div>  

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

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

</div>