Summary Files Commits Branches @commit @diff @stats
path: root / docs / elements.html
diff options
context:
space:
mode:
1 files changed, 52 insertions, 4 deletions
-rw-r--r--docs/elements.html56
diff --git a/docs/elements.html b/docs/elements.html
index fcba870..12b0dd2 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -411,9 +411,9 @@
<button class="btn btn-primary btn-sm">small</button>
</div>
<div class="column col-3 col-xs-12">
- <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-cross"></i></button>
- <button class="btn btn-action btn-primary"><i class="icon icon-cross"></i></button>
- <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-cross"></i></button>
+ <button class="btn btn-action btn-primary btn-lg"><i class="icon icon-menu"></i></button>
+ <button class="btn btn-action btn-primary"><i class="icon icon-menu"></i></button>
+ <button class="btn btn-action btn-primary btn-sm"><i class="icon icon-menu"></i></button>
</div>
<div class="column col-3 col-xs-12">
<button class="btn btn-action btn-primary btn-lg circle"><i class="icon icon-arrow-up"></i></button>
@@ -1014,7 +1014,7 @@
<section id="icons" class="container">
<header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
<section class="notes">
- <p><strong>Icons</strong> are pure CSS icons.</p>
+ <p><strong>Icons</strong> are pure CSS icons. You can include <code>spectre-icons.css</code> in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
</section>
<div class="columns">
<div class="column col-3 col-md-6">
@@ -1115,10 +1115,58 @@
</div>
<div class="column col-3 col-md-6">
<button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-refresh"></i>
+ </button>
+ <p>icon-refresh</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-search"></i>
+ </button>
+ <p>icon-search</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-edit"></i>
+ </button>
+ <p>icon-edit</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-share"></i>
+ </button>
+ <p>icon-share</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-download"></i>
+ </button>
+ <p>icon-download</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-upload"></i>
+ </button>
+ <p>icon-upload</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
<i class="icon icon-mail"></i>
</button>
<p>icon-mail</p>
</div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-people"></i>
+ </button>
+ <p>icon-people</p>
+ </div>
+ <div class="column col-3 col-md-6">
+ <button class="btn btn-primary btn-action btn-lg">
+ <i class="icon icon-link"></i>
+ </button>
+ <p>icon-link</p>
+ </div>
</div>
<!-- icons example -->