Summary Files Commits Branches @commit @diff @stats
path: root / docs / components.html
diff options
context:
space:
mode:
Commit388fcd4107498400f05ccfe1dde682f6b09c0546 (patch)
Author
 Yan Zhu <picturepan2@hotmail.com>
2017-09-11 09:14:29 -0500
Committer
 GitHub <noreply@github.com>
2017-09-11 09:14:29 -0500
Files4655749d16323dd98ee4d8ae3e000c3237b4f649 /docs/components.html
Spectre-Dark-Gruvbox-388fcd4107498400f05ccfe1dde682f6b09c0546.tar
Spectre-Dark-Gruvbox-388fcd4107498400f05ccfe1dde682f6b09c0546.tar.gz
Spectre-Dark-Gruvbox-388fcd4107498400f05ccfe1dde682f6b09c0546.zip
Parentc811cb46631e66772a108c393f6ef53a83ca010b (diff)
Parent4f15bc0c787fb87d19e26e665d5e1eadbe89b560 (diff)
Merge pull request #282 from picturepan2/0.4.1 v0.4.1
0.4.1
1 files changed, 174 insertions, 148 deletions
-rw-r--r--docs/components.html322
diff --git a/docs/components.html b/docs/components.html
index 98ceca1..c009ad6 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -1,15 +1,15 @@
<!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/" />
+ <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="stylesheet" href="dist/spectre.css" />
- <link rel="stylesheet" href="dist/spectre-icons.css" />
- <link rel="stylesheet" href="css/docs.css" />
+ <link rel="stylesheet" href="dist/spectre.css">
+ <link rel="stylesheet" href="dist/spectre-icons.css">
+ <link rel="stylesheet" href="css/docs.css">
</head>
<body>
<div class="s-container container">
@@ -17,14 +17,14 @@
<div id="sidebar" class="s-sidebar">
<div class="s-brand">
<a href="index.html" class="s-logo">
- <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+ <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
<h2>Spectre.css</h2>
</a>
</div>
<div class="s-nav">
- <div class="accordion">
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-1" name="docs-accordion-checkbox" hidden />
+ <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>
@@ -48,8 +48,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-2" name="docs-accordion-checkbox" hidden />
+ <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>
@@ -82,8 +82,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-3" name="docs-accordion-checkbox" hidden />
+ <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>
@@ -101,8 +101,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-4" name="docs-accordion-checkbox" hidden checked />
+ <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>
@@ -171,8 +171,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-5" name="docs-accordion-checkbox" hidden />
+ <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>
@@ -205,8 +205,8 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="docs-accordion-6" name="docs-accordion-checkbox" hidden />
+ <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>
@@ -252,7 +252,7 @@
<a href="#sidebar" class="btn btn-link btn-action"><i class="icon icon-menu"></i></a>
</div>
<a href="index.html" class="s-logo">
- <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
+ <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework">
</a>
<div class="float-btn">
<a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -268,10 +268,10 @@
<div class="columns">
<div class="column col-6 col-md-12">
<div class="accordion">
- <div class="accordion-item">
- <input type="radio" id="accordion-1" name="accordion-radio" hidden checked />
+ <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-5"></i>
+ <i class="icon icon-arrow-right mr-1"></i>
Elements
</label>
<div class="accordion-body">
@@ -285,10 +285,10 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="radio" id="accordion-2" name="accordion-radio" hidden />
+ <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-5"></i>
+ <i class="icon icon-arrow-right mr-1"></i>
Layout
</label>
<div class="accordion-body">
@@ -302,10 +302,10 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="radio" id="accordion-3" name="accordion-radio" hidden />
+ <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-5"></i>
+ <i class="icon icon-arrow-right mr-1"></i>
Components
</label>
<div class="accordion-body">
@@ -322,11 +322,10 @@
</div>
</div>
<div class="column col-6 col-md-12">
- <div class="accordion">
- <div class="accordion-item">
- <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked />
+ <div class="accordion-container">
+ <div class="accordion">
+ <input type="checkbox" id="accordion-4" name="accordion-checkbox" hidden checked>
<label class="accordion-header c-hand" for="accordion-4">
- <i class="icon icon-arrow-right mr-5"></i>
Elements
</label>
<div class="accordion-body">
@@ -340,10 +339,9 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden />
+ <div class="accordion">
+ <input type="checkbox" id="accordion-5" name="accordion-checkbox" hidden>
<label class="accordion-header c-hand" for="accordion-5">
- <i class="icon icon-arrow-right mr-5"></i>
Layout
</label>
<div class="accordion-body">
@@ -357,10 +355,9 @@
</ul>
</div>
</div>
- <div class="accordion-item">
- <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden />
+ <div class="accordion">
+ <input type="checkbox" id="accordion-6" name="accordion-checkbox" hidden>
<label class="accordion-header c-hand" for="accordion-6">
- <i class="icon icon-arrow-right mr-5"></i>
Components
</label>
<div class="accordion-body">
@@ -378,37 +375,66 @@
</div>
</div>
-<!-- accordions example -->
-<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- standard Accordions examples --&gt;</span>
+<!-- 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">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-item&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-5&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
- 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">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;
+ 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;
- <span class="com">&lt;!-- Accordions item --&gt;</span>
&lt;<span class="tag">/div</span>&gt;
-<span class="com">&lt;!-- mutually exclusive Accordions examples --&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">div</span> <span class="atn">class</span>=<span class="atv">&quot;accordion-item&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;
- 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">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;
+ 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;
- <span class="com">&lt;!-- Accordions item --&gt;</span>
&lt;<span class="tag">/div</span>&gt;
</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>
+
+ <div class="columns">
+ <div class="column col-sm-12 col-6">
+ <details class="accordion" open>
+ <summary class="accordion-header c-hand"> <i class="icon icon-arrow-right mr-1"></i> Elements</summary>
+ <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>
+ </details>
+ </div>
+ </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;
+ 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 id="autocomplete" class="container">
@@ -425,11 +451,11 @@
Bruce Banner
</span>
<span class="chip">
- <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar" />
+ <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Avatar">
Thor Odinson
</span>
<span class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar" />
+ <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Avatar">
Steve Rogers
</span>
<span class="chip">
@@ -439,7 +465,7 @@
<span class="chip active">
Natasha Romanoff
</span>
- <input class="form-input" type="text" placeholder="" />
+ <input class="form-input" type="text" placeholder="">
</div>
</div>
</div>
@@ -453,12 +479,12 @@
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<span class="chip">
- <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
+ <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
Thor Odinson
<a href="#" class="btn btn-clear" aria-label="Close" role="button"></a>
</span>
<div class="has-icon-left">
- <input class="form-input" type="text" placeholder="" value="S" />
+ <input class="form-input" type="text" placeholder="" value="S">
<i class="form-icon loading"></i>
</div>
</div>
@@ -467,7 +493,7 @@
<a href="#autocomplete">
<div class="tile tile-centered">
<div class="tile-icon">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
+ <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
</div>
<div class="tile-content">
<mark>S</mark>teve Roger<mark>s</mark>
@@ -497,20 +523,20 @@
<p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p>
</div>
-<!-- autocomplete example -->
+<!-- autocomplete -->
<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete&quot;</span>&gt;
<span class="com">&lt;!-- autocomplete input container --&gt;</span>
&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-input form-input&quot;</span>&gt;
<span class="com">&lt;!-- autocomplete chips --&gt;</span>
&lt;<span class="tag">label</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> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&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> <span class="atn">alt</span>=<span class="atv">&quot;Thor Odinson&quot;</span>&gt;
Thor Odinson
&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">/label</span>&gt;
<span class="com">&lt;!-- autocomplete real input box --&gt;</span>
- &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span> /&gt;
+ &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span>&gt;
&lt;<span class="tag">/div</span>&gt;
<span class="com">&lt;!-- autocomplete suggestion list --&gt;</span>
@@ -520,7 +546,7 @@
&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;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">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&quot;</span> /&gt;
+ &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar avatar-sm&quot;</span> <span class="atn">alt</span>=<span class="atv">&quot;Steve Rogers&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;tile-content&quot;</span>&gt;
Steve Rogers
@@ -542,19 +568,19 @@
<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" />
+ <img src="img/avatar-1.png" alt="Avatar XL">
</figure>
<figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar LG" />
+ <img src="img/avatar-2.png" alt="Avatar LG">
</figure>
<figure class="avatar">
- <img src="img/avatar-3.png" alt="Avatar" />
+ <img src="img/avatar-3.png" alt="Avatar">
</figure>
<figure class="avatar avatar-sm">
- <img src="img/avatar-4.png" alt="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" />
+ <img src="img/avatar-5.png" alt="Avatar XS">
</figure>
</div>
<div class="column col-6 col-xs-12">
@@ -572,44 +598,44 @@
<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" />
+ <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" />
+ <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" />
+ <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" />
+ <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" />
+ <img src="img/avatar-5.png" alt="Avatar">
+ <img src="img/avatar-1.png" class="avatar-icon" alt="Avatar">
</figure>
</div>
</div>
-<!-- avatars example -->
+<!-- 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">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">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: #5764c6;&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: #5764c6;&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-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>
@@ -636,9 +662,9 @@
<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 example -->
+<!-- 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">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>
@@ -687,13 +713,13 @@
</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" />
+ <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" />
+ <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" />
+ <img src="img/avatar-3.png" alt="YZ">
</figure>
</div>
</div>
@@ -701,7 +727,7 @@
<p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p>
</div>
-<!-- badges example -->
+<!-- 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;
@@ -715,7 +741,7 @@
&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">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>
@@ -755,7 +781,7 @@
<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>
-<!-- bars example -->
+<!-- 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;
@@ -795,7 +821,7 @@
<p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
</div>
-<!-- slider bars example -->
+<!-- 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;
@@ -880,7 +906,7 @@
<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 example -->
+<!-- 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;
@@ -905,7 +931,7 @@
<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" />
+ <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>
@@ -926,7 +952,7 @@
<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" />
+ <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.
@@ -943,7 +969,7 @@
<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" />
+ <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>
@@ -958,7 +984,7 @@
<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" />
+ <img class="img-responsive" src="img/osx-el-capitan-2.jpg" alt="OS X El Capitan">
</div>
<div class="card-footer">
<a href="#cards" class="btn btn-primary">Buy</a>
@@ -979,7 +1005,7 @@
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" />
+ <img class="img-responsive" src="img/macos-sierra.jpg" alt="macOS Sierra">
</div>
</div>
</div>
@@ -993,7 +1019,7 @@
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"/>
+ <img class="img-responsive" src="img/osx-yosemite-2.jpg" alt="OS X Yosemite">
</div>
<div class="card-footer">
<a href="#cards" class="btn btn-primary">Search</a>
@@ -1006,10 +1032,10 @@
<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 example -->
+<!-- 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">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;
@@ -1056,11 +1082,11 @@
Tony Stark
</span>
<span class="chip">
- <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson"/>
+ <img src="img/avatar-1.png" class="avatar avatar-sm" alt="Thor Odinson">
Thor Odinson
</span>
<span class="chip">
- <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers" />
+ <img src="img/avatar-4.png" class="avatar avatar-sm" alt="Steve Rogers">
Steve Rogers
</span>
</div>
@@ -1069,14 +1095,14 @@
<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>
-<!-- chips example -->
+<!-- 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">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;
&lt;<span class="tag">span</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;
+ &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;
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">/span</span>&gt;</code>
@@ -1125,7 +1151,7 @@
<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="" />
+ <input type="text" class="form-input" placeholder="">
<button class="btn btn-primary input-group-btn">Search</button>
</div>
</div>
@@ -1136,7 +1162,7 @@
<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 example -->
+<!-- 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;
@@ -1162,7 +1188,7 @@
<li class="menu-item">
<div class="tile tile-centered">
<div class="tile-icon">
- <img src="img/avatar-4.png" class="avatar" alt="Avatar" />
+ <img src="img/avatar-4.png" class="avatar" alt="Avatar">
</div>
<div class="tile-content">
Steve Rogers
@@ -1222,7 +1248,7 @@
<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>
</div>
-<!-- menus example -->
+<!-- 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;
@@ -1327,7 +1353,7 @@
<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 example -->
+<!-- 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;
@@ -1456,16 +1482,16 @@
<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" />
+ <input class="form-input" type="text" id="input-example-7" placeholder="Name">
</div>
<div class="form-group">
<label class="form-label">Gender</label>
<label class="form-radio">
- <input type="radio" name="gender" />
+ <input type="radio" name="gender">
<i class="form-icon"></i> Male
</label>
<label class="form-radio">
- <input type="radio" name="gender" checked />
+ <input type="radio" name="gender" checked>
<i class="form-icon"></i> Female
</label>
</div>
@@ -1484,7 +1510,7 @@
<p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p>
</div>
-<!-- modals example -->
+<!-- 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">div</span> <span class="atn">class</span>=<span class="atv">&quot;modal-overlay&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;modal-container&quot;</span>&gt;
@@ -1559,7 +1585,7 @@
<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 example -->
+<!-- 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;
@@ -1607,7 +1633,7 @@
<p>You could use previous and next pagination to navigate. </p>
</div>
-<!-- pagination example -->
+<!-- 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;
@@ -1636,7 +1662,7 @@
<div class="panel">
<div class="panel-header text-center">
<figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar" />
+ <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>
@@ -1703,7 +1729,7 @@
<div class="tile">
<div class="tile-icon">
<figure class="avatar">
- <img src="img/avatar-1.png" alt="Avatar" />
+ <img src="img/avatar-1.png" alt="Avatar">
</figure>
</div>
<div class="tile-content">
@@ -1714,7 +1740,7 @@
<div class="tile">
<div class="tile-icon">
<figure class="avatar">
- <img src="img/avatar-2.png" alt="Avatar" />
+ <img src="img/avatar-2.png" alt="Avatar">
</figure>
</div>
<div class="tile-content">
@@ -1734,7 +1760,7 @@
<div class="tile">
<div class="tile-icon">
<figure class="avatar">
- <img src="img/avatar-4.png" alt="Avatar" />
+ <img src="img/avatar-4.png" alt="Avatar">
</figure>
</div>
<div class="tile-content">
@@ -1745,7 +1771,7 @@
<div class="tile">
<div class="tile-icon">
<figure class="avatar">
- <img src="img/avatar-3.png" alt="Avatar" />
+ <img src="img/avatar-3.png" alt="Avatar">
</figure>
</div>
<div class="tile-content">
@@ -1756,7 +1782,7 @@
</div>
<div class="panel-footer">
<div class="input-group">
- <input type="text" class="form-input" placeholder="Hello" />
+ <input type="text" class="form-input" placeholder="Hello">
<button class="btn btn-primary input-group-btn">Send</button>
</div>
</div>
@@ -1768,7 +1794,7 @@
<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 example -->
+<!-- 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;
@@ -1825,7 +1851,7 @@
<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 example -->
+<!-- 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;
@@ -1954,7 +1980,7 @@
<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 example -->
+<!-- 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;
@@ -2018,7 +2044,7 @@
<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 example -->
+<!-- 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;
@@ -2091,7 +2117,7 @@
<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 example -->
+<!-- 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;
@@ -2152,7 +2178,7 @@
<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 example -->
+<!-- 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;
@@ -2188,7 +2214,7 @@
</li>
<li class="tab-item tab-action">
<div class="input-group input-inline">
- <input class="form-input input-sm" type="text" placeholder="search" />
+ <input class="form-input input-sm" type="text" placeholder="search">
<button class="btn btn-primary btn-sm input-group-btn">Search</button>
</div>
</li>
@@ -2199,7 +2225,7 @@
<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 example -->
+<!-- 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;
@@ -2208,7 +2234,7 @@
&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">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;
@@ -2227,7 +2253,7 @@
<div class="tile">
<div class="tile-icon">
<figure class="avatar avatar-lg">
- <img src="img/avatar-3.png" alt="Avatar" />
+ <img src="img/avatar-3.png" alt="Avatar">
</figure>
</div>
<div class="tile-content">
@@ -2244,7 +2270,7 @@
<div class="tile">
<div class="tile-icon">
<figure class="avatar avatar-lg">
- <img src="img/avatar-2.png" alt="Avatar" />
+ <img src="img/avatar-2.png" alt="Avatar">
</figure>
</div>
<div class="tile-content">
@@ -2263,7 +2289,7 @@
<p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p>
</div>
-<!-- tiles example -->
+<!-- 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;
@@ -2304,7 +2330,7 @@
</div>
</div>
-<!-- tiles example -->
+<!-- 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;
@@ -2372,7 +2398,7 @@
<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 example -->
+<!-- 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;
@@ -2409,7 +2435,7 @@
<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 example -->
+<!-- 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>