Icons / Images

Documentation of icons, image utilities and badge components.

Files

app/styles/modules/_icons_images.scss

Icons

Here is preview of icon set used in this project. An icon can be created by using class .icon on <i> element and coresponding ligature inside the tags. Ligatures for icons can be found under icons in preview

Warning

Do not forget to configure preferences for icomoon font: check include metadata in fonts, check encode & embed font in CSS

dependency

Icomoon icons require to link app/fonticons/icomoon/style.css file in <head>.
All files required for icomoon can be found in folder app/fonticons/icomoon/
For more specific documentation check icomoon.

Example:

account_search
add_circle
add
agents_free
agents_oncall
agents_onpause
airplay
apple
arrowdown
arrowleft
arrowright
arrowup
assignment
attach_file
attach
calendar_new
calendar
call_end
call_made
call_missed
call_pickup_1
call_pickup_2
call_pickup_3
call_received
call_time
call
calls_missed
calls_ongoing
calls_resolved
calls_returned
calls_waiting
cancel
caretdown
caretleft
caretright
caretup
cash
cast
chat
chatarea
check_circle
check
checkbox
chevrondown
chevronleft
chevronright
chevronup
circle_check
circle_circles
circle_clock
circle_duration
circle_empty
circle_exclamation
circle_ff
circle_missed
circle_pause
circle_phone
circle
close
code
contactmail
copy
delete
desktop_windows
dialpad
download
edit
ellipsis
email
emoticon
event
external_link
eye
facebook
fast_forward
fast_rewind
file
filter
flag
fullscreen_exit
fullscreen
group_add
group
headset_mic
help
home
info
keyboard_control
layout
link
linux
list
local_phone
login_duration
login_tie
logout_2
logout
message
mic_off
mic
more
notifications_active
notifications_off
notifications
ondemand_video
page_first
page_last
pause
pauses_nonwork
pauses_work
person_add
person
phone_bluetooth_speaker
phone_forwarded
phone_in_talk
phone_locked
phone_log
phone_missed
phone_paused
play_arrow
refresh
rings_missed
search
settings_2
settings
settingsbox
shopping
stats
stop
time
timer
total
upload
videocam_off
videocam
volume_down
volume_mute
volume_off
volume_up
wait
windows
work
xioff
xion
xipause

Code:

<i class="icon icon-l">fast_forward</i>
...

Sizes

There are fours sizes for iconsL XL, L, M, S. Size for icon can be specified with class .icon-[xl/l/m/s] on icon element.

Note

In case there is no class for size, icon will inherit size from parent font-size property.

Example:

Code:

<ul>
  <li><i class="icon icon-xl">home</i></li>
  <li><i class="icon icon-l">home</i></li>
  <li><i class="icon icon-m">home</i></li>
  <li><i class="icon icon-s">home</i></li>
</ul>

Colors

Icons use same text color priciple for colors as typography.

Note

In case there is no class for color, icon will inherit color from parent color property.

Example:

Code:

<ul>
  <li><i class="icon icon-l text-color-theme">home</i></li>
  <li><i class="icon icon-l text-color-black">home</i></li>
  <li><i class="icon icon-l text-color-semiblack">home</i></li>
  <li><i class="icon icon-l text-color-error">home</i></li>
</ul>

Image utilities

There are three basic image utilities: fluid, rounded and circle. Fluid utility gives image ability to change size coresponding to its parent. Circle and rounded utilities provides specific shapes for images.

Example:

Code:

<img src="..." class="img-fluid">
<img src="..." class="img-rounded">
<img src="..." class="img-circle">

Avatars

Avatars are basic elemets containing image element. Avatar can be created by using class .avatar on element.
Avatars can also show state. To show state use additional class .avatar-state and set stage with class .avatar-state-[green/red/orange/gray].

Example:

Avatar

Groups

Rooms

Avatars with state

Green

Red

Orange

Gray

Code:

<!-- groups -->
<figure class="avatar">
  <img src="/images/app/avatar-groups.jpg" alt="Groups" class="img-fluid img-circle">
</figure>

<!-- rooms -->
<figure class="avatar">
  <img src="/images/app/avatar-rooms.jpg" alt="Rooms" class="img-fluid img-circle">
</figure>

<!-- avatar green-->
<figure class="avatar avatar-state avatar-state-green">
  <img src="..." alt="..." class="img-fluid img-circle">
</figure>

<!-- avatar red-->
<figure class="avatar avatar-state avatar-state-red">
  <img src="..." alt="..." class="img-fluid img-circle">
</figure>

<!-- avatar orange-->
<figure class="avatar avatar-state avatar-state-orange">
  <img src="..." alt="..." class="img-fluid img-circle">
</figure>

<!-- avatar gray-->
<figure class="avatar avatar-state avatar-state-gray">
  <img src="..." alt="..." class="img-fluid img-circle">
</figure>

Avatar list

Avatar list can be created by wrapping each avatar into element with class .avatarlist_item, which are list items of .avatarlist.

Note

In case of too many avatars in avatar list, you can use special avatar type .avatar-more to show count of hidden avatars.

Example:

Code:

<ul class="avatarlist">
  <li class="avatarlist_item">
    <figure class="avatar avatar-state avatar-state-green">
      <img src="/images/content/people/michel.jpg" alt="Michel" class="img-fluid img-circle">
    </figure>
  </li>
  <li class="avatarlist_item">...</li>
  ...
  <li class="avatarlist_item">
    <a class="avatar avatar-more">
      <span>+5</span>
    </a>
  </li>
</ul>

Avatar notification

Example:

Badges

Basic badge can be created by adding class .badge on inline element as <span>. Badge can be colored with .badge-red/orange/lightgreen. For an outlined version just add .badge-outline.

Example:

1 12 12 12 I have no background! I have a red outline! 12 12

Code:

<span class="badge">1</span>
<span class="badge badge-red">1</span>
<span class="badge badge-lightgreen">1</span>
<span class="badge badge-orange">1</span>
<span class="badge badge-outline">1</span>
<span class="badge badge-outline badge-red">1</span>
<span class="badge badge-outline badge-lightgreen">1</span>
<span class="badge badge-outline badge-orange">1</span>

Large badges

A large badge can be created by adding class .badge-l.

Example:

1 12

Code:

<span class="badge badge-l">1</span>
<span class="badge badge-l badge-red badge-outline">1</span>

Status badge

A badge can indicate status. To create such badge, add a span.badge_status child element to your standard badge. Additionaly, use .badge_status-success, .badge_status-error and .badge_status-disabled to indicate different scenarios.

Note

Badge stati work best on outlined badges.

Example:

Yay! Oh No

Code:

<span class="badge badge-outline">
  <span class="badge_status badge_status-success"></span>
  Yay!
</span>

<span class="badge badge-outline">
  <span class="badge_status badge_status-error"></span>
  Oh
</span>

<span class="badge badge-outline">
  <span class="badge_status badge_status-disabled"></span>
  No
</span>