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:code
  • services
    services
  • ratings
    ratings
  • timeoff
    timeoff
  • filter
    filter
  • filterfull
    filterfull
  • place
    place
  • edit
    edit
  • comb
    comb
  • lock
    lock
  • profilem
    profilem
  • profilew
    profilew
  • check
    check
  • minus
    minus
  • plus
    plus
  • euro
    euro
  • calendar-s
    calendar-s
  • clock
    clock
  • star
    star
  • status
    status
  • chevrondown
    chevrondown
  • chevronleft
    chevronleft
  • chevronright
    chevronright
  • chevronup
    chevronup
  • clock-l
    clock-l
  • discount
    discount
  • company
    company
  • tooltip
    tooltip
  • notifications
    notifications
  • close
    close
  • info
    info
  • success
    success
  • successfull
    successfull
  • warning
    warning
  • error
    error
  • trash
    trash
  • appointments
    appointments
  • calendar
    calendar
  • chat
    chat
  • customers
    customers
  • dashboard
    dashboard
  • help
    help
  • mediamanager
    mediamanager
  • rooms
    rooms
  • search
    search
  • settings
    settings
  • staff
    staff
  • more
    more
  • download2, save4
    download2, save4
Code:
<ul>
  - for (var i=0; i < getIcons().length; i++) {
    <li><i class="icon icon-l">getIcons()[i]</i></li>
  - }
</ul>

Sizes

There are three sizes for iconsL L, M, S. Size for icon can be specified with class .icon-[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
  • dashboard
    L
  • dashboard
    M
  • dashboard
    S
Code:
<ul>
  <li><i class="icon icon-l">dashboard</i></li>
  <li><i class="icon icon-m">dashboard</i></li>
  <li><i class="icon icon-s">dashboard</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
  • dashboard
  • dashboard
  • dashboard
  • dashboard
Code:
<ul>
  <li><i class="icon icon-l text-color-orange">dashboard</i></li>
  <li><i class="icon icon-l text-color-orange-100">dashboard</i></li>
  <li><i class="icon icon-l text-color-semiblack">dashboard</i></li>
  <li><i class="icon icon-l text-color-error">dashboard</i></li>
</ul>

Images

Media

Images should be placed inside <figure class="media" /> and action text inside <figcaption class="media_action" /> element. Examples are shown below.

Example:code

Media

Media

Media with action

Media with action
Zmeniť fotku

Media placeholder

Media placeholder
+ Pridať fotku
Code:
<figure class="media">
  <img class="img-fluid" src="/images/media.jpg" alt="m">
</figure>

<figure class="media">
  <img class="img-fluid" src="/images/media.jpg" alt="">
  <figcaption class="media_action">Zmeniť fotku</figcaption>
</figure>

<figure class="media media-placeholder">
  <img class="img-fluid" src="/images/media-placeholder.png" alt="">
  <figcaption class="media_action">+ Pridať fotku</figcaption>
</figure>

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
placeholder
placeholder
placeholder
Code:
<img src="..." class="img-fluid">
<img src="..." class="img-rounded">
<img src="..." class="img-circle">