Summary Files Commits Branches @commit @diff @stats
path: root / docs / components.html
diff options
context:
space:
mode:
Commitb903b30d81eb531eead430db3c9cc934ab5dea8f (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2018-06-04 21:12:57 +0800
Committer
 Yan Zhu <picturepan2@hotmail.com>
2018-06-04 21:12:57 +0800
Files45153a88bc95c72566e19501ccf8b8914a824871 /docs/components.html
Spectre-Dark-Gruvbox-b903b30d81eb531eead430db3c9cc934ab5dea8f.tar
Spectre-Dark-Gruvbox-b903b30d81eb531eead430db3c9cc934ab5dea8f.tar.gz
Spectre-Dark-Gruvbox-b903b30d81eb531eead430db3c9cc934ab5dea8f.zip
Parent17423a6156ba7cdc4de6744b0098d61702111101 (diff)
Update old docs to new Pug templates
1 files changed, 1436 insertions, 2187 deletions
-rw-r--r--docs/components.html3623
diff --git a/docs/components.html b/docs/components.html
index fb2ddd8..4185433 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1,2384 +1,1633 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="utf-8">
- <meta name="robots" content="index, follow">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
- <meta http-equiv="x-ua-compatible" content="ie=edge">
- <meta name="author" content="https://github.com/picturepan2/">
- <title>Components - Spectre.css CSS Framework</title>
- <link rel="shortcut icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.ico">
- <link rel="icon" href="https://picturepan2.github.io/spectre/img/favicons/favicon.png">
- <link rel="stylesheet" href="dist/spectre.min.css">
- <link rel="stylesheet" href="dist/spectre-icons.min.css">
- <link rel="stylesheet" href="dist/spectre-exp.min.css">
- <link rel="stylesheet" href="dist/docs.min.css">
-</head>
-<body>
- <div class="docs-container off-canvas off-canvas-sidebar-show">
- <div class="docs-navbar">
- <a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar">
- <i class="icon icon-menu"></i>
- </a>
- <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
- </div>
-
- <div id="sidebar" class="docs-sidebar off-canvas-sidebar">
- <div class="docs-brand">
- <a href="index.html" class="docs-logo">
- <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
- <h2>SPECTRE</h2>
- </a>
- </div>
- <div class="docs-nav">
- <div class="accordion-container">
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-1">
- Getting started
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="getting-started.html">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>
- </ul>
- </div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-2">
- Elements
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="elements.html">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#codes">Codes</a>
- </li>
- <li class="menu-item">
- <a href="elements.html#media">Media</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-3">
- Layout
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="layout.html">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>
- </ul>
- </div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked>
- <label class="accordion-header c-hand" for="docs-accordion-4">
- Components
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="components.html">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#menus">Menus</a>
- </li>
- <li class="menu-item">
- <a href="components.html#modals">Modals</a>
- </li>
- <li class="menu-item">
- <a href="components.html#navs">Navs</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>
- </ul>
- </div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-5">
- Utilities
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="utilities.html">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>
- </ul>
- </div>
- </div>
- <div class="accordion">
- <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="docs-accordion-6">
- Experimentals
- </label>
- <div class="accordion-body">
- <ul class="menu menu-nav">
- <li class="menu-item">
- <a href="experimentals.html">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 id="content" class="docs-content off-canvas-content">
- <div id="components" class="container">
- <h3 class="s-title"><a href="#components" class="anchor" aria-hidden="true">#</a>Components</h3>
- </div>
-
- <div class="container">
- <div class="docs-ad">
- <div class="hide-md">
- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
- <!-- GitHub-lg -->
- <ins class="adsbygoogle"
- 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">
- <!-- 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>
- </div>
-
- <div id="accordions" class="container">
- <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
- <div class="docs-note">
- <p>Accordions are used to toggle sections of content.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-md-12">
+ <head>
+ <title>Components - Spectre.css CSS Framework</title>
+ <meta charset="utf-8">
+ <meta name="robots" content="index, follow">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+ <meta http-equiv="x-ua-compatible" content="ie=edge">
+ <meta name="author" content="Yan Zhu">
+ <link rel="shortcut icon" href="img/favicons/favicon.ico">
+ <link rel="icon" href="img/favicons/favicon.png">
+ <link rel="stylesheet" href="dist/spectre.min.css">
+ <link rel="stylesheet" href="dist/spectre-icons.min.css">
+ <link rel="stylesheet" href="dist/spectre-exp.min.css">
+ <link rel="stylesheet" href="dist/docs.min.css">
+ </head>
+ <body>
+ <div class="docs-container off-canvas off-canvas-sidebar-show">
+ <div class="docs-navbar"><a class="off-canvas-toggle btn btn-link btn-action" href="#sidebar"><i class="icon icon-menu"></i></a><a class="btn btn-primary" href="https://github.com/picturepan2/spectre" target="_blank">GitHub</a></div>
+ <div class="docs-sidebar off-canvas-sidebar" id="sidebar">
+ <div class="docs-brand"><a class="docs-logo" href="/"><img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
+ <h2>SPECTRE</h2></a></div>
+ <div class="docs-nav">
+ <div class="accordion-container">
<div class="accordion">
- <input type="radio" id="accordion-1" 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>
+ <input id="accordion-getting-started" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <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="#accordions">Element 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Element 2</a>
- </li>
+ <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>
</ul>
</div>
</div>
<div class="accordion">
- <input type="radio" id="accordion-2" name="accordion-radio" hidden>
- <label class="accordion-header c-hand" for="accordion-2">
- <i class="icon icon-arrow-right mr-1"></i>
- Layout
- </label>
+ <input id="accordion-elements" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <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="#accordions">Layout 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Layout 2</a>
- </li>
+ <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>
</ul>
</div>
</div>
<div class="accordion">
- <input type="radio" id="accordion-3" name="accordion-radio" hidden>
- <label class="accordion-header c-hand" for="accordion-3">
- <i class="icon icon-arrow-right mr-1"></i>
- Components
- </label>
+ <input id="accordion-layout" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <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="#accordions">Component 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Component 2</a>
- </li>
+ <li class="menu-item"><a href="layout.html#flexbox">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>
</ul>
</div>
</div>
- </div>
- <div class="column col-6 col-md-12">
<div class="accordion">
- <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked>
- <label class="accordion-header c-hand" for="accordion-4">
- Elements
- </label>
+ <input id="accordion-components" type="checkbox" name="docs-accordion-checkbox" hidden="" checked="checked"/>
+ <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="#accordions">Element 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Element 2</a>
- </li>
+ <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>
</ul>
</div>
</div>
<div class="accordion">
- <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="accordion-5">
- Layout
- </label>
+ <input id="accordion-utilities" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <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="#accordions">Layout 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Layout 2</a>
- </li>
+ <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>
</ul>
</div>
</div>
<div class="accordion">
- <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden>
- <label class="accordion-header c-hand" for="accordion-6">
- Components
- </label>
+ <input id="accordion-experimentals" type="checkbox" name="docs-accordion-checkbox" hidden=""/>
+ <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="#accordions">Component 1</a>
- </li>
- <li class="menu-item">
- <a href="#accordions">Component 2</a>
- </li>
+ <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>
-
-<!-- accordions -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- standard Accordions example --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;accordion-1&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;accordion-checkbox&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right mr-1&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ </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"><a class="anchor" href="#accordions" aria-hidden="true">#</a>Accordions</h3>
+ <p>Accordions are used to toggle sections of content.</p>
+ <div class="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">&lt;!-- standard Accordions example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
Title
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
- <span class="com">&lt;!-- Accordions content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="com">&lt;!-- mutually exclusive Accordions example (with same input names) --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;radio&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;accordion-1&quot;</span> <span class="atn">name</span>=<span class="atv">&quot;accordion-radio&quot;</span> <span class="atn">hidden</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
+<span class="hljs-comment">&lt;!-- mutually exclusive Accordions example (with same input names) --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
Title
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
- <span class="com">&lt;!-- Accordions content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <div class="docs-note">
- <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">in development</a>.</p>
- </div>
-
-<!-- accordions -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- details and summary Accordions example --&gt;</span>
-&lt;<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">&quot;accordion&quot;</span> <span class="atn">open</span>&gt;
- &lt;<span class="tag">summary</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-header&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-arrow-right mr-1&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
+ <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">&lt;!-- details and summary Accordions example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">details</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion"</span> <span class="hljs-attr">open</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">summary</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-arrow-right mr-1"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
Title
- &lt;<span class="tag">/summary</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-body&quot;</span>&gt;
- <span class="com">&lt;!-- Accordions content --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/details</span>&gt;
-</code></pre>
-
- </div>
-
- <div class="container">
- <div class="docs-ad docs-ad-sidebar">
- <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=picturepan2githubio" id="_carbonads_js"></script>
- </div>
- </div>
-
- <div id="avatars" class="container">
- <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
- <div class="docs-note">
- <p>Avatars are user profile pictures. </p>
- </div>
- <div class="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>
- <div class="docs-note">
- <p>Add the <code>avatar</code> class to &lt;img&gt; 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 &lt;div&gt; element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p>
- </div>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <figure class="avatar avatar-xl">
- <img src="img/avatar-1.png" alt="Avatar">
- <img src="img/avatar-2.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar">
- <img src="img/avatar-3.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar">
- <img src="img/avatar-3.png" alt="Avatar">
- <img src="img/avatar-4.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar avatar-sm">
- <img src="img/avatar-4.png" alt="Avatar">
- <img src="img/avatar-5.png" class="avatar-icon" alt="Avatar">
- </figure>
- <figure class="avatar avatar-xs">
- <img src="img/avatar-5.png" alt="Avatar">
- <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar">
- </figure>
- </div>
- </div>
-
-<!-- avatars -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- Basic avatar examples --&gt;</span>
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-5.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-icon&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5755d9;&quot;</span>&gt;&lt;<span class="tag">/figure</span>&gt;
-
-<span class="com">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;background-color: #5755d9;&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</code></pre>
-
- <div class="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>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">summary</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"accordion-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- Accordions content --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">details</span>&gt;</span></code></pre>
</div>
- </div>
- <div class="docs-note">
- <p>Avatars support presence indicators. You can add an <code>i</code> 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>
- </div>
-
-<!-- avatars -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-xl&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;...&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;avatar-presence online&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="badges" class="container">
- <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
- <div class="docs-note">
- <p>Badges are often used as unread number indicators.</p>
- </div>
- <div class="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>
- <div class="docs-note">
- <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>
- <div class="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>
- <div class="docs-note">
- <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p>
- </div>
-
-<!-- badges -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span>&gt;
- Notifications
-&lt;<span class="tag">/span</span>&gt;
-
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
- Notifications
-&lt;<span class="tag">/span</span>&gt;
-
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span>&gt;
- Button
-&lt;<span class="tag">/button</span>&gt;
-
-&lt;<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">&quot;avatar badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;8&quot;</span> <span class="atn">data-initial</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;YZ&quot;</span>&gt;
-&lt;<span class="tag">/figure</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="bars" class="container">
- <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
- <div class="docs-note">
- <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
- </div>
- <div class="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>
- <div class="columns">
- <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 class="container" id="avatars">
+ <h3 class="s-title"><a class="anchor" href="#avatars" aria-hidden="true">#</a>Avatars</h3>
+ <p>Avatars are user profile pictures. </p>
+ <div class="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>
- </div>
- </div>
- <div class="columns">
- <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>
+ <p>Add the <code>avatar</code> class to &lt;img&gt; 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 &lt;div&gt; element.
+ The <code>data-initial</code> attribute is the name appear inside the avatar.
+ </p>
+ <div class="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>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- Basic avatar examples --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
-<!-- bars -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-sm&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span> <span class="atn">aria-valuenow</span>=<span class="atv">&quot;25&quot;</span> <span class="atn">aria-valuemin</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">aria-valuemax</span>=<span class="atv">&quot;100&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
-<span class="com">&lt;!-- multi-bars --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;25%&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;25%&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;background:#818bd5;&quot;</span>&gt;15%&lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
+<span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
- <h4 id="bars-slider" class="s-subtitle">Slider bars</h4>
- <div class="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>
+<span class="hljs-comment">&lt;!-- Show initals when avatar image is unavailable or not fully loaded --&gt;</span>
+<span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
+ </code></pre>
+ <div class="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 &lt;i&gt; 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">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar avatar-xl"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"avatar-presence online"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span></code></pre>
</div>
- </div>
- <div class="columns">
- <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 class="container" id="badges">
+ <h3 class="s-title"><a class="anchor" href="#badges" aria-hidden="true">#</a>Badges</h3>
+ <p>Badges are often used as unread number indicators.</p>
+ <div class="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="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="bar-item" role="progressbar" style="width:65%;">
- <button class="bar-slider-btn btn tooltip" data-tooltip="65%" role="slider"></button>
+ <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>
- </div>
- </div>
-
- <div class="docs-note">
- <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>
- </div>
-
-<!-- slider bars -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- slider --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:25%;&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <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">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"badge"</span>&gt;</span>
+ Notifications
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-<span class="com">&lt;!-- range slider --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar bar-slider&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:15%;&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;bar-item&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;progressbar&quot;</span> <span class="atn">style</span>=<span class="atv">&quot;width:65%;&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;bar-slider-btn btn&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;slider&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
+<span class="hljs-tag">&lt;<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>&gt;</span>
+ Notifications
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
- </div>
+<span class="hljs-tag">&lt;<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>&gt;</span>
+ Button
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
- <div id="breadcrumbs" class="container">
- <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
- <div class="docs-note">
- <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
- </li>
- </ul>
- </div>
- <div class="column col-12">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Change avatar">Change avatar</a>
- </li>
- </ul>
+<span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span></code></pre>
</div>
- <div class="column col-12">
- <ul class="breadcrumb">
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Home">Home</a>
- </li>
- <li class="breadcrumb-item">
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Settings">Settings</a>
- </li>
- <li class="breadcrumb-item">Search result:
- <a href="#breadcrumbs" class="tooltip" data-tooltip="Search result: Spectre">Spectre</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p>
- </div>
-
-<!-- breadcrumbs -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Home&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Settings&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;breadcrumb-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Change avatar&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="cards" class="container">
- <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
- <div class="docs-note">
- <p>Cards are flexible content containers.</p>
- </div>
- <div class="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 href="#cards" class="btn btn-primary">Do</a>
+ <div class="container" id="bars">
+ <h3 class="s-title"><a class="anchor" href="#bars" aria-hidden="true">#</a>Bars</h3>
+ <p>
+ Bars represent the progress of a task or the value within the known range.
+ Bars are custom components for displaying HTML5 &lt;progress&gt;, &lt;meter&gt; and input range elements.
+ </p>
+ <div class="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>
- </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 class="columns">
+ <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>
- </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 class="columns">
+ <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 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>
+ <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-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-sm"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- multi-bars --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>25%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>15%<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+ <h4 class="s-subtitle" id="bars-slider"><a class="anchor" href="#bars-slider" aria-hidden="true">#</a>Slider bars</h4>
+ <div class="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="card-body">
- An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
+ </div>
+ <div class="columns">
+ <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">&lt;!-- slider --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-comment">&lt;!-- range slider --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bar bar-slider"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</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 class="container" id="breadcrumbs">
+ <h3 class="s-title"><a class="anchor" href="#breadcrumbs" aria-hidden="true">#</a>Breadcrumbs</h3>
+ <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
+ <div class="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="card-footer">
- <a href="#cards" class="btn btn-primary">Buy</a>
- <a href="#cards" class="btn btn-link">Share</a>
+ <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="card-body">
- <strong>Surface Studio</strong>. Turn your desk into a Studio. Surface Studio is designed for the creative process.
+ <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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Home<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Settings<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"breadcrumb-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Change avatar<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
</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 class="container" id="cards">
+ <h3 class="s-title"><a class="anchor" href="#cards" aria-hidden="true">#</a>Cards</h3>
+ <p>Cards are flexible content containers.</p>
+ <div class="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="card-image">
- <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra">
+ <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>
- </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 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="card-body">
- Organize the world’s information and make it universally accessible and useful.
+ <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="card-image">
- <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite">
+ <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="card-footer">
- <a href="#cards" class="btn btn-primary">Search</a>
- <a href="#cards" class="btn btn-link">Share</a>
+ <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>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- cards -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-image&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/osx-el-capitan.jpg&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;img-responsive&quot;</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-title h5&quot;</span>&gt;Microsoft&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-subtitle text-gray&quot;</span>&gt;Software and hardware&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
+ <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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-image"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-title h5"</span>&gt;</span>Microsoft<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-subtitle text-gray"</span>&gt;</span>Software and hardware<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>&gt;</span>
Empower every person and every organization on the planet to achieve more.
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Do&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="chips" class="container">
- <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
- <div class="docs-note">
- <p>Chips are complex entities in small blocks. </p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <span class="chip">
- Crime
- </span>
- <span class="chip">
- Drama
- </span>
- <span class="chip">
- Biography
- <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
- </span>
- <span class="chip">
- Mystery
- <a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
- </span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Do<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</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 src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
- Thor Odinson
- </div>
- <div class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
- Steve Rogers
+ <div class="container" id="chips">
+ <h3 class="s-title"><a class="anchor" href="#chips" aria-hidden="true">#</a>Chips</h3>
+ <p>Chips are complex entities in small blocks. </p>
+ <div class="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>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </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">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>Crime<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-<!-- chips -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;Crime&lt;<span class="tag">/span</span>&gt;
-
-&lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>
Biography
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">/span</span>&gt;
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
- &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span>&gt;
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"chip"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
Yan Zhu
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span> <span class="atn">role</span>=<span class="atv">&quot;button&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
-&lt;<span class="tag">/div</span>&gt;</code>
-</pre>
-
- </div>
-
- <div id="empty" class="container">
- <h3 class="s-title"><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states</h3>
- <div class="docs-note">
- <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
- </div>
- <div class="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>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-12">
- <div class="empty">
- <div class="empty-icon">
- <i class="icon icon-3x icon-mail"></i>
+ <div class="container" id="empty">
+ <h3 class="s-title"><a class="anchor" href="#empty" aria-hidden="true">#</a>Empty states</h3>
+ <p>Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens.</p>
+ <div class="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>
- <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 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="empty-action">
- <button class="btn btn-link">Skip</button>
+ <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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-people"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-title h5"</span>&gt;</span>You have no new messages<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-subtitle"</span>&gt;</span>Click the button to start a conversation.<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"empty-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Send a message<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-12">
- <div class="empty">
- <div class="empty-icon">
- <i class="icon icon-3x icon-people"></i>
+ <div class="container" id="menu">
+ <h3 class="s-title"><a class="anchor" href="#menu" aria-hidden="true">#</a>Menu</h3>
+ <p>Menus are vertical list of links or buttons for actions and navigation.</p>
+ <div class="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>
+ <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>
+ <li class="menu-item"><a href="#menus">Settings</a></li>
+ <li class="menu-item"><a href="#menus">Logout</a></li>
+ </ul>
</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 type="text" class="form-input" placeholder="">
- <button class="btn btn-primary input-group-btn">Search</button>
+ <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>
- </div>
- </div>
-
- <div class="docs-note">
- <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>
- </div>
-
-<!-- empty states -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-people&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-title h5&quot;</span>&gt;You have no new messages&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;empty-subtitle&quot;</span>&gt;Click the button to start a conversation.&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;empty-action&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Send a message&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="menus" class="container">
- <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
- <div class="docs-note">
- <p>Menus are vertical list of links or buttons for actions and navigation.</p>
- </div>
- <div class="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 src="img/avatar-4.png" class="avatar" alt="Avatar">
- </div>
- <div class="tile-content">
- Steve Rogers
- </div>
- </div>
- </li>
- <li class="divider"></li>
- <li class="menu-item">
- <div class="menu-badge">
- <label class="label label-primary">2</label>
- </div>
- <a href="#menus" class="active">
- My profile
- </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>
- <li class="menu-item">
- <label class="form-radio">
- <input type="radio" checked>
- <i class="form-icon"></i> form-radio
- </label>
- </li>
- <li class="menu-item">
- <label class="form-switch">
- <input type="checkbox" checked>
- <i class="form-icon"></i> form-switch
- </label>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- menus -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
- <span class="com">&lt;!-- menu header text --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span> <span class="atn">data-content</span>=<span class="atv">&quot;LINKS&quot;</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item standard --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Slack
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item with form control --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;form-checkbox&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">&quot;checkbox&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;form-icon&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; form-checkbox
- &lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu divider --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;divider&quot;</span>&gt;&lt;<span class="tag">/li</span>&gt;
- <span class="com">&lt;!-- menu item with badge --&gt;</span>
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;menu-badge&quot;</span>&gt;
- &lt;<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">&quot;label label-primary&quot;</span>&gt;2&lt;<span class="tag">/label</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-link&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt; Settings
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
- <div class="docs-note">
- <p>The dropdown is a combination of buttons and menus.</p>
- </div>
- <div class="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>
+ <div class="column col-4 col-xs-12">
<ul class="menu">
<li class="menu-item">
- <a href="#dropdowns">
- Slack
- </a>
+ <label class="form-checkbox">
+ <input type="checkbox" checked=""><i class="form-icon"></i> form-checkbox
+ </label>
</li>
<li class="menu-item">
- <a href="#dropdowns">
- Hipchat
- </a>
+ <label class="form-radio">
+ <input type="radio" checked=""><i class="form-icon"></i> form-radio
+ </label>
</li>
<li class="menu-item">
- <a href="#dropdowns">
- Skype
- </a>
+ <label class="form-switch">
+ <input type="checkbox" checked=""><i class="form-icon"></i> form-switch
+ </label>
</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>
+ <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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu header text --&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu item standard --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Slack
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu item with form control --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-checkbox"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> form-checkbox
+ <span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu divider --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"divider"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu item with badge --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu-badge"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"label label-primary"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-link"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> Settings
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+ </code></pre>
+ <h4 class="s-subtitle" id="menu-dropdown"><a class="anchor" href="#menu-dropdown" aria-hidden="true">#</a>Dropdown menu</h4>
+ <p>The dropdown is a combination of buttons and menus.</p>
+ <div class="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>
- </div>
- </div>
- <div class="docs-note">
- <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>
- <div class="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>
+ <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="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>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- dropdowns -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- basic dropdown button --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
- dropdown menu &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- <span class="com">&lt;!-- menu component --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+ <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">&lt;!-- basic dropdown button --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ dropdown menu <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- menu component --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
...
- &lt;<span class="tag">/ul</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-<span class="com">&lt;!-- dropdown button group --&gt;</span>
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;dropdown&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;btn-group&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn&quot;</span>&gt;
+<span class="hljs-comment">&lt;!-- dropdown button group --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-group"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
dropdown button
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn dropdown-toggle&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;0&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-caret&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-caret"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
- <span class="com">&lt;!-- menu component --&gt;</span>
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+ <span class="hljs-comment">&lt;!-- menu component --&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span>
...
- &lt;<span class="tag">/ul</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="modals" class="container">
- <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
- <div class="docs-note">
- <p>Modals are flexible dialog prompts.</p>
- </div>
- <div class="columns">
- <div class="column">
- <a href="#example-modal-1" class="btn btn-primary">Open Modal</a>
- <div class="modal" id="example-modal-1">
- <a href="#modals" class="modal-overlay" aria-label="Close"></a>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <a href="#modals" class="btn btn-clear float-right" 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>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="modals">
+ <h3 class="s-title"><a class="anchor" href="#modals" aria-hidden="true">#</a>Modals</h3>
+ <p>Modals are flexible dialog prompts.</p>
+ <div class="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 class="modal-footer">
- <button class="btn btn-primary">Share</button>
- <a href="#modals" class="btn btn-link">Close</a>
- </div>
</div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- modals example -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal active&quot;</span> <span class="atn">id</span>=<span class="atv">&quot;modal-id&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-header&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-title h5&quot;</span>&gt;Modal title&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-body&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;content&quot;</span>&gt;
- <span class="com">&lt;!-- content here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-footer&quot;</span>&gt;
+ <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">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title h5"</span>&gt;</span>Modal title<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"content"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- content here --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>&gt;</span>
...
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <h4 id="modals-sizes" class="s-subtitle">Modal sizes</h4>
- <div class="columns">
- <div class="column col-6 col-xs-12">
- <a href="#example-modal-2" class="btn btn-primary">Open small size Modal</a>
- <div class="modal modal-sm" id="example-modal-2">
- <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a>
- <div class="modal-container" role="document">
- <div class="modal-header">
- <a href="#modals-sizes" class="btn btn-clear float-right" 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" type="text" id="input-example-7" placeholder="Name">
+ <h4 class="s-subtitle" id="modals-sizes"><a class="anchor" href="#modals-sizes" aria-hidden="true">#</a>Modal sizes</h4>
+ <div class="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 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 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 class="modal-footer">
- <button class="btn btn-primary">Submit</button>
- <a href="#modals-sizes" class="btn btn-link" aria-label="Close">Close</a>
- </div>
</div>
</div>
- </div>
- </div>
- <div class="docs-note">
- <p>Use the <code>modal-sm</code> class for a smaller modal dialog. The container max width is <code>320px</code>.</p>
- </div>
- <div class="columns">
- <div class="column">
- <a href="#example-modal-3" class="btn btn-primary">Open large size Modal</a>
- <div class="modal modal-lg" id="example-modal-3">
- <a href="#modals-sizes" class="modal-overlay" aria-label="Close"></a>
- <div class="modal-container modal-fullheight" role="document">
- <div class="modal-header">
- <a href="#modals-sizes" class="btn btn-clear float-right" 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>
+ <p>Use the <code>modal-sm</code> class for a smaller modal dialog.
+ The container max width is <code>320px</code>.
+ </p>
+ <div class="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 class="modal-footer">
- <button class="btn btn-primary">Share</button>
- <a href="#modals-sizes" class="btn btn-link">Close</a>
- </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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal modal-sm"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-container"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- modal structure here --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- </div>
- <div class="docs-note">
- <p>Use the <code>modal-lg</code> class for a full size modal. The container max width is <code>960px</code>.</p>
- </div>
-
-<!-- modals -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal modal-sm&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container&quot;</span>&gt;
- <span class="com">&lt;!-- modal structure here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- <div class="docs-note">
- <p>Add the <code>modal-fullheight</code> class to <code>modal-container</code> to have a 100% viewport height modal. The default container max height is <code>75vh</code>.</p>
- </div>
-
-<!-- modals -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#close&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&quot;</span> <span class="atn">aria-label</span>=<span class="atv">&quot;Close&quot;</span>&gt;&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-container modal-fullheight&quot;</span>&gt;
- <span class="com">&lt;!-- modal structure here --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="navs" class="container">
- <h3 class="s-title"><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h3>
- <div class="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>
+ <div class="container" id="nav">
+ <h3 class="s-title"><a class="anchor" href="#nav" aria-hidden="true">#</a>Nav</h3>
+ <div class="columns">
+ <div class="column col-6 col-xs-12">
<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 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>
+ <li class="nav-item"><a href="#nav">Components</a></li>
+ <li class="nav-item"><a href="#nav">Utilities</a></li>
</ul>
- </li>
- <li class="nav-item">
- <a href="#nav">Components</a>
- </li>
- <li class="nav-item">
- <a href="#nav">Utilities</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- navs -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;nav&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Elements&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Layout&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;nav&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Flexbox grid&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Responsive&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Navbar&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Empty states&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">/ul</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Components&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;nav-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Utilities&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="pagination" class="container">
- <h3 class="s-title"><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h3>
- <div class="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>
- <div class="docs-note">
- <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> to the <code>page-item</code> to have unclickable page links. </p>
- </div>
-
-<!-- pagination -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item disabled&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">tabindex</span>=<span class="atv">&quot;-1&quot;</span>&gt;Previous&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;1&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;2&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;3&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">span</span>&gt;...&lt;<span class="tag">/span</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;12&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Next&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- <div class="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>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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Elements<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Layout<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Flexbox grid<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Responsive<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Navbar<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Empty states<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Components<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Utilities<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
</div>
- </div>
- <div class="docs-note">
- <p>You could use previous and next pagination to navigate. </p>
- </div>
-
-<!-- pagination -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;pagination&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item page-prev&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-subtitle&quot;</span>&gt;Previous&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-title h5&quot;</span>&gt;Getting started&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;page-item page-next&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-subtitle&quot;</span>&gt;Next&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;page-item-title h5&quot;</span>&gt;Layout&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="panels" class="container">
- <h3 class="s-title"><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3>
- <div class="docs-note">
- <p>Panels are flexible view container with auto-expand content section.</p>
- </div>
- <div class="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 class="container" id="pagination">
+ <h3 class="s-title"><a class="anchor" href="#pagination" aria-hidden="true">#</a>Pagination</h3>
+ <div class="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>
- <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>
+ <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>
- </nav>
- <div class="panel-body">
- <div class="tile tile-centered">
- <div class="tile-content">
- <div class="tile-title">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"><i class="icon icon-edit"></i></button>
+ </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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item disabled"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>12<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+ <div class="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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pagination"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-prev"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>&gt;</span>Previous<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>&gt;</span>Getting started<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item page-next"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-subtitle"</span>&gt;</span>Next<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"page-item-title h5"</span>&gt;</span>Layout<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="panels">
+ <h3 class="s-title"><a class="anchor" href="#panels" aria-hidden="true">#</a>Panels</h3>
+ <p>Panels are flexible view container with auto-expand content section.</p>
+ <div class="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>
- </div>
- <div class="tile tile-centered">
- <div class="tile-content">
- <div class="tile-title">Skype</div>
- <div class="tile-subtitle">bruce.banner</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">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"><i class="icon icon-edit"></i></button>
+ </div>
+ </div>
+ <div class="tile tile-centered">
+ <div class="tile-content">
+ <div class="tile-title">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">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="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ <div class="panel-footer">
+ <button class="btn btn-primary btn-block">Save</button>
</div>
</div>
- <div class="tile tile-centered">
- <div class="tile-content">
- <div class="tile-title">Location</div>
- <div class="tile-subtitle">Dayton, Ohio</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="tile-action">
- <button class="btn btn-link btn-action btn-lg"><i class="icon icon-edit"></i></button>
+ <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">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">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">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">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">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 class="panel-footer">
- <button class="btn btn-primary btn-block">Save</button>
- </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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-header"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-title"</span>&gt;</span>Comments<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-nav"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-body"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- contents --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"panel-footer"</span>&gt;</span>
+ <span class="hljs-comment">&lt;!-- buttons or inputs --&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</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">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 class="container" id="popovers">
+ <h3 class="s-title"><a class="anchor" href="#popovers" aria-hidden="true">#</a>Popovers</h3>
+ <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
+ <div class="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 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">Bruce Banner</p>
- <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ </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 class="tile">
- <div class="tile-icon">
- <figure class="avatar" data-initial="TS"></figure>
+ </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 class="tile-content">
- <p class="tile-title">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="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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover popover-right"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>right popover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"popover-container"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-header"</span>&gt;</span>
+ ...
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-body"</span>&gt;</span>
+ ...
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"card-footer"</span>&gt;</span>
+ ...
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="steps">
+ <h3 class="s-title"><a class="anchor" href="#steps" aria-hidden="true">#</a>Steps</h3>
+ <p>Steps are progress indicators of a sequence of task steps.</p>
+ <div class="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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Step 1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Step 2<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Step 3<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"step-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Step 4<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+ </code></pre>
+ </div>
+ <div class="container" id="tabs">
+ <h3 class="s-title"><a class="anchor" href="#tabs" aria-hidden="true">#</a>Tabs</h3>
+ <p>Tabs enable quick switch between different views.</p>
+ <div class="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 &lt;a&gt; with the <code>active</code> class will be highlighted.
+ </p>
+ <pre class="code" data-lang="HTML"><code><span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Music<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Playlists<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Radio<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>Connect<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+ <div class="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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab tab-block"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ Music
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
+</code></pre>
+ <div class="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>
+ </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">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item active"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>
+ Music
+ <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tab-item tab-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"input-group input-inline"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>
+ <span class="hljs-tag">&lt;<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>&gt;</span>Search<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></code></pre>
+ </div>
+ <div class="container" id="tiles">
+ <h3 class="s-title"><a class="anchor" href="#tiles" aria-hidden="true">#</a>Tiles</h3>
+ <p>Tiles are repeatable or embeddable information blocks.</p>
+ <div class="columns">
+ <div class="column col-9 col-sm-12">
<div class="tile">
<div class="tile-icon">
- <figure class="avatar">
- <img src="img/avatar-4.png" alt="Avatar">
- </figure>
+ <figure class="avatar avatar-lg"><img src="img/avatar-3.png" alt="Avatar"></figure>
</div>
<div class="tile-content">
- <p class="tile-title">Steve Rogers</p>
- <p class="tile-subtitle">The Strategic Homeland Intervention, Enforcement, and Logistics Division...</p>
+ <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">
- <img src="img/avatar-3.png" alt="Avatar">
- </figure>
+ <figure class="avatar avatar-lg"><img src="img/avatar-2.png" alt="Avatar"></figure>
</div>
<div class="tile-content">
- <p class="tile-title">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>
+ <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 class="panel-footer">
- <div class="input-group">
- <input type="text" class="form-input" placeholder="Hello">
- <button class="btn btn-primary input-group-btn">Send</button>
- </div>
- </div>
</div>
- </div>
- </div>
-
- <div class="docs-note">
- <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> class. The <code>panel-body</code> can be auto expanded and vertically scrollable. </p>
- </div>
-
-<!-- panels -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-header&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-title&quot;</span>&gt;Comments&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-nav&quot;</span>&gt;
- <span class="com">&lt;!-- navigation components: tabs, breadcrumbs or pagination --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-body&quot;</span>&gt;
- <span class="com">&lt;!-- contents --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;panel-footer&quot;</span>&gt;
- <span class="com">&lt;!-- buttons or inputs --&gt;</span>
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
+ <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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>&gt;</span>The Avengers<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>&gt;</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">&lt;/<span class="hljs-name">p</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span>&gt;</span>Join<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- </div>
-
- <div id="popovers" class="container">
- <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
- <div class="docs-note">
- <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
- </div>
- <div class="columns">
- <div class="column col-3 col-sm-6">
- <div class="popover">
- <a href="#popovers" class="btn btn-primary">
- 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>
+ <h4 class="s-subtitle" id="tiles-compact"><a class="anchor" href="#tiles-compact" aria-hidden="true">#</a>Compact tiles</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="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="card-body">
- To make a contribution to the world by making tools for the mind that advance humankind.
+ <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="card-footer">
- <button class="btn btn-primary">Buy</button>
+ <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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile tile-centered"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-tile-icon"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-file centered"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-content"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-title"</span>&gt;</span>spectre-docs.pdf<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-subtitle text-gray"</span>&gt;</span>14MB · Public · 1 Jan, 2017<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tile-action"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-link"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"icon icon-more-vert"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</div>
- <div class="column col-3 col-sm-6">
- <div class="popover popover-right">
- <a href="#popovers" class="btn btn-primary">
- 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 class="container" id="toasts">
+ <h3 class="s-title"><a class="anchor" href="#toasts" aria-hidden="true">#</a>Toasts</h3>
+ <p>Toasts are used to show alert or information to users.</p>
+ <div class="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>
- </div>
- <div class="column col-3 col-sm-6">
- <div class="popover popover-bottom">
- <a href="#popovers" class="btn btn-primary">
- 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 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>
- </div>
- <div class="column col-3 col-sm-6">
- <div class="popover popover-left">
- <a href="#popovers" class="btn btn-primary">
- 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>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- popovers -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;popover popover-right&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;right popover&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;popover-container&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-header&quot;</span>&gt;
- ...
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-body&quot;</span>&gt;
- ...
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;card-footer&quot;</span>&gt;
- ...
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="steps" class="container">
- <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
- <div class="docs-note">
- <p>Steps are progress indicators of a sequence of task steps.</p>
- </div>
- <div class="columns">
- <div class="column col-12">
- <ul class="step">
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip"></a>
- </li>
- <li class="step-item active">
- <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip"></a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip"></a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip"></a>
- </li>
- </ul>
- </div>
- <div class="column col-12">
- <ul class="step">
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 1 Tooltip">Step 1</a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 2 Tooltip">Step 2</a>
- </li>
- <li class="step-item active">
- <a href="#steps" class="tooltip" data-tooltip="Step 3 Tooltip">Step 3</a>
- </li>
- <li class="step-item">
- <a href="#steps" class="tooltip" data-tooltip="Step 4 Tooltip">Step 4</a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- steps -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;step&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 1&quot;</span>&gt;Step 1&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 2&quot;</span>&gt;Step 2&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 3&quot;</span>&gt;Step 3&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;step-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Step 4&quot;</span>&gt;Step 4&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="tabs" class="container">
- <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
- <div class="docs-note">
- <p>Tabs enable quick switch between different views.</p>
- </div>
- <div class="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>
- <div class="docs-note">
- <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 &lt;a&gt; with the <code>active</code> class will be highlighted.</p>
- </div>
-
-<!-- tabs -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Music&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;active&quot;</span>&gt;Playlists&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Radio&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;Connect&lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- <div class="columns">
- <div class="column col-sm-12">
- <ul class="tab">
- <li class="tab-item active">
- <a href="#tabs" class="badge" 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 href="#tabs" class="badge" data-badge="9">
- Music
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs" class="badge" data-badge="99">
- Playlists
- </a>
- </li>
- <li class="tab-item">
- <a href="#tabs">
- Radio
- </a>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
- </div>
-
-<!-- tabs with badges -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab tab-block&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;badge&quot;</span> <span class="atn">data-badge</span>=<span class="atv">&quot;9&quot;</span>&gt;
- Music
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
+ <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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast"</span>&gt;</span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
-
- <div class="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 class="columns">
+ <div class="column col-sm-12">
+ <div class="toast toast-success">
+ <button class="btn btn-clear float-right"></button>Toast success
</div>
- </li>
- </ul>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- tabs with badges -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;tab&quot;</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item active&quot;</span>&gt;
- &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
- Music
- &lt;<span class="tag">/a</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
- &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;tab-item tab-action&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;input-group input-inline&quot;</span>&gt;
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input input-sm&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;search&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary btn-sm input-group-btn&quot;</span>&gt;Search&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/li</span>&gt;
-&lt;<span class="tag">/ul</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="tiles" class="container">
- <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
- <div class="docs-note">
- <p>Tiles are repeatable or embeddable information blocks.</p>
- </div>
- <div class="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 class="column col-sm-12">
+ <div class="toast toast-warning">
+ <button class="btn btn-clear float-right"></button>Toast warning
+ </div>
</div>
- <div class="tile-action">
- <button class="btn btn-primary">Join</button>
- <button class="btn">Contact</button>
+ <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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"toast toast-primary"</span>&gt;</span>
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-clear float-right"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
</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 class="container" id="tooltips">
+ <h3 class="s-title"><a class="anchor" href="#tooltips" aria-hidden="true">#</a>Tooltips</h3>
+ <p>Tooltips provide context information labels that appear on hover and focus.</p>
+ <div class="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="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 class="column col-xs-12">
+ <button class="btn btn-primary tooltip tooltip-right" data-tooltip="Right Tooltip Text">right tooltip</button>
</div>
- </div>
- </div>
- </div>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- tiles -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;tile-title&quot;</span>&gt;The Avengers&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;tile-subtitle text-gray&quot;</span>&gt;Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...&lt;<span class="tag">/p</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-action&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-primary&quot;</span>&gt;Join&lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- <h4 id="tiles-compact" class="s-subtitle">Compact tiles</h4>
- <div class="docs-note">
- <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>
- <div class="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 class="column col-xs-12">
+ <button class="btn btn-primary tooltip tooltip-bottom" data-tooltip="Bottom Tooltip Text">bottom tooltip</button>
</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 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">&lt;<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>&gt;</span>top tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
+<span class="hljs-tag">&lt;<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>&gt;</span>right tooltip<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> </code></pre>
</div>
</div>
-
-<!-- tiles -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile tile-centered&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-icon&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;example-tile-icon&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-file centered&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-content&quot;</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-title&quot;</span>&gt;spectre-docs.pdf&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-subtitle text-gray&quot;</span>&gt;14MB · Public · 1 Jan, 2017&lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
- &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;tile-action&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-link&quot;</span>&gt;
- &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-more-vert&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- &lt;<span class="tag">/button</span>&gt;
- &lt;<span class="tag">/div</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
</div>
-
- <div id="toasts" class="container">
- <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
- <div class="docs-note">
- <p>Toasts are used to show alert or information to users.</p>
- </div>
- <div class="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>
- <div class="docs-note">
- <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>
- </div>
- <div class="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>
- <div class="docs-note">
- <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>
- </div>
-
-<!-- toasts -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast&quot;</span>&gt;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;<span class="tag">/div</span>&gt;
-
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;toast toast-primary&quot;</span>&gt;
- &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear float-right&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-&lt;<span class="tag">/div</span>&gt;
-</code></pre>
-
- </div>
-
- <div id="tooltips" class="container">
- <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
- <div class="docs-note">
- <p>Tooltips provide context information labels that appear on hover and focus.</p>
- </div>
- <div class="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>
- <div class="docs-note">
- <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. 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>
- </div>
-
-<!-- tooltips -->
-<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;top tooltip&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn tooltip tooltip-right&quot;</span> <span class="atn">data-tooltip</span>=<span class="atv">&quot;Lorem ipsum dolor sit amet&quot;</span>&gt;right tooltip&lt;<span class="tag">/button</span>&gt;
-</code></pre>
-
- </div>
-
- <footer class="docs-footer">
- <p><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>
- </footer>
-
</div>
- </div>
-
- <script>
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
- ga('create', 'UA-2702768-8', 'auto');
- ga('send', 'pageview');
- </script>
-</body>
-</html>
+ <script>
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+ })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+ ga('create', 'UA-2702768-8', 'auto');
+ ga('send', 'pageview');
+ </script>
+ </body>
+</html> \ No newline at end of file