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
  • cards
    cards
  • search2
    search2
  • basket
    basket
  • home
    home
  • searchok
    searchok
  • services
    services
  • staff
    staff
  • ring
    ring
  • heart
    heart
  • branch
    branch
  • more
    more
  • percentage
    percentage
  • faces
    faces
  • pin
    pin
  • people
    people
  • resize
    resize
  • list
    list
  • pin2
    pin2
  • calendar
    calendar
  • search
    search
  • menu
    menu
  • add
    add
  • chevrondown
    chevrondown
  • chevronleft
    chevronleft
  • chevronright
    chevronright
  • chevronup
    chevronup
  • check
    check
  • close
    close
  • minus
    minus
  • location
    location
  • arrowup
    arrowup
  • arrowright
    arrowright
  • arrowdown
    arrowdown
  • arrowleft
    arrowleft
  • eye
    eye
  • code
    code
  • facebook, brand10
    facebook, brand10
  • instagram, brand12
    instagram, brand12
  • twitter, brand16
    twitter, brand16
  • youtube, brand21
    youtube, brand21
  • caretdown
    caretdown
  • caretright
    caretright
  • caretleft
    caretleft
  • caretup
    caretup
Code:
<i class="icon icon-l">cards</i>
<i class="icon icon-l">search2</i>
<i class="icon icon-l">basket</i>
<i class="icon icon-l">home</i>
<i class="icon icon-l">searchok</i>
<i class="icon icon-l">services</i>
<i class="icon icon-l">staff</i>
<i class="icon icon-l">ring</i>
<i class="icon icon-l">heart</i>
<i class="icon icon-l">branch</i>
<i class="icon icon-l">more</i>
<i class="icon icon-l">percentage</i>
<i class="icon icon-l">faces</i>
<i class="icon icon-l">pin</i>
<i class="icon icon-l">people</i>
<i class="icon icon-l">resize</i>
<i class="icon icon-l">list</i>
<i class="icon icon-l">pin2</i>
<i class="icon icon-l">calendar</i>
<i class="icon icon-l">search</i>
<i class="icon icon-l">menu</i>
<i class="icon icon-l">add</i>
<i class="icon icon-l">chevrondown</i>
<i class="icon icon-l">chevronleft</i>
<i class="icon icon-l">chevronright</i>
<i class="icon icon-l">chevronup</i>
<i class="icon icon-l">check</i>
<i class="icon icon-l">close</i>
<i class="icon icon-l">minus</i>
<i class="icon icon-l">location</i>
<i class="icon icon-l">arrowup</i>
<i class="icon icon-l">arrowright</i>
<i class="icon icon-l">arrowdown</i>
<i class="icon icon-l">arrowleft</i>
<i class="icon icon-l">eye</i>
<i class="icon icon-l">code</i>
<i class="icon icon-l">facebook, brand10</i>
<i class="icon icon-l">instagram, brand12</i>
<i class="icon icon-l">twitter, brand16</i>
<i class="icon icon-l">youtube, brand21</i>
<i class="icon icon-l">caretdown</i>
<i class="icon icon-l">caretright</i>
<i class="icon icon-l">caretleft</i>
<i class="icon icon-l">caretup</i>

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
  • home
    L
  • home
    M
  • home
    S
Code:
<ul>
  <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
  • home
  • home
  • home
  • home
Code:
<ul>
  <li><i class="icon icon-l text-color-primary-500">home</i></li>
  <li><i class="icon icon-l text-color-secondary-500">home</i></li>
  <li><i class="icon icon-l text-color-green-500">home</i></li>
  <li><i class="icon icon-l text-color-red-500">home</i></li>
</ul>

Images

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">

Tags

A basic tag can be created by using class .tag. List of tags can be wrapped into element with class .tags.

Example:code
  • Lorem
  • Ipsum
  • Dolore
Code:
<ul class="tags">
  <li class="tag">Lorem</li>
  <li class="tag">Ipsum</li>
  <li class="tag">Dolore</li>
</ul>

Sizes

Tags can have two sizes: default and small. Small size tag can be created by using additional class .tag-small.

Example:code
  • Lorem
  • Ipsum
  • Dolore
Code:
<ul class="tags">
  <li class="tag tag-small">Lorem</li>
  <li class="tag tag-small">Ipsum</li>
  <li class="tag tag-small">Dolore</li>
</ul>

Colors

Color of tags can be set with additional class .tag-color-[blue/green/yellow/orange/bloodorange].

Example:code
  • blue
  • green
  • yellow
  • orange
  • bloodorange
Code:
<ul class="tags">
  <li class="tag tag-color-blue">blue</li>
  <li class="tag tag-color-green">green</li>
  <li class="tag tag-color-yellow">yellow</li>
  <li class="tag tag-color-orange">orange</li>
  <li class="tag tag-color-bloodorange">bloodorange</li>
</ul>

Tags in headlines

Example:code

Lorem ipsum4.5

Code:
<h2>
  <span class="text-vam">Lorem ipsum</span>
  <span class="tag tag-color-green text-vam mrg-10-left">4.5</span>
</h2>