diff options
1 files changed, 105 insertions, 1572 deletions
| -rw-r--r-- | docs/components.html | 1677 |
diff --git a/docs/components.html b/docs/components.html index a931381..872cba0 100644 --- a/docs/components.html +++ b/docs/components.html @@ -23,7 +23,8 @@ </div> <div class="docs-sidebar off-canvas-sidebar" id="sidebar"> <div class="docs-brand"><a class="docs-logo" href="index.html"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework"> - <h2>SPECTRE</h2></a></div> + <h2>SPECTRE</h2></a> + </div> <div class="docs-nav"> <div class="accordion-container"> <div class="accordion"> @@ -31,11 +32,14 @@ <label class="accordion-header c-hand" for="accordion-getting-started">Getting started</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="getting-started.html#introduction">Introduction</a></li> - <li class="menu-item"><a href="getting-started.html#installation">Installation</a></li> - <li class="menu-item"><a href="getting-started.html#custom">Custom version</a></li> - <li class="menu-item"><a href="getting-started.html#browsers">Browser support</a></li> - <li class="menu-item"><a href="getting-started.html#whatsnew">What's new</a></li> + <li class="menu-item"><a href="getting-started/installation.html">Installation</a> + </li> + <li class="menu-item"><a href="getting-started/custom.html">Custom version</a> + </li> + <li class="menu-item"><a href="getting-started/browsers.html">Browser support</a> + </li> + <li class="menu-item"><a href="getting-started/whatsnew.html">What's new</a> + </li> </ul> </div> </div> @@ -44,14 +48,22 @@ <label class="accordion-header c-hand" for="accordion-elements">Elements</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="elements.html#typography">Typography</a></li> - <li class="menu-item"><a href="elements.html#tables">Tables</a></li> - <li class="menu-item"><a href="elements.html#buttons">Buttons</a></li> - <li class="menu-item"><a href="elements.html#forms">Forms</a></li> - <li class="menu-item"><a href="elements.html#icons">Icons</a></li> - <li class="menu-item"><a href="elements.html#labels">Labels</a></li> - <li class="menu-item"><a href="elements.html#code">Code</a></li> - <li class="menu-item"><a href="elements.html#media">Media</a></li> + <li class="menu-item"><a href="elements/typography.html">Typography</a> + </li> + <li class="menu-item"><a href="elements/tables.html">Tables</a> + </li> + <li class="menu-item"><a href="elements/buttons.html">Buttons</a> + </li> + <li class="menu-item"><a href="elements/forms.html">Forms</a> + </li> + <li class="menu-item"><a href="elements/icons.html">Icons</a> + </li> + <li class="menu-item"><a href="elements/labels.html">Labels</a> + </li> + <li class="menu-item"><a href="elements/code.html">Code</a> + </li> + <li class="menu-item"><a href="elements/media.html">Media</a> + </li> </ul> </div> </div> @@ -60,9 +72,12 @@ <label class="accordion-header c-hand" for="accordion-layout">Layout</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="layout.html#grid">Flexbox grid</a></li> - <li class="menu-item"><a href="layout.html#responsive">Responsive</a></li> - <li class="menu-item"><a href="layout.html#navbar">Navbar</a></li> + <li class="menu-item"><a href="layout/grid.html">Flexbox grid</a> + </li> + <li class="menu-item"><a href="layout/responsive.html">Responsive</a> + </li> + <li class="menu-item"><a href="layout/navbar.html">Navbar</a> + </li> </ul> </div> </div> @@ -71,25 +86,44 @@ <label class="accordion-header c-hand" for="accordion-components">Components</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="components.html#accordions">Accordions</a></li> - <li class="menu-item"><a href="components.html#avatars">Avatars</a></li> - <li class="menu-item"><a href="components.html#badges">Badges</a></li> - <li class="menu-item"><a href="components.html#bars">Bars</a></li> - <li class="menu-item"><a href="components.html#breadcrumbs">Breadcrumbs</a></li> - <li class="menu-item"><a href="components.html#cards">Cards</a></li> - <li class="menu-item"><a href="components.html#chips">Chips</a></li> - <li class="menu-item"><a href="components.html#empty">Empty states</a></li> - <li class="menu-item"><a href="components.html#menu">Menu</a></li> - <li class="menu-item"><a href="components.html#modals">Modals</a></li> - <li class="menu-item"><a href="components.html#nav">Nav</a></li> - <li class="menu-item"><a href="components.html#pagination">Pagination</a></li> - <li class="menu-item"><a href="components.html#panels">Panels</a></li> - <li class="menu-item"><a href="components.html#popovers">Popovers</a></li> - <li class="menu-item"><a href="components.html#steps">Steps</a></li> - <li class="menu-item"><a href="components.html#tabs">Tabs</a></li> - <li class="menu-item"><a href="components.html#tiles">Tiles</a></li> - <li class="menu-item"><a href="components.html#toasts">Toasts</a></li> - <li class="menu-item"><a href="components.html#tooltips">Tooltips</a></li> + <li class="menu-item"><a href="components/accordions.html">Accordions</a> + </li> + <li class="menu-item"><a href="components/avatars.html">Avatars</a> + </li> + <li class="menu-item"><a href="components/badges.html">Badges</a> + </li> + <li class="menu-item"><a href="components/bars.html">Bars</a> + </li> + <li class="menu-item"><a href="components/breadcrumbs.html">Breadcrumbs</a> + </li> + <li class="menu-item"><a href="components/cards.html">Cards</a> + </li> + <li class="menu-item"><a href="components/chips.html">Chips</a> + </li> + <li class="menu-item"><a href="components/empty.html">Empty states</a> + </li> + <li class="menu-item"><a href="components/menu.html">Menu</a> + </li> + <li class="menu-item"><a href="components/modals.html">Modals</a> + </li> + <li class="menu-item"><a href="components/nav.html">Nav</a> + </li> + <li class="menu-item"><a href="components/pagination.html">Pagination</a> + </li> + <li class="menu-item"><a href="components/panels.html">Panels</a> + </li> + <li class="menu-item"><a href="components/popovers.html">Popovers</a> + </li> + <li class="menu-item"><a href="components/steps.html">Steps</a> + </li> + <li class="menu-item"><a href="components/tabs.html">Tabs</a> + </li> + <li class="menu-item"><a href="components/tiles.html">Tiles</a> + </li> + <li class="menu-item"><a href="components/toasts.html">Toasts</a> + </li> + <li class="menu-item"><a href="components/tooltips.html">Tooltips</a> + </li> </ul> </div> </div> @@ -98,14 +132,22 @@ <label class="accordion-header c-hand" for="accordion-utilities">Utilities</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="utilities.html#colors">Colors</a></li> - <li class="menu-item"><a href="utilities.html#cursors">Cursors</a></li> - <li class="menu-item"><a href="utilities.html#display">Display</a></li> - <li class="menu-item"><a href="utilities.html#divider">Divider</a></li> - <li class="menu-item"><a href="utilities.html#loading">Loading</a></li> - <li class="menu-item"><a href="utilities.html#position">Position</a></li> - <li class="menu-item"><a href="utilities.html#shapes">Shapes</a></li> - <li class="menu-item"><a href="utilities.html#text">Text</a></li> + <li class="menu-item"><a href="utilities/colors.html">Colors</a> + </li> + <li class="menu-item"><a href="utilities/cursors.html">Cursors</a> + </li> + <li class="menu-item"><a href="utilities/display.html">Display</a> + </li> + <li class="menu-item"><a href="utilities/divider.html">Divider</a> + </li> + <li class="menu-item"><a href="utilities/loading.html">Loading</a> + </li> + <li class="menu-item"><a href="utilities/position.html">Position</a> + </li> + <li class="menu-item"><a href="utilities/shapes.html">Shapes</a> + </li> + <li class="menu-item"><a href="utilities/text.html">Text</a> + </li> </ul> </div> </div> @@ -114,1545 +156,36 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> - <li class="menu-item"><a href="experimentals.html#autocomplete">Autocomplete</a></li> - <li class="menu-item"><a href="experimentals.html#calendars">Calendars</a></li> - <li class="menu-item"><a href="experimentals.html#carousels">Carousels</a></li> - <li class="menu-item"><a href="experimentals.html#comparison">Comparison sliders</a></li> - <li class="menu-item"><a href="experimentals.html#filters">Filters</a></li> - <li class="menu-item"><a href="experimentals.html#meters">Meters</a></li> - <li class="menu-item"><a href="experimentals.html#off-canvas">Off-canvas</a></li> - <li class="menu-item"><a href="experimentals.html#parallax">Parallax</a></li> - <li class="menu-item"><a href="experimentals.html#progress">Progress</a></li> - <li class="menu-item"><a href="experimentals.html#sliders">Sliders</a></li> - <li class="menu-item"><a href="experimentals.html#timelines">Timelines</a></li> - </ul> - </div> - </div> - </div> - </div> - </div><a class="off-canvas-overlay" href="#close"></a> - <div class="off-canvas-content"> - <div class="docs-content" id="content"> - <div class="container" id="accordions"> - <h3 class="s-title">Accordions<a class="anchor" href="#accordions" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - <div class="show-md text-center"> - <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - </div> - <p>Accordions are used to toggle sections of content.</p> - <div class="docs-demo columns"> - <div class="column col-6 col-md-12"> - <div class="accordion"> - <input id="accordion-1" type="radio" name="accordion-radio" hidden="" checked=""> - <label class="accordion-header c-hand" for="accordion-1"><i class="icon icon-arrow-right mr-1"></i>Elements</label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"><a href="#accordions">Element 1</a></li> - <li class="menu-item"><a href="#accordions">Element 2</a></li> - </ul> - </div> - </div> - <div class="accordion"> - <input id="accordion-2" type="radio" name="accordion-radio" hidden=""> - <label class="accordion-header c-hand" for="accordion-2"><i class="icon icon-arrow-right mr-1"></i>Layout</label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"><a href="#accordions">Layout 1</a></li> - <li class="menu-item"><a href="#accordions">Layout 2</a></li> - </ul> - </div> - </div> - <div class="accordion"> - <input id="accordion-3" type="radio" name="accordion-radio" hidden=""> - <label class="accordion-header c-hand" for="accordion-3"><i class="icon icon-arrow-right mr-1"></i>Components</label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"><a href="#accordions">Component 1</a></li> - <li class="menu-item"><a href="#accordions">Component 2</a></li> - </ul> - </div> - </div> - </div> - <div class="column col-6 col-md-12"> - <div class="accordion"> - <input id="accordion-4" type="checkbox" name="accordion-checkbox" hidden="" checked=""> - <label class="accordion-header c-hand" for="accordion-4">Elements</label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"><a href="#accordions">Element 1</a></li> - <li class="menu-item"><a href="#accordions">Element 2</a></li> - </ul> - </div> - </div> - <div class="accordion"> - <input id="accordion-5" type="checkbox" name="accordion-checkbox" hidden=""> - <label class="accordion-header c-hand" for="accordion-5">Layout</label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"><a href="#accordions">Layout 1</a></li> - <li class="menu-item"><a href="#accordions">Layout 2</a></li> - </ul> - </div> - </div> - <div class="accordion"> - <input id="accordion-6" type="checkbox" name="accordion-checkbox" hidden=""> - <label class="accordion-header c-hand" for="accordion-6">Components</label> - <div class="accordion-body"> - <ul class="menu menu-nav"> - <li class="menu-item"><a href="#accordions">Component 1</a></li> - <li class="menu-item"><a href="#accordions">Component 2</a></li> - </ul> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- standard Accordions example --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-checkbox"</span> <span class="hljs-attr">hidden</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - Title - <span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span> - <span class="hljs-comment"><!-- Accordions content --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- mutually exclusive Accordions example (with same input names) --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"accordion-1"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"accordion-radio"</span> <span class="hljs-attr">hidden</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"accordion-1"</span>></span> - Title - <span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span> - <span class="hljs-comment"><!-- Accordions content --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <p>Alternatively, you can use <code>details</code> and <code>summary</code> instead of <code>input</code> radio or checkbox trick. - Add the <code>open</code> attribute to <code>details</code> to expand it. - Microsoft Edge support is <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/" target="_blank">under consideration</a>. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- details and summary Accordions example --></span> -<span class="hljs-tag"><<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>></span> - <span class="hljs-tag"><<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - Title - <span class="hljs-tag"></<span class="hljs-name">summary</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>></span> - <span class="hljs-comment"><!-- Accordions content --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">details</span>></span></code></pre> - </div> - <div class="container" id="avatars"> - <h3 class="s-title">Avatars<a class="anchor" href="#avatars" aria-hidden="true">#</a></h3> - <p>Avatars are user profile pictures. </p> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar XL"></figure> - <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar LG"></figure> - <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"></figure> - <figure class="avatar avatar-sm"><img src="img/avatar-4.png" alt="Avatar SM"></figure> - <figure class="avatar avatar-xs"><img src="img/avatar-5.png" alt="Avatar XS"></figure> - </div> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"></figure> - <figure class="avatar avatar-lg" data-initial="YZ"></figure> - <figure class="avatar" data-initial="YZ"></figure> - <figure class="avatar avatar-sm" data-initial="YZ"></figure> - <figure class="avatar avatar-xs" data-initial="YZ"></figure> - </div> - </div> - <p>Add the <code>avatar</code> class to <img> element. - There are 4 additional sizes available, including <code>avatar-xl</code>(64px), <code>avatar-lg</code>(48px), <code>avatar-sm</code>(24px), and <code>avatar-xs</code>(16px). - By default, the avatar size is 32px. - </p> - <p> - For users who don't have profile pictures, you may use their initials for avatars. - Add the <code>avatar</code> class and avatar size class to <div> element. - The <code>data-initial</code> attribute is the name appear inside the avatar. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- Basic avatar examples --></span> -<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>></span><span class="hljs-tag"></<span class="hljs-name">figure</span>></span> - -<span class="hljs-comment"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> -<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background-color: #5755d9;"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</code></pre> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"><img src="img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-2.png" alt="Avatar"></figure> - <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-3.png" alt="Avatar"></figure> - <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-4.png" alt="Avatar"></figure> - <figure class="avatar avatar-sm"><img src="img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-5.png" alt="Avatar"></figure> - <figure class="avatar avatar-xs"><img src="img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="img/avatar-1.png" alt="Avatar"></figure> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-5.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-icon"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span> -</code></pre> - <h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"><i class="avatar-presence online"></i></figure> - <figure class="avatar avatar-lg" data-initial="YZ"><i class="avatar-presence busy"></i></figure> - <figure class="avatar" data-initial="YZ"><i class="avatar-presence away"></i></figure> - <figure class="avatar avatar-sm" data-initial="YZ"><i class="avatar-presence offline"></i></figure> - <figure class="avatar avatar-xs" data-initial="YZ"><i class="avatar-presence online"></i></figure> - </div> - </div> - <p> - Avatars support presence indicators. - You can add an <i> element with the <code>avatar-presence</code> class, and add <code>online</code>, <code>busy</code> or <code>away</code> class for different status colors. - The default is gray which means offline. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span></code></pre> - </div> - <div class="container" id="badges"> - <h3 class="s-title">Badges<a class="anchor" href="#badges" aria-hidden="true">#</a></h3> - <p>Badges are often used as unread number indicators.</p> - <div class="docs-demo columns"> - <div class="column col-3 col-xs-6"><span class="badge" data-badge="">Notifications</span></div> - <div class="column col-3 col-xs-6"><span class="badge" data-badge="8">Notifications</span></div> - <div class="column col-3 col-xs-6"><span class="badge" data-badge="88">Notifications</span></div> - <div class="column col-3 col-xs-6"><span class="badge" data-badge="888">Notifications</span></div> - </div> - <p>Add the <code>badge</code> class to non self closing elements. - And add the <code>data-badge</code> attribute to define the content of a badge. - The badge will appear in the top-right direction of the element. - </p> - <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p> - <div class="docs-demo columns"> - <div class="column col-sm-12"> - <button class="btn badge" data-badge="">Button</button> - <button class="btn badge" data-badge="8">Button</button> - </div> - <div class="column col-sm-12"> - <button class="btn btn-primary badge" data-badge="">Button</button> - <button class="btn btn-primary badge" data-badge="8">Button</button> - </div> - <div class="column col-sm-12"> - <figure class="avatar avatar-xl badge" data-badge="8" data-initial="YZ"><img src="img/avatar-1.png" alt="YZ"></figure> - <figure class="avatar avatar-lg badge" data-badge="8" data-initial="YZ"><img src="img/avatar-2.png" alt="YZ"></figure> - <figure class="avatar badge" data-badge="8" data-initial="YZ"><img src="img/avatar-3.png" alt="YZ"></figure> - </div> - </div> - <p>Badges support <code>button</code> and <code>avatars</code> elements as well.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>></span> - Notifications -<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>></span> - Notifications -<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span>></span> - Button -<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">data-initial</span>=<span class="hljs-string">"YZ"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-3.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"YZ"</span>></span> -<span class="hljs-tag"></<span class="hljs-name">figure</span>></span></code></pre> - </div> - <div class="container" id="bars"> - <h3 class="s-title">Bars<a class="anchor" href="#bars" aria-hidden="true">#</a></h3> - <p> - Bars represent the progress of a task or the value within the known range. - Bars are custom components for displaying HTML5 <progress>, <meter> and input range elements. - </p> - <div class="docs-demo columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-sm"> - <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> - </div> - </div> - <div class="column col-8 col-xs-12"> - <div class="bar"> - <div class="bar-item tooltip" data-tooltip="50%" role="progressbar" style="width:50%;"></div> - </div> - </div> - <div class="column col-8 col-xs-12"> - <div class="bar"> - <div class="bar-item tooltip" data-tooltip="25%" role="progressbar" style="width:25%;">25%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;">15%</div> - <div class="bar-item tooltip" data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;">10%</div> - <div class="bar-item tooltip" data-tooltip="15%" role="progressbar" style="width:15%;">15%</div> - </div> - </div> - </div> - <p>Add a container element with the <code>bar</code> class. - And add child elements with the <code>bar-item</code> class. - The width percentage value is needed for every <code>bar-item</code>. - </p> - <p>There is the <code>bar-sm</code> class for thinner Bars. - Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal bars --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span> <span class="hljs-attr">aria-valuenow</span>=<span class="hljs-string">"25"</span> <span class="hljs-attr">aria-valuemin</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">aria-valuemax</span>=<span class="hljs-string">"100"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- multi-bars --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"25%"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>></span>25%<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;background:#818bd5;"</span>></span>15%<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <h4 class="s-subtitle" id="bars-slider">Slider bars<a class="anchor" href="#bars-slider" aria-hidden="true">#</a></h4> - <div class="docs-demo columns"> - <div class="column col-8 col-xs-12"> - <div class="bar bar-slider"> - <div class="bar-item" role="progressbar" style="width:50%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="50%" role="slider"></button> - </div> - </div> - </div> - <div class="column col-8 col-xs-12"> - <div class="bar bar-slider"> - <div class="bar-item" role="progressbar" style="width:15%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="25%" role="slider"></button> - </div> - <div class="bar-item" role="progressbar" style="width:65%;"> - <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button> - </div> - </div> - </div> - </div> - <p>You can add the <code>bar-slider</code> class to the Bars container. - And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. - You need to set the <code>bar-item</code> width manually to have the slider point. - </p> - <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- normal slider --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:25%;"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- range slider --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:15%;"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-item"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"progressbar"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:65%;"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar-slider-btn btn"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"slider"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="breadcrumbs"> - <h3 class="s-title">Breadcrumbs<a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a></h3> - <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p> - <div class="docs-demo columns"> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li> - </ul> - </div> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Change avatar">Change avatar</a></li> - </ul> - </div> - <div class="column col-12"> - <ul class="breadcrumb"> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Home">Home</a></li> - <li class="breadcrumb-item"><a class="tooltip" href="#breadcrumbs" data-tooltip="Settings">Settings</a></li> - <li class="breadcrumb-item">Search result: <a class="tooltip" href="#breadcrumbs" data-tooltip="Search result: Spectre">Spectre</a></li> - </ul> - </div> - </div> - <p>Add a container element with the <code>breadcrumb</code> class. - And add child elements with the <code>breadcrumb-item</code> class. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Settings<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Change avatar<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre> - </div> - <div class="container" id="cards"> - <h3 class="s-title">Cards<a class="anchor" href="#cards" aria-hidden="true">#</a></h3> - <div class="docs-ad docs-ad-sidebar text-center"> - <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio"></script> - </div> - <p>Cards are flexible content containers.</p> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"><img class="img-responsive" src="img/osx-el-capitan.jpg" alt="OS X El Capitan"></div> - <div class="card-header"> - <div class="card-title h5">Microsoft</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">Empower every person and every organization on the planet to achieve more.</div> - <div class="card-footer"><a class="btn btn-primary" href="#cards">Do</a></div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Hardware and software</div> - </div> - <div class="card-image"><img class="img-responsive" src="img/osx-yosemite.jpg" alt="OS X Yosemite"></div> - <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div> - <div class="card-footer"> - <div class="btn-group btn-group-block"> - <button class="btn btn-primary">Buy</button> - <button class="btn">Buy</button> - <button class="btn">Buy</button> - </div> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"><img class="img-responsive" src="img/macos-sierra-2.jpg" alt="macOS Sierra"></div> - <div class="card-header"> - <button class="btn btn-primary float-right"><i class="icon icon-plus"></i></button> - <div class="card-title h5">Google I/O</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.</div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-image"><img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan"></div> - <div class="card-footer"><a class="btn btn-primary" href="#cards">Buy</a><a class="btn btn-link" href="#cards">Share</a></div> - <div class="card-body"><strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.</div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Hardware and software</div> - </div> - <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div> - <div class="card-image"><img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra"></div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Google</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">Organize the world’s information and make it universally accessible and useful.</div> - <div class="card-image"><img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite"></div> - <div class="card-footer"><a class="btn btn-primary" href="#cards">Search</a><a class="btn btn-link" href="#cards">Share</a></div> - </div> - </div> - </div> - <p>Add a container element with the <code>card</code> class. - And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. - The <code>card-image</code> can be placed in any position. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-image"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/osx-el-capitan.jpg"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"img-responsive"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-title h5"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-subtitle text-gray"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="chips"> - <h3 class="s-title">Chips<a class="anchor" href="#chips" aria-hidden="true">#</a></h3> - <p>Chips are complex entities in small blocks. </p> - <div class="docs-demo columns"> - <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div> - <div class="column col-12"> - <div class="chip"> - <figure class="avatar avatar-sm" data-initial="TS" style="background-color: #5755d9;"></figure>Tony Stark - </div> - <div class="chip"><img class="avatar avatar-sm" src="img/avatar-1.png" alt="Thor Odinson">Thor Odinson</div> - <div class="chip"><img class="avatar avatar-sm" src="img/avatar-4.png" alt="Steve Rogers">Steve Rogers</div> - </div> - </div> - <p>Add a container element with the <code>chip</code> class. - And add child text element, buttons or avatars with the <code>avatar</code> class. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span>Crime<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span> - Biography - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-sm"</span>></span> - Yan Zhu - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"button"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="empty"> - <h3 class="s-title">Empty states<a class="anchor" href="#empty" aria-hidden="true">#</a></h3> - <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p> - <div class="docs-demo columns"> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div> - <p class="empty-title h5">You have no new messages</p> - <p class="empty-subtitle">Click the button to start a conversation</p> - <div class="empty-action"> - <button class="btn btn-primary">Send a message</button> - </div> - </div> - </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"><i class="icon icon-3x icon-mail"></i></div> - <p class="empty-title h5">You've successfully signed up</p> - <p class="empty-subtitle">Click the button to invite your friends</p> - <div class="empty-action"> - <button class="btn btn-primary">Invite your friends</button> - </div> - <div class="empty-action"> - <button class="btn btn-link">Skip</button> - </div> - </div> - </div> - <div class="column col-12"> - <div class="empty"> - <div class="empty-icon"><i class="icon icon-3x icon-people"></i></div> - <p class="empty-title h5">You are not following anyone</p> - <p class="empty-subtitle">Start to meet new friends</p> - <div class="empty-action input-group input-inline"> - <input class="form-input" type="text" placeholder=""> - <button class="btn btn-primary input-group-btn">Search</button> - </div> - </div> - </div> - </div> - <p> - An empty state component can include icons, messages (title and subtitle messages) and action buttons or any combination of those elements. - Add <code>empty-icon</code>, <code>empty-title</code>, <code>empty-subtitle</code> or <code>empty-action</code> to the elements. - HTML structure is exampled below. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-icon"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-people"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-title h5"</span>></span>You have no new messages<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-subtitle"</span>></span>Click the button to start a conversation.<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-action"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Send a message<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="menu"> - <h3 class="s-title">Menu<a class="anchor" href="#menu" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - <div class="show-md text-center"> - <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - </div> - <p>Menus are vertical list of links or buttons for actions and navigation.</p> - <div class="docs-demo columns"> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <div class="tile tile-centered"> - <div class="tile-icon"><img class="avatar" src="img/avatar-4.png" alt="Avatar"></div> - <div class="tile-content">Steve Rogers</div> - </div> + <li class="menu-item"><a href="experimentals/autocomplete.html">Autocomplete</a> </li> - <li class="divider"></li> - <li class="menu-item"> - <div class="menu-badge"> - <label class="label label-primary">2</label> - </div><a class="active" href="#menus">My profile</a> + <li class="menu-item"><a href="experimentals/calendars.html">Calendars</a> </li> - <li class="menu-item"><a href="#menus">Settings</a></li> - <li class="menu-item"><a href="#menus">Logout</a></li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="divider" data-content="LINKS"></li> - <li class="menu-item"><a href="#menus">Slack</a></li> - <li class="menu-item"><a href="#menus">Hipchat</a></li> - <li class="menu-item"><a href="#menus">Skype</a></li> - </ul> - </div> - <div class="column col-4 col-xs-12"> - <ul class="menu"> - <li class="menu-item"> - <label class="form-checkbox"> - <input type="checkbox" checked=""><i class="form-icon"></i> form-checkbox - </label> + <li class="menu-item"><a href="experimentals/carousels.html">Carousels</a> </li> - <li class="menu-item"> - <label class="form-radio"> - <input type="radio" checked=""><i class="form-icon"></i> form-radio - </label> + <li class="menu-item"><a href="experimentals/comparison.html">Comparison sliders</a> </li> - <li class="menu-item"> - <label class="form-switch"> - <input type="checkbox" checked=""><i class="form-icon"></i> form-switch - </label> + <li class="menu-item"><a href="experimentals/filters.html">Filters</a> </li> - </ul> - </div> - </div> - <p>Add a container element with the <code>menu</code> class. - And add child elements with the <code>menu-item</code> class. - You can separate menu items with a <code>divider</code>. - Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus. - </p> - <p>Menus also have <a href="elements.html#forms" target="_blank">Form controls</a> (checkbox, radio and checkbox) support.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> - <span class="hljs-comment"><!-- menu header text --></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span> <span class="hljs-attr">data-content</span>=<span class="hljs-string">"LINKS"</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-comment"><!-- menu item standard --></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Slack - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-comment"><!-- menu item with form control --></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> form-checkbox - <span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-comment"><!-- menu divider --></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>></span><span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-comment"><!-- menu item with badge --></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">label</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> Settings - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - </code></pre> - <h4 class="s-subtitle" id="menu-dropdown">Dropdown menu<a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a></h4> - <p>The dropdown is a combination of buttons and menus.</p> - <div class="docs-demo columns"> - <div class="column col-xs-12"> - <div class="dropdown"> - <div class="btn-group"><a class="btn btn-primary">dropdown button</a><a class="btn btn-primary dropdown-toggle" tabindex="0"><i class="icon icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"><a href="#dropdowns">Slack</a></li> - <li class="menu-item"><a href="#dropdowns">Hipchat</a></li> - <li class="menu-item"><a href="#dropdowns">Skype</a></li> - </ul> - </div> - </div> - </div> - <div class="column col-xs-12"> - <div class="dropdown"><a class="btn btn-link dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> - <ul class="menu"> - <li class="menu-item"><a href="#dropdowns">Slack</a></li> - <li class="menu-item"><a href="#dropdowns">Hipchat</a></li> - <li class="menu-item"><a href="#dropdowns">Skype</a></li> - </ul> - </div> - </div> - </div> - <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p> - <p>Add a container element with the <code>dropdown</code> class. - And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. - You also need to add <code>tabindex</code> to make the buttons focusable. - </p> - <p>If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p> - <div class="docs-demo columns"> - <div class="column col-xs-12 text-right"> - <div class="dropdown dropdown-right"><a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon icon-caret"></i></a> - <ul class="menu text-left"> - <li class="menu-item"><a href="#dropdowns">Slack</a></li> - <li class="menu-item"><a href="#dropdowns">Hipchat</a></li> - <li class="menu-item"><a href="#dropdowns">Skype</a></li> - </ul> - </div> - </div> - </div> - <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-comment"><!-- basic dropdown button --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>></span> - dropdown menu <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-comment"><!-- menu component --></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - -<span class="hljs-comment"><!-- dropdown button group --></span> -<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>></span> - dropdown button - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn dropdown-toggle"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"0"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - - <span class="hljs-comment"><!-- menu component --></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="modals"> - <h3 class="s-title">Modals<a class="anchor" href="#modals" aria-hidden="true">#</a></h3> - <p>Modals are flexible dialog prompts.</p> - <div class="docs-demo columns"> - <div class="column"><a class="btn btn-primary" href="#example-modal-1">Open Modal</a> - <div class="modal" id="example-modal-1"><a class="modal-overlay" href="#modals" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"><a class="btn btn-clear float-right" href="#modals" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p>This is the content inside the modal.</p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals">Close</a> - </div> - </div> - </div> - </div> - </div> - <p>Add a container element with the <code>modal</code> class. - And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. - You can add child elements with the <code>modal-header</code>, <code>modal-body</code> and <code>modal-footer</code> - any or all of them. - </p> - <p> - Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. - To make a modal appear, add the <code>active</code> class to the <code>modal</code> container. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal active"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"modal-id"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>></span>Modal title<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>></span> - <span class="hljs-comment"><!-- content here --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <h4 class="s-subtitle" id="modals-sizes">Modal sizes<a class="anchor" href="#modals-sizes" aria-hidden="true">#</a></h4> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"><a class="btn btn-primary" href="#example-modal-2">Open small size Modal</a> - <div class="modal modal-sm" id="example-modal-2"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <form> - <div class="form-group"> - <label class="form-label" for="input-example-7">Name</label> - <input class="form-input" id="input-example-7" type="text" placeholder="Name"> - </div> - <div class="form-group"> - <label class="form-label">Gender</label> - <label class="form-radio"> - <input type="radio" name="gender"><i class="form-icon"></i> Male - </label> - <label class="form-radio"> - <input type="radio" name="gender" checked=""><i class="form-icon"></i> Female - </label> - </div> - </form> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Submit</button><a class="btn btn-link" href="#modals-sizes" aria-label="Close">Close</a> - </div> - </div> - </div> - </div> - </div> - <p>Use the <code>modal-sm</code> class for a smaller modal dialog. - The container max width is <code>320px</code>. - </p> - <div class="docs-demo columns"> - <div class="column"><a class="btn btn-primary" href="#example-modal-3">Open large size Modal</a> - <div class="modal modal-lg" id="example-modal-3"><a class="modal-overlay" href="#modals-sizes" aria-label="Close"></a> - <div class="modal-container" role="document"> - <div class="modal-header"><a class="btn btn-clear float-right" href="#modals-sizes" aria-label="Close"></a> - <div class="modal-title h5">Modal title</div> - </div> - <div class="modal-body"> - <div class="content"> - <p>This is the content inside the modal.</p> - <h4>Lorem ipsum</h4> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p> - <p>Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.</p> - <h4>Cupcake ipsum</h4> - <p>Jelly-o sesame snaps halvah croissant oat cake cookie. Cheesecake bear claw topping. Chupa chups apple pie carrot cake chocolate cake caramels.</p> - <p>De braaaiiiins apocalypsi gorger omero prefrontal cortex undead survivor fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve.</p> - <h4>Candy ipsum</h4> - <p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar.</p> - <p>Caerphilly swiss fromage frais. Brie cheese and wine fromage frais chalk and cheese danish fontina smelly cheese who moved my cheese cow.</p> - </div> - </div> - <div class="modal-footer"> - <button class="btn btn-primary">Share</button><a class="btn btn-link" href="#modals-sizes">Close</a> - </div> - </div> - </div> - </div> - </div> - <p>Use the <code>modal-lg</code> class for a full size modal. - The container max width is <code>960px</code>. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal modal-sm"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#close"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-overlay"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Close"</span>></span><span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>></span> - <span class="hljs-comment"><!-- modal structure here --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="nav"> - <h3 class="s-title">Nav<a class="anchor" href="#nav" aria-hidden="true">#</a></h3> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <ul class="nav"> - <li class="nav-item"><a href="#nav">Elements</a></li> - <li class="nav-item active"><a href="#nav">Layout</a> - <ul class="nav"> - <li class="nav-item"><a href="#nav">Flexbox grid</a></li> - <li class="nav-item"><a href="#nav">Responsive</a></li> - <li class="nav-item"><a href="#nav">Navbar</a></li> - <li class="nav-item"><a href="#nav">Empty states</a></li> - </ul> + <li class="menu-item"><a href="experimentals/meters.html">Meters</a> </li> - <li class="nav-item"><a href="#nav">Components</a></li> - <li class="nav-item"><a href="#nav">Utilities</a></li> - </ul> - </div> - </div> - <p>Add a container element with the <code>nav</code> class. - And add child elements with the <code>nav-item</code> class. - The <code>nav-item</code> with the <code>active</code> class will be highlighted. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Elements<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Layout<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Flexbox grid<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Responsive<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Navbar<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Empty states<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Components<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Utilities<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre> - </div> - <div class="container" id="pagination"> - <h3 class="s-title">Pagination<a class="anchor" href="#pagination" aria-hidden="true">#</a></h3> - <div class="docs-demo columns"> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item"><a href="#pagination">Prev</a></li> - <li class="page-item"><a href="#pagination">1</a></li> - <li class="page-item"><span>...</span></li> - <li class="page-item"><a href="#pagination">4</a></li> - <li class="page-item active"><a href="#pagination">5</a></li> - <li class="page-item"><a href="#pagination">6</a></li> - <li class="page-item"><span>...</span></li> - <li class="page-item"><a href="#pagination">9</a></li> - <li class="page-item"><a href="#pagination">Next</a></li> - </ul> - </div> - <div class="column col-xs-12"> - <ul class="pagination"> - <li class="page-item disabled"><a href="#pagination" tabindex="-1">Prev</a></li> - <li class="page-item active"><a href="#pagination">1</a></li> - <li class="page-item"><a href="#pagination">2</a></li> - <li class="page-item"><a href="#pagination">3</a></li> - <li class="page-item"><span>...</span></li> - <li class="page-item"><a href="#pagination">9</a></li> - <li class="page-item"><a href="#pagination">Next</a></li> - </ul> - </div> - </div> - <p>Add a container element with the <code>pagination</code> class. - And add child elements with the <code>page-item</code> class. - The <code>page-item</code> with the <code>active</code> class will be highlighted. - You can add the <code>disabled</code> class to the <code>page-item</code> to have unclickable page links. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item disabled"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">tabindex</span>=<span class="hljs-string">"-1"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item active"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>1<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>2<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>3<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">span</span>></span>...<span class="hljs-tag"></<span class="hljs-name">span</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>12<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</code></pre> - <div class="docs-demo columns"> - <div class="column col-12"> - <ul class="pagination"> - <li class="page-item page-prev"><a href="#pagination"> - <div class="page-item-subtitle">Previous</div> - <div class="page-item-title h5">Getting started</div></a></li> - <li class="page-item page-next"><a href="#pagination"> - <div class="page-item-subtitle">Next</div> - <div class="page-item-title h5">Layout</div></a></li> - </ul> - </div> - </div> - <p>You could use previous and next pagination to navigate. </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-prev"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>></span>Previous<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>></span>Getting started<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-next"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>></span>Next<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>></span>Layout<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre> - </div> - <div class="container" id="panels"> - <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#</a></h3> - <p>Panels are flexible view container with auto-expand content section.</p> - <div class="docs-demo columns"> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header text-center"> - <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"></figure> - <div class="panel-title h5 mt-10">Bruce Banner</div> - <div class="panel-subtitle">THE HULK</div> - </div> - <nav class="panel-nav"> - <ul class="tab tab-block"> - <li class="tab-item active"><a href="#panels">Profile</a></li> - <li class="tab-item"><a href="#panels">Files</a></li> - <li class="tab-item"><a href="#panels">Tasks</a></li> - </ul> - </nav> - <div class="panel-body"> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title text-bold">E-mail</div> - <div class="tile-subtitle">bruce.banner@hulk.com</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg tooltip tooltip-left" data-tooltip="Edit E-mail"><i class="icon icon-edit"></i></button> - </div> - </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title text-bold">Skype</div> - <div class="tile-subtitle">bruce.banner</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> - </div> - <div class="tile tile-centered"> - <div class="tile-content"> - <div class="tile-title text-bold">Location</div> - <div class="tile-subtitle">Dayton, Ohio</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button> - </div> - </div> - </div> - <div class="panel-footer"> - <button class="btn btn-primary btn-block">Save</button> - </div> - </div> - </div> - <div class="column col-6 col-xs-12"> - <div class="panel"> - <div class="panel-header"> - <div class="panel-title h6">Comments</div> - </div> - <div class="panel-body"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"><img src="img/avatar-1.png" alt="Avatar"></figure> - </div> - <div class="tile-content"> - <p class="tile-title text-bold">Thor Odinson</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"><img src="img/avatar-2.png" alt="Avatar"></figure> - </div> - <div class="tile-content"> - <p class="tile-title text-bold">Bruce Banner</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar" data-initial="TS"></figure> - </div> - <div class="tile-content"> - <p class="tile-title text-bold">Tony Stark</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"><img src="img/avatar-4.png" alt="Avatar"></figure> - </div> - <div class="tile-content"> - <p class="tile-title text-bold">Steve Rogers</p> - <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - </div> - </div> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar"><img src="img/avatar-3.png" alt="Avatar"></figure> - </div> - <div class="tile-content"> - <p class="tile-title text-bold">Natasha Romanoff</p> - <p class="tile-subtitle">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - </div> - </div> - <div class="panel-footer"> - <div class="input-group"> - <input class="form-input" type="text" placeholder="Hello"> - <button class="btn btn-primary input-group-btn">Send</button> - </div> - </div> - </div> - </div> - </div> - <p>Add a container element with the <code>panel</code> class. - And add child elements with the <code>panel-header</code>, <code>panel-nav</code>, <code>panel-body</code> and/or <code>panel-footer</code> classes. - The <code>panel-body</code> can be auto expanded and vertically scrollable. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>></span>Comments<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>></span> - <span class="hljs-comment"><!-- navigation components: tabs, breadcrumbs or pagination --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-body"</span>></span> - <span class="hljs-comment"><!-- contents --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-footer"</span>></span> - <span class="hljs-comment"><!-- buttons or inputs --></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="popovers"> - <h3 class="s-title">Popovers<a class="anchor" href="#popovers" aria-hidden="true">#</a></h3> - <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p> - <div class="docs-demo columns"> - <div class="column col-3 col-sm-6"> - <div class="popover"><a class="btn btn-primary" href="#popovers">top popover</a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> - </div> - </div> - </div> - </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-right"><a class="btn btn-primary" href="#popovers">right popover</a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> - </div> - </div> - </div> - </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-bottom"><a class="btn btn-primary" href="#popovers">bottom popover</a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> - </div> - </div> - </div> - </div> - <div class="column col-3 col-sm-6"> - <div class="popover popover-left"><a class="btn btn-primary" href="#popovers">left popover</a> - <div class="popover-container"> - <div class="card"> - <div class="card-header"> - <div class="card-title h5">Apple</div> - <div class="card-subtitle text-gray">Software and hardware</div> - </div> - <div class="card-body">To make a contribution to the world by making tools for the mind that advance humankind.</div> - <div class="card-footer"> - <button class="btn btn-primary">Buy</button> - </div> - </div> - </div> - </div> - </div> - </div> - <p>Wrap an element by a container with the <code>popover</code> class. - And add a container with the <code>popover-container</code> next to the element. - You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. - </p> - <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. - By default, the popovers appear above the element. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover popover-right"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>right popover<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover-container"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>></span> - ... - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="steps"> - <h3 class="s-title">Steps<a class="anchor" href="#steps" aria-hidden="true">#</a></h3> - <p>Steps are progress indicators of a sequence of task steps.</p> - <div class="docs-demo columns"> - <div class="column col-12"> - <ul class="step"> - <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip"></a></li> - <li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip"></a></li> - <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip"></a></li> - <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip"></a></li> - </ul> - </div> - <div class="column col-12"> - <ul class="step"> - <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 1 Tooltip">Step 1</a></li> - <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 2 Tooltip">Step 2</a></li> - <li class="step-item active"><a class="tooltip" href="#steps" data-tooltip="Step 3 Tooltip">Step 3</a></li> - <li class="step-item"><a class="tooltip" href="#steps" data-tooltip="Step 4 Tooltip">Step 4</a></li> - </ul> - </div> - </div> - <p>Add a container element with the <code>step</code> class. - And add child elements with the <code>step-item</code> class. - The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 1"</span>></span>Step 1<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item active"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 2"</span>></span>Step 2<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 3"</span>></span>Step 3<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Step 4"</span>></span>Step 4<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> - </code></pre> - </div> - <div class="container" id="tabs"> - <h3 class="s-title">Tabs<a class="anchor" href="#tabs" aria-hidden="true">#</a></h3> - <div class="docs-ad"> - <div class="hide-md text-center"> - <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> - <!-- GitHub-lg--><ins class="adsbygoogle mx-auto" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9894180784"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - <div class="show-md text-center"> - <!-- GitHub-sm--><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-2225124559530218" data-ad-slot="9278881734"></ins> - <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> - </div> - </div> - <p>Tabs enable quick switch between different views.</p> - <div class="docs-demo columns"> - <div class="column col-6 col-sm-12"> - <ul class="tab"> - <li class="tab-item active"><a href="#tabs">Music</a></li> - <li class="tab-item"><a href="#tabs">Playlists</a></li> - <li class="tab-item"><a href="#tabs">Radio</a></li> - <li class="tab-item"><a href="#tabs">Store</a></li> - </ul> - </div> - <div class="column col-6 col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"><a href="#tabs">Music</a></li> - <li class="tab-item"><a href="#tabs">Playlists</a></li> - <li class="tab-item"><a href="#tabs">Radio</a></li> - </ul> - </div> - </div> - <p>Add a container element with the <code>tab</code> class. - And add child elements with the <code>tab-item</code> class. - You can add the <code>tab-block</code> class for a full-width tab. - The <code>tab-item</code> or its child <a> with the <code>active</code> class will be highlighted. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Music<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"active"</span>></span>Playlists<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Radio<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Connect<span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</code></pre> - <div class="docs-demo columns"> - <div class="column col-sm-12"> - <ul class="tab"> - <li class="tab-item active"><a class="badge" href="#tabs" data-badge="999">Music</a></li> - <li class="tab-item"><a href="#tabs">Playlists</a></li> - <li class="tab-item"><a href="#tabs">Radio</a></li> - </ul> - </div> - <div class="column col-sm-12"> - <ul class="tab tab-block"> - <li class="tab-item active"><a class="badge" href="#tabs" data-badge="9">Music</a></li> - <li class="tab-item"><a class="badge" href="#tabs" data-badge="99">Playlists</a></li> - <li class="tab-item"><a href="#tabs">Radio</a></li> - </ul> - </div> - </div> - <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span> <span class="hljs-attr">data-badge</span>=<span class="hljs-string">"9"</span>></span> - Music - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span> -</code></pre> - <div class="docs-demo columns"> - <div class="column col-12"> - <ul class="tab"> - <li class="tab-item active"><a href="#tabs">Music<span class="btn btn-clear"></span></a></li> - <li class="tab-item"><a href="#tabs">Playlists</a></li> - <li class="tab-item"><a href="#tabs">Radio</a></li> - <li class="tab-item"><a href="#tabs">Store</a></li> - <li class="tab-item tab-action"> - <div class="input-group input-inline"> - <input class="form-input input-sm" type="text" placeholder="search"> - <button class="btn btn-primary btn-sm input-group-btn">Search</button> - </div> + <li class="menu-item"><a href="experimentals/off-canvas.html">Off-canvas</a> + </li> + <li class="menu-item"><a href="experimentals/parallax.html">Parallax</a> + </li> + <li class="menu-item"><a href="experimentals/progress.html">Progress</a> + </li> + <li class="menu-item"><a href="experimentals/sliders.html">Sliders</a> + </li> + <li class="menu-item"><a href="experimentals/timelines.html">Timelines</a> </li> </ul> </div> </div> - <p> - You could add a search box or buttons inside a tab. - Add the <code>tab-action</code> class to the <code>tab-item</code>. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span> - Music - <span class="hljs-tag"></<span class="hljs-name">a</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> - <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item tab-action"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-input input-sm"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"search"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary btn-sm input-group-btn"</span>></span>Search<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">li</span>></span> -<span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre> - </div> - <div class="container" id="tiles"> - <h3 class="s-title">Tiles<a class="anchor" href="#tiles" aria-hidden="true">#</a></h3> - <p>Tiles are repeatable or embeddable information blocks.</p> - <div class="docs-demo columns"> - <div class="column col-9 col-sm-12"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar avatar-lg"><img src="img/avatar-3.png" alt="Avatar"></figure> - </div> - <div class="tile-content"> - <p class="tile-title">The Avengers</p> - <p class="tile-subtitle text-gray">Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...</p> - </div> - <div class="tile-action"> - <button class="btn btn-primary">Join</button> - <button class="btn">Contact</button> - </div> - </div> - </div> - <div class="column col-9 col-sm-12"> - <div class="tile"> - <div class="tile-icon"> - <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"></figure> - </div> - <div class="tile-content"> - <p class="tile-title">The S.H.I.E.L.D.</p> - <p class="tile-subtitle text-gray">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p> - <p> - <button class="btn btn-primary btn-sm">Join</button> - <button class="btn btn-sm">Contact</button> - </p> - </div> - </div> - </div> - </div> - <p>Add a container with the <code>tile</code> class. - And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. - The <code>tile-icon</code> and <code>tile-action</code> are optional. - </p> - <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>></span>The Avengers<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>></span>Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...<span class="hljs-tag"></<span class="hljs-name">p</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>></span>Join<span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <h4 class="s-subtitle" id="tiles-compact">Compact tiles<a class="anchor" href="#tiles-compact" aria-hidden="true">#</a></h4> - <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p> - <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. - The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered. - </p> - <div class="docs-demo columns"> - <div class="column col-6 col-md-9 col-xs-12"> - <div class="tile tile-centered"> - <div class="tile-icon"> - <div class="example-tile-icon"><i class="icon icon-mail centered"></i></div> - </div> - <div class="tile-content"> - <div class="tile-title">spectre-docs.pdf</div> - <div class="tile-subtitle text-gray">14MB · Public · 1 Jan, 2017</div> - </div> - <div class="tile-action"> - <button class="btn btn-link btn-action"><i class="icon icon-more-vert"></i></button> - </div> - </div> - </div> - </div> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>></span>spectre-docs.pdf<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>></span>14MB · Public · 1 Jan, 2017<span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> - <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-more-vert"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span> - <span class="hljs-tag"></<span class="hljs-name">button</span>></span> - <span class="hljs-tag"></<span class="hljs-name">div</span>></span> -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="toasts"> - <h3 class="s-title">Toasts<a class="anchor" href="#toasts" aria-hidden="true">#</a></h3> - <p>Toasts are used to show alert or information to users.</p> - <div class="docs-demo columns"> - <div class="column col-9 col-sm-12"> - <div class="toast"> - <button class="btn btn-clear float-right"></button> - <h6>Toast Title</h6>Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - <div class="column col-9 col-sm-12"> - <div class="toast toast-primary"> - <button class="btn btn-clear float-right"></button>Lorem ipsum dolor sit amet, consectetur adipiscing elit. - </div> - </div> - </div> - <p>Add a container element with the <code>toast</code> class. - You can add any text within the container, and even icons. - You may also add a close button with the <code>btn-clear</code> class if you need. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast"</span>></span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<span class="hljs-tag"></<span class="hljs-name">div</span>></span> -</code></pre> - <div class="docs-demo columns"> - <div class="column col-sm-12"> - <div class="toast toast-success"> - <button class="btn btn-clear float-right"></button>Toast success - </div> - </div> - <div class="column col-sm-12"> - <div class="toast toast-warning"> - <button class="btn btn-clear float-right"></button>Toast warning - </div> - </div> - <div class="column col-sm-12"> - <div class="toast toast-error"> - <button class="btn btn-clear float-right"></button>Toast error - </div> - </div> - </div> - <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast toast-primary"</span>></span> - <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>></span><span class="hljs-tag"></<span class="hljs-name">button</span>></span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. -<span class="hljs-tag"></<span class="hljs-name">div</span>></span></code></pre> - </div> - <div class="container" id="tooltips"> - <h3 class="s-title">Tooltips<a class="anchor" href="#tooltips" aria-hidden="true">#</a></h3> - <p>Tooltips provide context information labels that appear on hover and focus.</p> - <div class="docs-demo columns text-center"> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button> - </div> - <div class="column col-xs-12"> - <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button> - </div> - </div> - <p>Tooltips component is built entirely in CSS.</p> - <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements.</p> - <p>And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip. - By default, the tooltip appears above the element. - </p> - <pre class="code" data-lang="HTML"><code><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>></span>top tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span> -<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn tooltip tooltip-right"</span> <span class="hljs-attr">data-tooltip</span>=<span class="hljs-string">"Lorem ipsum dolor sit amet"</span>></span>right tooltip<span class="hljs-tag"></<span class="hljs-name">button</span>></span> </code></pre> </div> + </div> + </div><a class="off-canvas-overlay" href="#close"></a> + <div class="off-canvas-content"> + <div class="docs-content" id="content"> <div class="docs-footer container grid-lg" id="copyright"> <p><a href="getting-started.html" target="_blank">Documents</a> · <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a> · <a href="https://twitter.com/spectrecss" target="_blank">Twitter</a> · <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> · Version <span class="version"></span></p> <p>Designed and built with <span class="text-error">♥</span> by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> |