<!-- Carousel --><divclass="carousel"><divclass="carousel-inner"><inputclass="carousel-open"type="radio"id="carousel-1"name="carousel"aria-hidden="true"hiddenchecked><divclass="carousel-item">
...
</div><inputclass="carousel-open"type="radio"id="carousel-2"name="carousel"aria-hidden="true"hidden><divclass="carousel-item">
...
</div><inputclass="carousel-open"type="radio"id="carousel-3"name="carousel"aria-hidden="true"hidden><divclass="carousel-item">
...
</div><labelfor="carousel-3"class="carousel-control prev control-1">‹</label><labelfor="carousel-2"class="carousel-control next control-1">›</label><labelfor="carousel-1"class="carousel-control prev control-2">‹</label><labelfor="carousel-3"class="carousel-control next control-2">›</label><labelfor="carousel-2"class="carousel-control prev control-3">‹</label><labelfor="carousel-1"class="carousel-control next control-3">›</label><olclass="carousel-indicators"><li><labelfor="carousel-1"class="carousel-bullet">•</label></li><li><labelfor="carousel-2"class="carousel-bullet">•</label></li><li><labelfor="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.
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 --><divclass="collapse"><labelclass="collapse-btn"for="collapse-1">Lorem ipsum dolor sit amet</label><inputclass="collapse-open"type="checkbox"id="collapse-1"aria-hidden="true"hidden/><divclass="collapse-content"><divclass="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 --><divclass="collapse"><labelclass="collapse-open"for="accordion-1">Lorem ipsum dolor sit amet</label><inputclass="collapse-open"type="radio"id="accordion-1"name="accordion"aria-hidden="true"hiddenchecked/><divclass="collapse-content"><divclass="collapse-inner">
...
</div></div></div>
Dropdown
The Dropdown can be used in two ways: click or hover.
<labelclass="btn"for="modal-one">Example</label><!-- Modal One --><divclass="modal"><inputclass="modal-open"id="modal-one"type="checkbox"hidden><divclass="modal-wrap"aria-hidden="true"role="dialog"><labelclass="modal-overlay"for="modal-one"></label><divclass="modal-dialog"><divclass="modal-header"><h2>Modal in CSS?</h2><labelclass="btn-close"for="modal-one"aria-hidden="true">×</label></div><divclass="modal-body"><p>One modal example here! :D</p></div><divclass="modal-footer"><labelclass="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.
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.
<!-- Tooltip --><ahref="#component-tooltip"role="tooltip"class="tooltip-top btn"aria-label="content displayed over ">Top</a><ahref="#component-tooltip"role="tooltip"class="tooltip-right btn"aria-label="content displayed to the right">Right</a><ahref="#component-tooltip"role="tooltip"class="tooltip-bottom btn"aria-label="content displayed below ">Bottom</a><ahref="#component-tooltip"role="tooltip"class="tooltip-left btn"aria-label="content displayed to the left ">Left</a>