diff options
Diffstat (limited to 'docs/components/avatars.html')
| -rw-r--r-- | docs/components/avatars.html | 49 |
1 files changed, 29 insertions, 20 deletions
diff --git a/docs/components/avatars.html b/docs/components/avatars.html index 34f3ee7..18225d7 100644 --- a/docs/components/avatars.html +++ b/docs/components/avatars.html @@ -6,8 +6,14 @@ <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="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language."> + <meta name="description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> <meta name="author" content="Yan Zhu"> + <meta property="og:url" content="https://picturepan2.github.io/spectre/components/avatars.html"> + <meta property="og:title" content="Avatars - Components - Spectre.css CSS Framework"> + <meta property="og:description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development."> + <meta name="twitter:card" content="summary"> + <meta name="twitter:site" content="@spectrecss"> + <meta name="twitter:creator" content="@picturepan2"> <link rel="shortcut icon" href="../img/favicons/favicon.ico"> <link rel="icon" href="../img/favicons/favicon.png"> <link rel="stylesheet" href="../dist/spectre.min.css"> @@ -160,6 +166,8 @@ <label class="accordion-header c-hand" for="accordion-experimentals">Experimentals</label> <div class="accordion-body"> <ul class="menu menu-nav"> + <li class="menu-item"><a href="../experimentals/viewer-360.html">360-Degree Viewer</a> + </li> <li class="menu-item"><a href="../experimentals/autocomplete.html">Autocomplete</a> </li> <li class="menu-item"><a href="../experimentals/calendars.html">Calendars</a> @@ -206,18 +214,18 @@ <p>Avatars are user profile pictures. </p> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"><img src="../img/avatar-1.png" alt="Avatar XL"></figure> - <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar LG"></figure> - <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure> - <figure class="avatar avatar-sm"><img src="../img/avatar-4.png" alt="Avatar SM"></figure> - <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar XS"></figure> + <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar XL"></figure> + <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar LG"></figure> + <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"></figure> + <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar SM"></figure> + <figure class="avatar avatar-xs mr-2"><img src="../img/avatar-5.png" alt="Avatar XS"></figure> </div> <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"></figure> - <figure class="avatar avatar-lg" data-initial="YZ"></figure> - <figure class="avatar" data-initial="YZ"></figure> - <figure class="avatar avatar-sm" data-initial="YZ"></figure> - <figure class="avatar avatar-xs" data-initial="YZ"></figure> + <figure class="avatar avatar-xl mr-2" data-initial="YZ"></figure> + <figure class="avatar avatar-lg mr-2" data-initial="YZ"></figure> + <figure class="avatar mr-2" data-initial="YZ"></figure> + <figure class="avatar avatar-sm mr-2" data-initial="YZ"></figure> + <figure class="avatar avatar-xs mr-2" data-initial="YZ"></figure> </div> </div> <p>Add the <code>avatar</code> class to <img> element. @@ -241,12 +249,13 @@ <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>></span> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> </code></pre> + <h4 class="s-subtitle" id="avatars-icons">Avatar icons<a class="anchor" href="#avatars-icons" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure> - <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure> - <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure> - <figure class="avatar avatar-sm"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure> + <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure> + <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure> + <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure> + <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure> <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-1.png" alt="Avatar"></figure> </div> </div> @@ -258,11 +267,11 @@ <h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4> <div class="docs-demo columns"> <div class="column col-6 col-xs-12"> - <figure class="avatar avatar-xl" data-initial="YZ"><i class="avatar-presence online"></i></figure> - <figure class="avatar avatar-lg" data-initial="YZ"><i class="avatar-presence busy"></i></figure> - <figure class="avatar" data-initial="YZ"><i class="avatar-presence away"></i></figure> - <figure class="avatar avatar-sm" data-initial="YZ"><i class="avatar-presence offline"></i></figure> - <figure class="avatar avatar-xs" data-initial="YZ"><i class="avatar-presence online"></i></figure> + <figure class="avatar avatar-xl mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure> + <figure class="avatar avatar-lg mr-2" data-initial="YZ"><i class="avatar-presence busy"></i></figure> + <figure class="avatar mr-2" data-initial="YZ"><i class="avatar-presence away"></i></figure> + <figure class="avatar avatar-sm mr-2" data-initial="YZ"><i class="avatar-presence offline"></i></figure> + <figure class="avatar avatar-xs mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure> </div> </div> <p> |