diff options
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.html | 322 |
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"><!-- standard Accordions examples --></span> +<!-- accordions --> +<pre class="code" data-lang="HTML"><code><span class="com"><!-- standard Accordions example --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-item"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>/> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-5"</span>><<span class="tag">/i</span>> - Title - <<span class="tag">/label</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-checkbox"</span> <span class="atn">hidden</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-1"</span>><<span class="tag">/i</span>> + Title + <<span class="tag">/label</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> + <span class="com"><!-- Accordions content --></span> <<span class="tag">/div</span>> - <span class="com"><!-- Accordions item --></span> <<span class="tag">/div</span>> -<span class="com"><!-- mutually exclusive Accordions examples --></span> +<span class="com"><!-- mutually exclusive Accordions example (with same input names) --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion"</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-item"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>/> - <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> - Title - <<span class="tag">/label</span>> - <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> - <span class="com"><!-- Accordions content --></span> - <<span class="tag">/div</span>> + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">id</span>=<span class="atv">"accordion-1"</span> <span class="atn">name</span>=<span class="atv">"accordion-radio"</span> <span class="atn">hidden</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> + Title + <<span class="tag">/label</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> + <span class="com"><!-- Accordions content --></span> <<span class="tag">/div</span>> - <span class="com"><!-- Accordions item --></span> <<span class="tag">/div</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> + + <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"><!-- details and summary Accordions example --></span> +<<span class="tag">details</span> <span class="atn">class</span>=<span class="atv">"accordion"</span> <span class="atn">open</span>> + <<span class="tag">summary</span> <span class="atn">class</span>=<span class="atv">"accordion-header"</span>> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-arrow-right mr-1"</span>><<span class="tag">/i</span>> + Title + <<span class="tag">/summary</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"accordion-body"</span>> + <span class="com"><!-- Accordions content --></span> + <<span class="tag">/div</span>> +<<span class="tag">/details</span>> +</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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete"</span>> <span class="com"><!-- autocomplete input container --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-autocomplete-input form-input"</span>> <span class="com"><!-- autocomplete chips --></span> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Thor Odinson"</span>> Thor Odinson <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/label</span>> <span class="com"><!-- autocomplete real input box --></span> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"typing here"</span>> <<span class="tag">/div</span>> <span class="com"><!-- autocomplete suggestion list --></span> @@ -520,7 +546,7 @@ <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-4.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> <span class="atn">alt</span>=<span class="atv">"Steve Rogers"</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-content"</span>> 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"><!-- Basic avatar examples --></span> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-5.png"</span> <span class="atn">class</span>=<span class="atv">"avatar-icon"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>><<span class="tag">/figure</span>> <span class="com"><!-- Show initals when avatar image is unavailable or not fully loaded --></span> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span> <span class="atn">style</span>=<span class="atv">"background-color: #5764c6;"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">/figure</span>> </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><<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-xl"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">alt</span>=<span class="atv">"..."</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"avatar-presence online"</span>><<span class="tag">/i</span>> <<span class="tag">/figure</span>> </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><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"badge"</span>> Notifications <<span class="tag">/span</span>> @@ -715,7 +741,7 @@ <<span class="tag">/button</span>> <<span class="tag">figure</span> <span class="atn">class</span>=<span class="atv">"avatar badge"</span> <span class="atn">data-badge</span>=<span class="atv">"8"</span> <span class="atn">data-initial</span>=<span class="atv">"YZ"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">alt</span>=<span class="atv">"YZ"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-3.png"</span> <span class="atn">alt</span>=<span class="atv">"YZ"</span>> <<span class="tag">/figure</span>> </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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-sm"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span> <span class="atn">aria-valuenow</span>=<span class="atv">"25"</span> <span class="atn">aria-valuemin</span>=<span class="atv">"0"</span> <span class="atn">aria-valuemax</span>=<span class="atv">"100"</span>><<span class="tag">/div</span>> <<span class="tag">/div</span>> @@ -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"><!-- slider --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar bar-slider"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"bar-item"</span> <span class="atn">role</span>=<span class="atv">"progressbar"</span> <span class="atn">style</span>=<span class="atv">"width:25%;"</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"breadcrumb"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"breadcrumb-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Home<<span class="tag">/a</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-image"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/osx-el-capitan.jpg"</span> <span class="atn">class</span>=<span class="atv">"img-responsive"</span>> <<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-header"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"card-title h5"</span>>Microsoft<<span class="tag">/div</span>> @@ -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><<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> Crime <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/span</span>> <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"chip"</span>> - <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span> /> + <<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">"img/avatar-1.png"</span> <span class="atn">class</span>=<span class="atv">"avatar avatar-sm"</span>> Yan Zhu <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-clear"</span> <span class="atn">aria-label</span>=<span class="atv">"Close"</span> <span class="atn">role</span>=<span class="atv">"button"</span>><<span class="tag">/a</span>> <<span class="tag">/span</span>></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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"empty-icon"</span>> <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"icon icon-people"</span>><<span class="tag">/i</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"menu"</span>> <span class="com"><!-- menu header text --></span> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"divider"</span> <span class="atn">data-content</span>=<span class="atv">"LINKS"</span>> @@ -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"><!-- basic dropdown button --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"dropdown"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"btn btn-link dropdown-toggle"</span> <span class="atn">tabindex</span>=<span class="atv">"0"</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal modal-sm"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-overlay"</span>><<span class="tag">/div</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"modal-container"</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item disabled"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">tabindex</span>=<span class="atv">"-1"</span>>Previous<<span class="tag">/a</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"pagination"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"page-item page-prev"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-header"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"panel-title"</span>>Comments<<span class="tag">/div</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"nav"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"nav-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Elements<<span class="tag">/a</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover popover-right"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary"</span>>right popover<<span class="tag">/button</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"popover-container"</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"step"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"step-item"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Step 1"</span>>Step 1<<span class="tag">/a</span>> @@ -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 <a> with the <code>active</code> class will be highlighted.</p> </div> -<!-- tabs example --> +<!-- tabs --> <pre class="code" data-lang="HTML"><code><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>>Music<<span class="tag">/a</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab tab-block"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span> <span class="atn">class</span>=<span class="atv">"badge"</span> <span class="atn">data-badge</span>=<span class="atv">"9"</span>> @@ -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><<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">"tab"</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item active"</span>> <<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">"#"</span>> @@ -2208,7 +2234,7 @@ <<span class="tag">/li</span>> <<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">"tab-item tab-action"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"input-group input-inline"</span>> - <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span> /> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input input-sm"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">placeholder</span>=<span class="atv">"search"</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn btn-primary btn-sm input-group-btn"</span>>Search<<span class="tag">/button</span>> <<span class="tag">/div</span>> <<span class="tag">/li</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> @@ -2304,7 +2330,7 @@ </div> </div> -<!-- tiles example --> +<!-- tiles --> <pre class="code" data-lang="HTML"><code><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile tile-centered"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"tile-icon"</span>> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"example-tile-icon"</span>> @@ -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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"toast"</span>> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <<span class="tag">/div</span>> @@ -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><<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>top tooltip<<span class="tag">/button</span>> <<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">"btn tooltip tooltip-right"</span> <span class="atn">data-tooltip</span>=<span class="atv">"Lorem ipsum dolor sit amet"</span>>right tooltip<<span class="tag">/button</span>> </code></pre> |