diff options
Diffstat (limited to 'docs/src/components/avatars.pug')
| -rw-r--r-- | docs/src/components/avatars.pug | 114 |
1 files changed, 114 insertions, 0 deletions
diff --git a/docs/src/components/avatars.pug b/docs/src/components/avatars.pug new file mode 100644 index 0000000..a513648 --- /dev/null +++ b/docs/src/components/avatars.pug @@ -0,0 +1,114 @@ +extends ../_layout/_docs-layout.pug + +block variables + - var slug = 'avatars' + - var parent = 'components' + - var title = 'Avatars - Components - Spectre.css CSS Framework' + - var description = '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.' + +block docs-content + +docs-heading('avatars', 'Avatars') + include ../_layout/_ad-g.pug + + p Avatars are user profile pictures. + + .docs-demo.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl + img(src="../img/avatar-1.png" alt="Avatar XL") + figure.avatar.avatar-lg + img(src="../img/avatar-2.png" alt="Avatar LG") + figure.avatar + img(src="../img/avatar-3.png" alt="Avatar") + figure.avatar.avatar-sm + img(src="../img/avatar-4.png" alt="Avatar SM") + figure.avatar.avatar-xs + img(src="../img/avatar-5.png" alt="Avatar XS") + .column.col-6.col-xs-12 + figure.avatar.avatar-xl(data-initial="YZ") + figure.avatar.avatar-lg(data-initial="YZ") + figure.avatar(data-initial="YZ") + figure.avatar.avatar-sm(data-initial="YZ") + figure.avatar.avatar-xs(data-initial="YZ") + + p + | Add the #[code avatar] class to #{'<img>'} element. + | There are 4 additional sizes available, including #[code avatar-xl](64px), #[code avatar-lg](48px), #[code avatar-sm](24px), and #[code avatar-xs](16px). + | By default, the avatar size is 32px. + p + | For users who don't have profile pictures, you may use their initials for avatars. + | Add the #[code avatar] class and avatar size class to #{'<div>'} element. + | The #[code data-initial] attribute is the name appear inside the avatar. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <!-- Basic avatar examples --> + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="..."> + </figure> + + <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"></figure> + + <!-- Show initals when avatar image is unavailable or not fully loaded --> + <figure class="avatar avatar-xl" data-initial="YZ" style="background-color: #5755d9;"> + <img src="img/avatar-1.png" alt="..."> + </figure> + + .docs-demo.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl + img(src="../img/avatar-1.png" alt="Avatar") + img.avatar-icon(src="../img/avatar-2.png" alt="Avatar") + figure.avatar.avatar-lg + img(src="../img/avatar-2.png" alt="Avatar") + img.avatar-icon(src="../img/avatar-3.png" alt="Avatar") + figure.avatar + img(src="../img/avatar-3.png" alt="Avatar") + img.avatar-icon(src="../img/avatar-4.png" alt="Avatar") + figure.avatar.avatar-sm + img(src="../img/avatar-4.png" alt="Avatar") + img.avatar-icon(src="../img/avatar-5.png" alt="Avatar") + figure.avatar.avatar-xs + img(src="../img/avatar-5.png" alt="Avatar") + img.avatar-icon(src="../img/avatar-1.png" alt="Avatar") + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="..."> + <img src="img/avatar-5.png" class="avatar-icon" alt="..."> + </figure> + + +docs-subheading('avatars-presence', 'Avatar presence') + + .docs-demo.columns + .column.col-6.col-xs-12 + figure.avatar.avatar-xl(data-initial="YZ") + i.avatar-presence.online + figure.avatar.avatar-lg(data-initial="YZ") + i.avatar-presence.busy + figure.avatar(data-initial="YZ") + i.avatar-presence.away + figure.avatar.avatar-sm(data-initial="YZ") + i.avatar-presence.offline + figure.avatar.avatar-xs(data-initial="YZ") + i.avatar-presence.online + + p + | Avatars support presence indicators. + | You can add an #{'<i>'} element with the #[code avatar-presence] class, and add #[code online], #[code busy] or #[code away] class for different status colors. + | The default is gray which means offline. + + pre.code(data-lang='HTML') + code + :highlight(lang="html") + <figure class="avatar avatar-xl"> + <img src="img/avatar-1.png" alt="..."> + <i class="avatar-presence online"></i> + </figure> + + include ../_layout/_ad-c.pug + + include ../_layout/_footer.pug
\ No newline at end of file |