index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Start your next web project with Pure and Pure Components.">
        <title>Pure Components: CSS Only Components for Pure CSS</title>

        <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css"
              integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD"
              crossorigin="anonymous">
        <link rel="stylesheet" href="baby-blue.css">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <div id="layout">

            <div class="pcssc-collapsing-menu pcssc-menu-left">
                <a class="pure-menu-heading" href="#top">Pure
                    <div class="small-caps">components</div>
                </a>
                <div class="pcssc-dropdown">
                    <div tabindex="0" class="dropdown-toggle focus-toggle menu-link">
                        <span></span>
                    </div>
                    <label for="main-menu-toggle" class="menu-link click-toggle" aria-label="Toggle">
                        <span></span>
                    </label>
                    <input type="checkbox" id="main-menu-toggle" class="dropdown-toggle pcssc-invisible"/>
                    <ul class="dropdown-content pure-menu-list pure-menu">
                        <li class="pure-menu-item">
                            <a href="#installation" class="pure-menu-link">Installation</a>
                        </li>
                        <li class="pure-menu-item menu-item-divided">
                            <a href="#accordion" class="pure-menu-link">Accordion</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#alert" class="pure-menu-link">Alert</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#carousel" class="pure-menu-link">Carousel</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#collapse" class="pure-menu-link">Collapse</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#dropdown" class="pure-menu-link">Dropdown</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#menu" class="pure-menu-link">Menu</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#modal" class="pure-menu-link">Modal</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#popover" class="pure-menu-link">Popover</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#tabs" class="pure-menu-link">Tabs</a>
                        </li>
                        <li class="pure-menu-item">
                            <a href="#tooltip" class="pure-menu-link">Tooltip</a>
                        </li>
                        <li class="pure-menu-item menu-item-divided ">
                            <a href="#js-utils" class="pure-menu-link">JS Utils</a>
                        </li>
                        <li class="pure-menu-item menu-item-divided ">
                            <a href="https://github.com/joe-crick/pure-css-components/releases"
                               class="pure-menu-link">Releases</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div id="main">
                <a href="https://github.com/you">
                    <img style="position: absolute; top: 0; right: 0; border: 0;"
                         src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
                         alt="Fork me on GitHub"
                         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
                <a name="top"></a>
                <div class="header">
                    <h1>Pure Components</h1>

                    <h2>CSS Only Components for Pure CSS.</h2>
                </div>

                <div class="content preamble">
                    <h2 class="content-subhead">Pure CSS</h2>

                    <p>
                        <a href="https://purecss.io/">Pure CSS</a> is a great set of small, responsive CSS modules. As
                        their docs say, it is tiny. The entire set of modules is only 3.8KB* (minified and gzipped).
                    </p>
                    <p>
                        Pure CSS is responsive out of the box.
                    </p>
                    <p>
                        Pure CSS has minimal styles. It encourages you to write your application styles on top of it.
                        Pure does not look like this page out of the box. The styles for this page were blatantly
                        and lovingly copied from Pure CSS' home page. Pure is designed to get out of your way.
                        It is easy to override styles. You can use it alongside <a href="http://getbootstrap.com">Bootstrap</a>,
                        if you want (as you can with pure-components).
                    </p>
                    <p>
                        For details on Pure, see their website (<a href="https://purecss.io/start/">Pure CSS</a>)
                    </p>
                    <h2 class="content-subhead">Pure CSS Components<a class="content-link"></a></h2>
                    <p>
                        Pure CSS doesn't have many components, so I wrote some. And some of the components they have
                        are missing some useful functionality (unless you add in some JS). <em>Please note, this is
                        still a work in
                        progress. The usual cautions apply</em>.
                    </p>
                    <p>
                        Like Pure CSS, Pure.CSS Components is very small. It is only 2KB* (minified and zipped). Each
                        component is also available as a module. So, if you only need <strong>modals</strong>, and
                        nothing else, you
                        don't have to
                        include the entire package.
                    </p>
                    <p>
                        Finally, please note that Pure.CSS Components makes liberal use of
                        <a href="http://caniuse.com/#search=flexbox" target="_blank"><strong>flexbox</strong></a>.
                        Therefore,
                        it is only supported on more modern browsers (IE11*, FF 50, Chrome 49, Safari 10, Opera 43).
                    </p>
                    <p>
                        *IE11, which has a known buggy implementation of flexbox, has been quickly tested. My quick
                        tests indicated
                        that you shouldn't have any problems using Pure.CSS Components on IE11; however, <em>caveat
                        emptor</em>.
                    </p>
                </div>

                <div class="content introduction-content">
                    <a name="installation"></a>
                    <h2 class="content-subhead">Installation</h2>

                    <p>
                        Pure-components offers the following builds:
                    </p>
                    <ul>
                        <li>
                            Bundled: This build has Pure CSS bundled with Pure-components
                        </li>
                        <li>
                            Stand Alone: Just Pure-components
                        </li>
                        <li>
                            Individual modules: Each component stands alone, and can be used in isolation.
                            Use individual modules, and use only what you need.
                        </li>
                    </ul>
                    <p>
                        You can install Pure-components from npm,
                        <a href="https://github.com/joe-crick/pure-css-components/blob/master/dist/pure-components.tar.gz?raw=true">download</a>
                        it, or get it from a
                        CDN.
                    </p>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;link rel=<span style="color: #a31515">&quot;stylesheet&quot;</span>
         href=<span style="color: #a31515">&quot;https://unpkg.com/purecss-components@0.0.12/dist/pure-components.css&quot;</span>
         integrity=<span style="color: #a31515">&quot;sha384-3vxDvOU9lXU+bcgTkQNhnflfhRt/EFEGLtd3jQn8vQRGGQlpBX9VOq4oIufzLOO9&quot;</span>
         crossorigin=<span style="color: #a31515">&quot;anonymous&quot;</span>&gt;
</pre>
                    </div>
                    <p>
                        You can browse the CDN for full details on CDN-available modules:
                    <pre><code>https://unpkg.com/purecss-components@0.0.10/dist/</code></pre>
                    </p>

                    <p>
                        npm install:
                    </p>

                    <div>
                        <pre><code>yarn add purecss-components</code></pre>
                    </div>
                    <p>or</p>
                    <div>
                        <pre><code>npm i purecss-components</code></pre>
                    </div>
                </div>

                <div class="content accordion-content">
                    <a name="accordion"></a>
                    <h2 class="content-subhead">Accordion</h2>

                    <ul class="pcssc-accordion">
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="a-1"
                                   name="a-tab-head"
                                   role="tab"
                                   checked/>
                            <label for="a-1" class="accordion-section-header">Option 0</label>
                            <div class="accordion-section-content">
                                <h2>Heading 1</h2>
                                Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
                                viverra
                                vel vestibulum in,
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="a-2"
                                   name="a-tab-head"
                                   role="tab"/>
                            <label for="a-2" class="accordion-section-header">Option 1</label>
                            <div class="accordion-section-content">
                                <h2>Heading 1</h2>
                                Content goes here
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="a-3"
                                   name="a-tab-head"
                                   role="tab"/>
                            <label for="a-3" class="accordion-section-header">Option 2</label>
                            <div class="accordion-section-content">
                                <h2>Heading 2</h2>
                                Lorem Ipsum
                            </div>
                        </li>
                    </ul>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;ul class=<span style="color: #a31515">&quot;pcssc-accordion&quot;</span>&gt;
    &lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
        &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;a-1&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span
                            style="color: #a31515">&quot;tab&quot;</span>
               checked/&gt;
        &lt;label for=<span style="color: #a31515">&quot;a-1&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 0&lt;/label&gt;
        &lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
            &lt;h2&gt;Heading 1&lt;/h2&gt;
            Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
            viverra
            vel vestibulum in,
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
        &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;a-2&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span
                            style="color: #a31515">&quot;tab&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;a-2&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 1&lt;/label&gt;
        &lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
            &lt;h2&gt;Heading 1&lt;/h2&gt;
            Content goes here
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
        &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;a-3&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span
                            style="color: #a31515">&quot;tab&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;a-3&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 2&lt;/label&gt;
        &lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
            &lt;h2&gt;Heading 2&lt;/h2&gt;
            Lorem Ipsum
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>
                    </div>


                </div>

                <div class="content alert-content">
                    <a name="alert"></a>
                    <h2 class="content-subhead">Alert</h2>
                    <p>
                        <em>NOTE: A few styles have been applied here for illustrative purposes. The actual
                            styling of an alert is, in keeping with the spirit of Pure, up to you.</em>
                    </p>
                    <div class="pcssc-alert">
                        <input type="checkbox" id="close-alert" class="alert-toggle pcssc-invisible"/>
                        <div class="alert alert-success alert-dismissible" role="alert">
                            <span><strong>Uh oh...</strong> Something happened...</span>
                            <label for="close-alert" class="close-alert" aria-label="Close">
                                <span aria-invisible="true">&times;</span>
                            </label>
                        </div>
                    </div>

                    <div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-alert&quot;</span>&gt;
    &lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;close-alert&quot;</span> class=<span
                            style="color: #a31515">&quot;alert-toggle pcssc-invisible&quot;</span>/&gt;
    &lt;div class=<span style="color: #a31515">&quot;alert alert-success alert-dismissible&quot;</span> role=<span
                            style="color: #a31515">&quot;alert&quot;</span>&gt;
        &lt;span&gt;&lt;strong&gt;Uh oh...&lt;/strong&gt; Something happened...&lt;/span&gt;
        &lt;label for=<span style="color: #a31515">&quot;close-alert&quot;</span> class=<span style="color: #a31515">&quot;close-alert&quot;</span> aria-label=<span
                            style="color: #a31515">&quot;Close&quot;</span>&gt;
            &lt;span aria-invisible=<span style="color: #a31515">&quot;true&quot;</span>&gt;&amp;times;&lt;/span&gt;
        &lt;/label&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>

                </div>

                <div class="content carousel-content">
                    <a name="carousel"></a>
                    <h2 class="content-subhead">Carousel</h2>

                    <h3>Linear Carousel</h3>

                    <ul class="pcssc-carousel">
                        <li class="carousel-item">
                            <input class="carousel-nav pcssc-invisible" type="radio" name="carousel" id="carousel-one"
                                   checked/>
                            <label for="carousel-one" class="carousel-label linear-carousel-label"></label>
                            <img class="carousel-content"
                                 src="http://www.preussenchronik.de/bilder/1186_Klemens_Wenzel_Fuerst_von_Metternich.jpeg"
                                 alt=""/>
                            <label for="carousel-two" class="carousel-label"></label>
                        </li>
                        <li class="carousel-item">
                            <input class="carousel-nav pcssc-invisible" type="radio" name="carousel" id="carousel-two"/>
                            <label for="carousel-one" class="carousel-label linear-carousel-label"></label>
                            <img class="carousel-content"
                                 src="https://s-media-cache-ak0.pinimg.com/originals/fc/d7/b6/fcd7b6242ad041739357da9a237058ef.jpg"
                                 alt=""/>
                            <label for="carousel-three" class="carousel-label"></label>
                        </li>
                        <li class="carousel-item">
                            <input class="carousel-nav pcssc-invisible" type="radio" name="carousel"
                                   id="carousel-three"/>
                            <label for="carousel-two" class="carousel-label linear-carousel-label"></label>
                            <img class="carousel-content"
                                 src="http://adamworld.typepad.com/.a/6a012876b7eaf6970c0120a7bd78bf970b-pi" alt=""/>
                            <label class="carousel-label carousel-last-nav"></label>
                        </li>
                    </ul>

                    <div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;ul class=<span style="color: #a31515">&quot;pcssc-carousel&quot;</span>&gt;
    &lt;li class=<span style="color: #a31515">&quot;carousel-item&quot;</span>&gt;
        &lt;input class=<span style="color: #a31515">&quot;carousel-nav pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;radio&quot;</span> name=<span style="color: #a31515">&quot;carousel&quot;</span> id=<span
                            style="color: #a31515">&quot;carousel-one&quot;</span> checked/&gt;
        &lt;label for=<span style="color: #a31515">&quot;carousel-one&quot;</span> class=<span style="color: #a31515">&quot;carousel-label linear-carousel-label&quot;</span>&gt;&lt;/label&gt;
        &lt;img class=<span style="color: #a31515">&quot;carousel-content&quot;</span>
             src=<span style="color: #a31515">&quot;http://www.preussenchronik.de/bilder/1186_Klemens_Wenzel_Fuerst_von_Metternich.jpeg&quot;</span>
             alt=<span style="color: #a31515">&quot;&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;carousel-two&quot;</span> class=<span style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;carousel-item&quot;</span>&gt;
        &lt;input class=<span style="color: #a31515">&quot;carousel-nav pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;radio&quot;</span> name=<span style="color: #a31515">&quot;carousel&quot;</span> id=<span
                            style="color: #a31515">&quot;carousel-two&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;carousel-one&quot;</span> class=<span style="color: #a31515">&quot;carousel-label linear-carousel-label&quot;</span>&gt;&lt;/label&gt;
        &lt;img class=<span style="color: #a31515">&quot;carousel-content&quot;</span>
             src=<span style="color: #a31515">&quot;https://s-media-cache-ak0.pinimg.com/originals/fc/d7/b6/fcd7b6242ad041739357da9a237058ef.jpg&quot;</span>
             alt=<span style="color: #a31515">&quot;&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;carousel-three&quot;</span> class=<span style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;carousel-item&quot;</span>&gt;
        &lt;input class=<span style="color: #a31515">&quot;carousel-nav pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;radio&quot;</span> name=<span style="color: #a31515">&quot;carousel&quot;</span> id=<span
                            style="color: #a31515">&quot;carousel-three&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;carousel-two&quot;</span> class=<span style="color: #a31515">&quot;carousel-label linear-carousel-label&quot;</span>&gt;&lt;/label&gt;
        &lt;img class=<span style="color: #a31515">&quot;carousel-content&quot;</span>
             src=<span style="color: #a31515">&quot;http://adamworld.typepad.com/.a/6a012876b7eaf6970c0120a7bd78bf970b-pi&quot;</span> alt=<span
                            style="color: #a31515">&quot;&quot;</span>/&gt;
        &lt;label class=<span style="color: #a31515">&quot;carousel-label carousel-last-nav&quot;</span>&gt;&lt;/label&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>
                    </div>


                    <h3>Circular Carousel</h3>

                    <ul class="pcssc-carousel">
                        <li class="carousel-item">
                            <input class="carousel-nav pcssc-invisible" type="radio" name="c-carousel"
                                   id="c-carousel-one"
                                   checked/>
                            <label for="c-carousel-three" class="carousel-label"></label>
                            <img class="carousel-content"
                                 src="http://www.preussenchronik.de/bilder/1186_Klemens_Wenzel_Fuerst_von_Metternich.jpeg"
                                 alt=""/>
                            <label for="c-carousel-two" class="carousel-label"></label>
                        </li>
                        <li class="carousel-item">
                            <input class="carousel-nav pcssc-invisible" type="radio" name="c-carousel"
                                   id="c-carousel-two"/>
                            <label for="c-carousel-one" class="carousel-label"></label>
                            <img class="carousel-content"
                                 src="https://s-media-cache-ak0.pinimg.com/originals/fc/d7/b6/fcd7b6242ad041739357da9a237058ef.jpg"
                                 alt=""/>
                            <label for="c-carousel-three" class="carousel-label"></label>
                        </li>
                        <li class="carousel-item">
                            <input class="carousel-nav pcssc-invisible" type="radio" name="c-carousel"
                                   id="c-carousel-three"/>
                            <label for="c-carousel-two" class="carousel-label"></label>
                            <img class="carousel-content"
                                 src="http://adamworld.typepad.com/.a/6a012876b7eaf6970c0120a7bd78bf970b-pi" alt=""/>
                            <label for="c-carousel-one" class="carousel-label"></label>
                        </li>
                    </ul>

                    <div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;ul class=<span style="color: #a31515">&quot;pcssc-carousel&quot;</span>&gt;
    &lt;li class=<span style="color: #a31515">&quot;carousel-item&quot;</span>&gt;
        &lt;input class=<span style="color: #a31515">&quot;carousel-nav pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;radio&quot;</span> name=<span style="color: #a31515">&quot;c-carousel&quot;</span> id=<span
                            style="color: #a31515">&quot;c-carousel-one&quot;</span>
               checked/&gt;
        &lt;label for=<span style="color: #a31515">&quot;c-carousel-three&quot;</span> class=<span
                            style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
        &lt;img class=<span style="color: #a31515">&quot;carousel-content&quot;</span>
             src=<span style="color: #a31515">&quot;http://www.preussenchronik.de/bilder/1186_Klemens_Wenzel_Fuerst_von_Metternich.jpeg&quot;</span>
             alt=<span style="color: #a31515">&quot;&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;c-carousel-two&quot;</span> class=<span style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;carousel-item&quot;</span>&gt;
        &lt;input class=<span style="color: #a31515">&quot;carousel-nav pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;radio&quot;</span> name=<span style="color: #a31515">&quot;c-carousel&quot;</span> id=<span
                            style="color: #a31515">&quot;c-carousel-two&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;c-carousel-one&quot;</span> class=<span style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
        &lt;img class=<span style="color: #a31515">&quot;carousel-content&quot;</span>
             src=<span style="color: #a31515">&quot;https://s-media-cache-ak0.pinimg.com/originals/fc/d7/b6/fcd7b6242ad041739357da9a237058ef.jpg&quot;</span>
             alt=<span style="color: #a31515">&quot;&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;c-carousel-three&quot;</span> class=<span
                            style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;carousel-item&quot;</span>&gt;
        &lt;input class=<span style="color: #a31515">&quot;carousel-nav pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;radio&quot;</span> name=<span style="color: #a31515">&quot;c-carousel&quot;</span> id=<span
                            style="color: #a31515">&quot;c-carousel-three&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;c-carousel-two&quot;</span> class=<span style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
        &lt;img class=<span style="color: #a31515">&quot;carousel-content&quot;</span>
             src=<span style="color: #a31515">&quot;http://adamworld.typepad.com/.a/6a012876b7eaf6970c0120a7bd78bf970b-pi&quot;</span> alt=<span
                            style="color: #a31515">&quot;&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;c-carousel-one&quot;</span> class=<span style="color: #a31515">&quot;carousel-label&quot;</span>&gt;&lt;/label&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>
                    </div>


                </div>

                <div class="content collapsing-content">
                    <a name="collapse"></a>
                    <h2 class="content-subhead">Collapse</h2>

                    <p>
                        <em>NOTE: A few styles have been applied to the collapse content for illustrative purposes. The
                            actual
                            styling of a collapse is, in keeping with the spirit of Pure, up to you.</em>
                    </p>

                    <h3>Basic Collapse</h3>

                    <div class="pcssc-collapse">
                        <label for="collapse-toggle" class="collapse-button pure-button" aria-label="Toggle">
                            <span>Toggle</span>
                        </label>
                        <input type="checkbox" id="collapse-toggle" class="collapse-toggle pcssc-invisible"/>
                        <div class="collapse-content pcssc-invisible">
                            Pooka pooka!
                        </div>
                    </div>


                    <div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-collapse&quot;</span>&gt;
    &lt;label for=<span style="color: #a31515">&quot;collapse-toggle&quot;</span> class=<span style="color: #a31515">&quot;collapse-button pure-button&quot;</span> aria-label=<span
                            style="color: #a31515">&quot;Toggle&quot;</span>&gt;
        &lt;span&gt;Toggle&lt;/span&gt;
    &lt;/label&gt;
    &lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;collapse-toggle&quot;</span> class=<span
                            style="color: #a31515">&quot;collapse-toggle pcssc-invisible&quot;</span>/&gt;
    &lt;div class=<span style="color: #a31515">&quot;collapse-content pcssc-invisible&quot;</span>&gt;
        Pooka pooka!
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>


                    <h3>Toggling Button Label Collapse</h3>

                    <div class="pcssc-collapse collapse-toggle-button">
                        <input type="checkbox" id="collapse-toggle-button" class="collapse-toggle pcssc-invisible"/>
                        <label for="collapse-toggle-button" class="collapse-button pure-button" aria-label="Toggle">
                            <span class="collapse-button-label">Open</span>
                            <span class="collapse-button-label pcssc-invisible">Close</span>
                        </label>
                        <div class="collapse-content pcssc-invisible">
                            Pooka pooka!
                        </div>
                    </div>

                    <div style="background: #ffffff; margin-top: 50px;overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-collapse collapse-toggle-button&quot;</span>&gt;
    &lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;collapse-toggle-button&quot;</span> class=<span
                            style="color: #a31515">&quot;collapse-toggle pcssc-invisible&quot;</span>/&gt;
    &lt;label for=<span style="color: #a31515">&quot;collapse-toggle-button&quot;</span> class=<span
                            style="color: #a31515">&quot;collapse-button pure-button&quot;</span> aria-label=<span
                            style="color: #a31515">&quot;Toggle&quot;</span>&gt;
        &lt;span class=<span style="color: #a31515">&quot;collapse-button-label&quot;</span>&gt;Open&lt;/span&gt;
        &lt;span class=<span style="color: #a31515">&quot;collapse-button-label pcssc-invisible&quot;</span>&gt;Close&lt;/span&gt;
    &lt;/label&gt;
    &lt;div class=<span style="color: #a31515">&quot;collapse-content pcssc-invisible&quot;</span>&gt;
        Pooka pooka!
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>

                </div>

                <div class="content drop-down-content">
                    <a name="dropdown"></a>
                    <h2 class="content-subhead">Dropdown</h2>

                    <div class="pcssc-dropdown">
                        <div tabindex="0" class="dropdown-toggle focus-toggle pure-button">Dropdown Button</div>
                        <label for="menu-toggle" class="pure-button click-toggle" aria-label="Toggle">Dropdown
                            Buton</label>
                        <input type="checkbox" id="menu-toggle" class="dropdown-toggle pcssc-invisible"/>
                        <ul class="dropdown-content">
                            <li class="dropdown-menu-item">
                                <button class="dropdown-action-item">Edit</button>
                            </li>
                            <li class="dropdown-menu-item">
                                <button class="dropdown-action-item">Delete</button>
                            </li>
                        </ul>
                    </div>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-dropdown&quot;</span>&gt;
    &lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;dropdown-toggle focus-toggle pure-button&quot;</span>&gt;Dropdown Button&lt;/div&gt;
    &lt;label for=<span style="color: #a31515">&quot;menu-toggle&quot;</span> class=<span style="color: #a31515">&quot;pure-button click-toggle&quot;</span> aria-label=<span
                            style="color: #a31515">&quot;Toggle&quot;</span>&gt;Dropdown
        Buton&lt;/label&gt;
    &lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;menu-toggle&quot;</span> class=<span
                            style="color: #a31515">&quot;dropdown-toggle pcssc-invisible&quot;</span>/&gt;
    &lt;ul class=<span style="color: #a31515">&quot;dropdown-content&quot;</span>&gt;
        &lt;li class=<span style="color: #a31515">&quot;dropdown-menu-item&quot;</span>&gt;
            &lt;button class=<span style="color: #a31515">&quot;dropdown-action-item&quot;</span>&gt;Edit&lt;/button&gt;
        &lt;/li&gt;
        &lt;li class=<span style="color: #a31515">&quot;dropdown-menu-item&quot;</span>&gt;
            &lt;button class=<span style="color: #a31515">&quot;dropdown-action-item&quot;</span>&gt;Delete&lt;/button&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</pre>
                    </div>


                </div>

                <div class="content menu-content">
                    <a name="menu"></a>
                    <h2 class="content-subhead">Collapsing Menu</h2>

                    <p>
                        The menu on the left side of this page is an example of a left-side collapsing menu. The
                        collapsing menu builds off of the <a href="#dropdown"><strong>dropdown</strong></a> component,
                        and
                        Pure CSS' vertical <a href="https://purecss.io/menus/"><strong>menu</strong></a>. As a
                        stand-alone module, the collapsing
                        menu requires both <strong>dropdown.css</strong> and <strong>menu.css</strong>.
                    </p>

<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-collapsing-menu pcssc-menu-left&quot;</span>&gt;
    &lt;a class=<span style="color: #a31515">&quot;pure-menu-heading&quot;</span> href=<span style="color: #a31515">&quot;#top&quot;</span>&gt;Pure
        &lt;div class=<span style="color: #a31515">&quot;small-caps&quot;</span>&gt;components&lt;/div&gt;
    &lt;/a&gt;
    &lt;div class=<span style="color: #a31515">&quot;pcssc-dropdown&quot;</span>&gt;
        &lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;dropdown-toggle focus-toggle menu-link&quot;</span>&gt;
            &lt;span&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;label for=<span style="color: #a31515">&quot;main-menu-toggle&quot;</span> class=<span style="color: #a31515">&quot;menu-link click-toggle&quot;</span> aria-label=<span style="color: #a31515">&quot;Toggle&quot;</span>&gt;
            &lt;span&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;main-menu-toggle&quot;</span> class=<span style="color: #a31515">&quot;dropdown-toggle pcssc-invisible&quot;</span>/&gt;
        &lt;ul class=<span style="color: #a31515">&quot;dropdown-content pure-menu-list pure-menu&quot;</span>&gt;
            &lt;li class=<span style="color: #a31515">&quot;pure-menu-item&quot;</span>&gt;
                &lt;a href=<span style="color: #a31515">&quot;#installation&quot;</span> class=<span style="color: #a31515">&quot;pure-menu-link&quot;</span>&gt;Installation&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=<span style="color: #a31515">&quot;pure-menu-item menu-item-divided&quot;</span>&gt;
                &lt;a href=<span style="color: #a31515">&quot;#accordion&quot;</span> class=<span style="color: #a31515">&quot;pure-menu-link&quot;</span>&gt;Accordion&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class=<span style="color: #a31515">&quot;pure-menu-item&quot;</span>&gt;
                &lt;a href=<span style="color: #a31515">&quot;#alert&quot;</span> class=<span style="color: #a31515">&quot;pure-menu-link&quot;</span>&gt;Alert&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre></div>


                </div>

                <div class="content modal-content">
                    <a name="modal"></a>
                    <h2 class="content-subhead">Modal</h2>

                    <div class="pcssc-modal">
                        <input type="radio" class="open-modal pcssc-invisible" id="test-modal" name="modal-toggle"/>
                        <label for="test-modal" class="pure-button">Open Modal</label>
                        <div class="modal-container pcssc-invisible">
                            <div class="modal-frame">
                                <div class="modal-header">
                                    Header
                                    <input type="radio" id="close-modal" name="modal-toggle"
                                           class="close-modal pcssc-invisible"/>
                                    <label for="close-modal" class="close-button">x</label>
                                </div>
                                <div class="modal-body">
                                    Body
                                </div>
                            </div>
                        </div>
                    </div>

                    <div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-modal&quot;</span>&gt;
    &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;open-modal pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;test-modal&quot;</span> name=<span style="color: #a31515">&quot;modal-toggle&quot;</span>/&gt;
    &lt;label for=<span style="color: #a31515">&quot;test-modal&quot;</span> class=<span style="color: #a31515">&quot;pure-button&quot;</span>&gt;Open Modal&lt;/label&gt;
    &lt;div class=<span style="color: #a31515">&quot;modal-container pcssc-invisible&quot;</span>&gt;
        &lt;div class=<span style="color: #a31515">&quot;modal-frame&quot;</span>&gt;
            &lt;div class=<span style="color: #a31515">&quot;modal-header&quot;</span>&gt;
                Header
                &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> id=<span style="color: #a31515">&quot;close-modal&quot;</span> name=<span
                            style="color: #a31515">&quot;modal-toggle&quot;</span>
                       class=<span style="color: #a31515">&quot;close-modal pcssc-invisible&quot;</span>/&gt;
                &lt;label for=<span style="color: #a31515">&quot;close-modal&quot;</span> class=<span
                            style="color: #a31515">&quot;close-button&quot;</span>&gt;x&lt;/label&gt;
            &lt;/div&gt;
            &lt;div class=<span style="color: #a31515">&quot;modal-body&quot;</span>&gt;
                Body
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>


                </div>

                <div class="content popover-content">
                    <a name="popover"></a>
                    <h2 class="content-subhead">Popover</h2>

                    <h3>Toggleable</h3>

                    <div class="pcssc-popover">
                        <label class="pure-button popover-toggle-label" for="popover-one">Bottom Popover</label>
                        <input class="popover-toggle pcssc-invisible" type="checkbox" name="popover-toggle"
                               id="popover-one"/>
                        <div class="popover popover-bottom">
                            <div class="arrow up-arrow"></div>
                            <h3 class="popover-title">Popover bottom</h3>
                            <div class="popover-content">
                                <p>The quick brown fox jumped over the lazy dog.</p>
                            </div>
                        </div>
                    </div>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-popover&quot;</span>&gt;
    &lt;label class=<span style="color: #a31515">&quot;pure-button popover-toggle-label&quot;</span> <span
                            style="color: #0000ff">for</span>=<span
                            style="color: #a31515">&quot;popover-one&quot;</span>&gt;Bottom Popover&lt;/label&gt;
    &lt;input class=<span style="color: #a31515">&quot;popover-toggle pcssc-invisible&quot;</span> type=<span
                            style="color: #a31515">&quot;checkbox&quot;</span> name=<span style="color: #a31515">&quot;popover-toggle&quot;</span> id=<span
                            style="color: #a31515">&quot;popover-one&quot;</span>/&gt;
    &lt;div class=<span style="color: #a31515">&quot;popover popover-bottom&quot;</span>&gt;
        &lt;div class=<span style="color: #a31515">&quot;arrow up-arrow&quot;</span>&gt;&lt;/div&gt;
        &lt;h3 class=<span style="color: #a31515">&quot;popover-title&quot;</span>&gt;Popover bottom&lt;/h3&gt;
        &lt;div class=<span style="color: #a31515">&quot;popover-content&quot;</span>&gt;
            &lt;p&gt;The quick brown fox jumped over the lazy dog.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>


                    <h3>Dismissable</h3>

                    <div class="pcssc-popover">
                        <div tabindex="0"
                             class="pure-button popover-toggle popover-toggle-dismissable popover-dismissable-right">
                            Dismissable Right Popover
                        </div>
                        <div class="popover popover-right">
                            <div class="arrow left-arrow"></div>
                            <h3 class="popover-title">Popover Right</h3>
                            <div class="popover-content">
                                <p>The quick brown fox jumped over the lazy dog.</p>
                            </div>
                        </div>
                    </div>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-popover&quot;</span>&gt;
    &lt;div tabindex=<span style="color: #a31515">&quot;0&quot;</span> class=<span style="color: #a31515">&quot;pure-button popover-toggle popover-toggle-dismissable popover-dismissable-right&quot;</span>&gt;
        Dismissable Right Popover
    &lt;/div&gt;
    &lt;div class=<span style="color: #a31515">&quot;popover popover-right&quot;</span>&gt;
        &lt;div class=<span style="color: #a31515">&quot;arrow left-arrow&quot;</span>&gt;&lt;/div&gt;
        &lt;h3 class=<span style="color: #a31515">&quot;popover-title&quot;</span>&gt;Popover Right&lt;/h3&gt;
        &lt;div class=<span style="color: #a31515">&quot;popover-content&quot;</span>&gt;
            &lt;p&gt;The quick brown fox jumped over the lazy dog.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>


                </div>

                <!-- NOTE: THE FOLLOWING SECTION IS EXPERIMENTAL

                <div class="content section-indicators-content">
                    <a name="section-indicator"></a>
                    <h2 class="content-subhead">Section Indicator</h2>

                    <div class="section-indicator">
                        <div class="pure-menu pure-menu-horizontal">
                            <ul class="pure-menu-list">
                                <li class="pure-menu-item section-indicator-header">
                                    <section class="section-indicator-content">
                                        <p>Just the place for a Snark!" the Bellman cried,
                                            As he landed his crew with care;
                                            Supporting each man on the top of the tide
                                            By a finger entwined in his hair.</p>
                                    </section>
                                    <a href="#" class="pure-menu-link section-indicator-selector">One</a>
                                </li>
                                <li class="pure-menu-item section-indicator-header">
                                    <section class="section-indicator-content">
                                        <p> The crew was complete: it included a Boots—
                                            A maker of Bonnets and Hoods—
                                            A Barrister, brought to arrange their disputes—
                                            And a Broker, to value their goods.</p>
                                    </section>
                                    <a href="#" class="pure-menu-link section-indicator-selector">Two</a>
                                </li>
                                <li class="pure-menu-item section-indicator-header">
                                    <section class="section-indicator-content">
                                        <p>There was also a Beaver, that paced on the deck,
                                            Or would sit making lace in the bow:
                                            And had often (the Bellman said) saved them from wreck,
                                            Though none of the sailors knew how.</p>
                                    </section>
                                    <a href="#" class="pure-menu-link section-indicator-selector">Three</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                -->

                <div class="content tab-content">
                    <a name="tabs"></a>
                    <h2 class="content-subhead">Tabs</h2>

                    <p>
                        Tabs are implemented as an accordion. When rendering in a small viewport, tabs will always
                        render as an Accordion.
                    </p>

                    <p>
                        Pure.CSS Components currently offers three styles of tabs:
                    </p>

                    <ul>
                        <li>
                            <a href="#top-tabs">Top tabs</a>
                        </li>
                        <li>
                            <a href="#side-tabs">Side tabs</a>
                            <ul>
                                <li>
                                    <a href="#left-side-tabs">Left-side tabs</a>
                                </li>
                                <li>
                                    <a href="#right-side-tabs">Right-side tabs</a>
                                </li>
                            </ul>
                        </li>

                    </ul>

                    <a name="top-tabs"></a>
                    <h3>Top tabs</h3>

                    <ul class="pcssc-accordion accordion-tab">
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="zero"
                                   name="tab-head"
                                   role="tab"
                                   checked/>
                            <label for="zero" class="accordion-section-header">Option 0</label>
                            <div class="accordion-section-content">
                                <h2>Heading 1</h2>
                                Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
                                viverra
                                vel vestibulum in,
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="one"
                                   name="tab-head"
                                   role="tab"/>
                            <label for="one" class="accordion-section-header">Option 1</label>
                            <div class="accordion-section-content">
                                <h2>Heading 2</h2>
                                Content goes here
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="two"
                                   name="tab-head"
                                   role="tab"/>
                            <label for="two" class="accordion-section-header">Option 2</label>
                            <div class="accordion-section-content">
                                <h2>Heading 3</h2>
                                Lorem Ipsum
                            </div>
                        </li>
                    </ul>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;ul class=<span style="color: #a31515">&quot;pcssc-accordion accordion-tab&quot;</span>&gt;
    &lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
        &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;zero&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span
                            style="color: #a31515">&quot;tab&quot;</span>
               checked/&gt;
        &lt;label for=<span style="color: #a31515">&quot;zero&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 0&lt;/label&gt;
        &lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
            &lt;h2&gt;Heading 1&lt;/h2&gt;
            Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
            viverra
            vel vestibulum in,
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
        &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;one&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span
                            style="color: #a31515">&quot;tab&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;one&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 1&lt;/label&gt;
        &lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
            &lt;h2&gt;Heading 2&lt;/h2&gt;
            Content goes here
        &lt;/div&gt;
    &lt;/li&gt;
    &lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
        &lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector pcssc-invisible&quot;</span> id=<span
                            style="color: #a31515">&quot;two&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span
                            style="color: #a31515">&quot;tab&quot;</span>/&gt;
        &lt;label for=<span style="color: #a31515">&quot;two&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 2&lt;/label&gt;
        &lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
            &lt;h2&gt;Heading 3&lt;/h2&gt;
            Lorem Ipsum
        &lt;/div&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</pre>
                    </div>

                    <a name="side-tabs"></a>
                    <h3>Side tabs</h3>

                    <p>
                        Note: Side tab content is positioned absolutely. You will (currently) need to set the distance
                        of the tab
                        content from the tabs. For example, for a left-side tab:
                    </p>
                    <p>
                    <pre><code>left: 15%;</code></pre>
                    </p>
                    <p>
                        As with other tabs, side tabs collapse to an accordion on smaller devices.
                    </p>

                    <a name="left-side-tabs"></a>
                    <h4>Left side tabs</h4>

                    <ul class="pcssc-accordion accordion-tab left-accordion-side">
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="zero-left"
                                   name="tab-head-left"
                                   role="tab"
                                   checked/>
                            <label for="zero-left" class="accordion-section-header">Option 0</label>
                            <div class="accordion-section-content">
                                <h2>Heading 1</h2>
                                Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
                                viverra
                                vel vestibulum in,
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="one-left"
                                   name="tab-head-left"
                                   role="tab"/>
                            <label for="one-left" class="accordion-section-header">Option 1</label>
                            <div class="accordion-section-content">
                                <h2>Heading 2</h2>
                                Content goes here
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="two-left"
                                   name="tab-head-left"
                                   role="tab"/>
                            <label for="two-left" class="accordion-section-header">Option 2</label>
                            <div class="accordion-section-content">
                                <h2>Heading 3</h2>
                                Lorem Ipsum
                            </div>
                        </li>
                    </ul>

                    <p>
                        To make tab headings left sided, simply add the <strong>left-accordion-side</strong> class to
                        the
                        tab set:
                    </p>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;ul class=<span style="color: #a31515">&quot;pcssc-accordion accordion-tab left-accordion-side&quot;</span>&gt;
    <span style="color: #008000">&lt;!-- Tab Content Here --&gt;</span>
&lt;/ul&gt;
</pre>
                    </div>

                    <a name="right-side-tabs"></a>
                    <h4>Right side tabs</h4>

                    <ul class="pcssc-accordion accordion-tab right-accordion-side">
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="zero-right"
                                   name="tab-head-right"
                                   role="tab"
                                   checked/>
                            <label for="zero-right" class="accordion-section-header">Option 0</label>
                            <div class="accordion-section-content">
                                <h2>Heading 1</h2>
                                Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
                                viverra
                                vel vestibulum in,
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="one-right"
                                   name="tab-head-right"
                                   role="tab"/>
                            <label for="one-right" class="accordion-section-header">Option 1</label>
                            <div class="accordion-section-content">
                                <h2>Heading 2</h2>
                                Content goes here
                            </div>
                        </li>
                        <li class="accordion-section">
                            <input type="radio" class="accordion-section-selector pcssc-invisible" id="two-right"
                                   name="tab-head-right"
                                   role="tab"/>
                            <label for="two-right" class="accordion-section-header">Option 2</label>
                            <div class="accordion-section-content">
                                <h2>Heading 3</h2>
                                Lorem Ipsum
                            </div>
                        </li>
                    </ul>

                    <p>
                        To make tab headings right sided, simply add the <strong>right-accordion-side</strong> class to
                        the
                        tab set:
                    </p>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;ul class=<span style="color: #a31515">&quot;pcssc-accordion accordion-tab right-accordion-side&quot;</span>&gt;
    <span style="color: #008000">&lt;!-- Tab Content Here --&gt;</span>
&lt;/ul&gt;
</pre>
                    </div>


                </div>

                <div class="content tooltip-content">
                    <a name="tooltip"></a>
                    <h2 class="content-subhead">Tooltip</h2>

                    <div class="pcssc-tooltip">
                        <span class="tooltip-target">Hover Me</span>
                        <div class="tooltip-body">
                            <p>All around the mulberry bush, the Plunky chased the Sneezle</p>
                        </div>
                    </div>

                    <div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
                            style="margin: 0; line-height: 125%">
&lt;div class=<span style="color: #a31515">&quot;pcssc-tooltip&quot;</span>&gt;
    &lt;span class=<span style="color: #a31515">&quot;tooltip-target&quot;</span>&gt;Hover Me.&lt;/span&gt;
    &lt;div class=<span style="color: #a31515">&quot;tooltip-body&quot;</span>&gt;
        &lt;p&gt;All around the mulberry bush, the Plunky chased the Sneezle&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                    </div>


                </div>

                <div class="content jsutils-content">
                    <a name="js-utils"></a>
                    <h1 class="content-subhead">JS Utils</h1>

                    <p>
                        None of the Pure.Components components require any JavaScript in order to function. There may
                        be times, however, when it can be useful to have JavaScript to manipulate a component.
                        Therefore, I've created individual JS modules to complement the CSS only components. Don't
                        need JS? Don't bother. Need a little JS? Use just what you need. Each JS module is
                        incredibly small.
                    </p>
                    <p>
                        The following JS modules are currently available:
                    </p>

                    <ul>
                        <li>
                            <a href="https://github.com/joe-crick/pure-css-components-alert">Alerts</a>
                        </li>
                        <li>
                            <a href="https://github.com/joe-crick/pure-css-components-carousel">Carousels</a>
                        </li>
                        <li>
                            <a href="https://github.com/joe-crick/pure-css-components-modal">Modals</a>
                        </li>
                        <li>
                            <a href="https://github.com/joe-crick/pure-css-components-tabs">Tabs/Accordion</a>
                        </li>
                    </ul>

                </div>

                <div class="footer">
                    <div class="legal pure-g">
                        <div class="pure-u-1 u-sm-1-2">
                            <p class="legal-license">
                                All code on this site is licensed under the
                                <a href="https://opensource.org/licenses/MIT">MIT License</a>
                            </p>
                        </div>

                        <div class="pure-u-1 u-sm-1-2">
                            <ul class="legal-links">
                                <li><a href="https://github.com/joe-crick/pure-components/">GitHub Project</a></li>
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>