diff options
Add Accordions
1 files changed, 128 insertions, 0 deletions
| -rw-r--r-- | docs/experimentals.html | 128 |
diff --git a/docs/experimentals.html b/docs/experimentals.html index d88d8da..a2059d8 100644 --- a/docs/experimentals.html +++ b/docs/experimentals.html @@ -51,6 +51,9 @@ <a href="experimentals.html">Experimentals</a> <ul class="nav"> <li class="nav-item"> + <a href="experimentals.html#accordions">Accordions</a> + </li> + <li class="nav-item"> <a href="experimentals.html#calendars">Calendars</a> </li> <li class="nav-item"> @@ -91,6 +94,131 @@ </section> </section> + <section id="accordions" class="container"> + <header class="text-center"><h3><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3></header> + <section class="notes"> + <p><strong>Accordions</strong> are used to toggle sections of content.</p> + </section> + <div class="columns"> + <div class="column col-6 col-md-12"> + <div class="accordion"> + <div class="accordion-item"> + <input type="radio" id="accordion-1" name="accordion-radio" hidden checked /> + <label class="accordion-header hand" for="accordion-1"> + Elements + </label> + <div class="accordion-body"> + <ul class="nav"> + <li class="nav-item"> + <a href="#accordion">Typography</a> + </li> + <li class="nav-item"> + <a href="#accordion">Tables</a> + </li> + <li class="nav-item"> + <a href="#accordion">Buttons</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="radio" id="accordion-2" name="accordion-radio" hidden /> + <label class="accordion-header hand" for="accordion-2"> + Layout + </label> + <div class="accordion-body"> + <ul class="nav"> + <li class="nav-item"> + <a href="#accordion">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#accordion">Responsive</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="radio" id="accordion-3" name="accordion-radio" hidden /> + <label class="accordion-header hand" for="accordion-3"> + Components + </label> + <div class="accordion-body"> + <ul class="nav"> + <li class="nav-item"> + <a href="#accordion">Autocomplete</a> + </li> + <li class="nav-item"> + <a href="#accordion">Avatars</a> + </li> + <li class="nav-item"> + <a href="#accordion">Badges</a> + </li> + </ul> + </div> + </div> + </div> + </div> + <div class="column col-6 col-md-12"> + <div class="accordion"> + <div class="accordion-item"> + <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked /> + <label class="accordion-header hand" for="accordion-4"> + Elements + </label> + <div class="accordion-body"> + <ul class="nav"> + <li class="nav-item"> + <a href="#accordion">Typography</a> + </li> + <li class="nav-item"> + <a href="#accordion">Tables</a> + </li> + <li class="nav-item"> + <a href="#accordion">Buttons</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden /> + <label class="accordion-header hand" for="accordion-5"> + Layout + </label> + <div class="accordion-body"> + <ul class="nav"> + <li class="nav-item"> + <a href="#accordion">Flexbox grid</a> + </li> + <li class="nav-item"> + <a href="#accordion">Responsive</a> + </li> + </ul> + </div> + </div> + <div class="accordion-item"> + <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden /> + <label class="accordion-header hand" for="accordion-6"> + Components + </label> + <div class="accordion-body"> + <ul class="nav"> + <li class="nav-item"> + <a href="#accordion">Autocomplete</a> + </li> + <li class="nav-item"> + <a href="#accordion">Avatars</a> + </li> + <li class="nav-item"> + <a href="#accordion">Badges</a> + </li> + </ul> + </div> + </div> + </div> + </div> + </div> + </section> + <section id="calendars" class="container"> <header class="text-center"><h3><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3></header> <section class="notes"> |