Documentation of icons, image utilities and badge components.
Files
app/styles/modules/_icons_images.scssIcons
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.
<i class="icon icon-l"></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">caretdown</i>
<i class="icon icon-l">caretright</i>
<i class="icon icon-l">caretleft</i>
<i class="icon icon-l">caretup</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">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">search</i>
<i class="icon icon-l">basket</i>
<i class="icon icon-l">calendar</i>
<i class="icon icon-l">search2</i>
<i class="icon icon-l">minus</i>
<i class="icon icon-l">cards</i>
<i class="icon icon-l">location</i>
<i class="icon icon-l">menu</i>
<i class="icon icon-l">filter</i>
<i class="icon icon-l">info</i>
<i class="icon icon-l">water</i>
<i class="icon icon-l">eye</i>
<i class="icon icon-l">code</i>
<i class="icon icon-l">map</i>
<i class="icon icon-l">share</i>
<i class="icon icon-l"></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">linkedin2, brand65</i>
<i class="icon icon-l">pinterest2, brand73</i>
<i class="icon icon-l">star-empty, rate</i>
<i class="icon icon-l">star-half, rate2</i>
<i class="icon icon-l">star-full, rate3</i>
<i class="icon icon-l">cancel-circle, close</i>
<i class="icon icon-l">clock, time2</i>
<i class="icon icon-l">user, profile2</i>
<i class="icon icon-l">users, group</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.
<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.
<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
Illustrations
aquapark
bike
body-beauty
dog
facial-beauty
golf
gym
hairdresser
hotel-rating
indoor-swimming-pool
jacuzzi-indoor
jacuzzi
massage
nails
outdoor-swimming-pool
playground
salt-cave
sauna
spa
tenis
wifi
air-conditioning
area
bathroom
breakfast
business
cleaning
entertainment-and-family
food-and-drink
general
internet
languages-spoken
living-area
media-and-technology-TV
occupancy-adult
occupancy-child
parking
pets
reception
sound-proofing
wellness
<img src='/images/illustrations/aquapark.svg' alt='aquapark' />
<img src='/images/illustrations/bike.svg' alt='bike' />
<img src='/images/illustrations/body-beauty.svg' alt='body-beauty' />
<img src='/images/illustrations/dog.svg' alt='dog' />
<img src='/images/illustrations/facial-beauty.svg' alt='facial-beauty' />
<img src='/images/illustrations/golf.svg' alt='golf' />
<img src='/images/illustrations/gym.svg' alt='gym' />
<img src='/images/illustrations/hairdresser.svg' alt='hairdresser' />
<img src='/images/illustrations/hotel-rating.svg' alt='hotel-rating' />
<img src='/images/illustrations/indoor-swimming-pool.svg' alt='indoor-swimming-pool' />
<img src='/images/illustrations/jacuzzi-indoor.svg' alt='jacuzzi-indoor' />
<img src='/images/illustrations/jacuzzi.svg' alt='jacuzzi' />
<img src='/images/illustrations/massage.svg' alt='massage' />
<img src='/images/illustrations/nails.svg' alt='nails' />
<img src='/images/illustrations/outdoor-swimming-pool.svg' alt='outdoor-swimming-pool' />
<img src='/images/illustrations/playground.svg' alt='playground' />
<img src='/images/illustrations/salt-cave.svg' alt='salt-cave' />
<img src='/images/illustrations/sauna.svg' alt='sauna' />
<img src='/images/illustrations/spa.svg' alt='spa' />
<img src='/images/illustrations/tenis.svg' alt='tenis' />
<img src='/images/illustrations/wifi.svg' alt='wifi' />
<img src='/images/illustrations/air-conditioning.svg' alt='air-conditioning' />
<img src='/images/illustrations/area.svg' alt='area' />
<img src='/images/illustrations/bathroom.svg' alt='bathroom' />
<img src='/images/illustrations/breakfast.svg' alt='breakfast' />
<img src='/images/illustrations/business.svg' alt='business' />
<img src='/images/illustrations/cleaning.svg' alt='cleaning' />
<img src='/images/illustrations/entertainment-and-family.svg' alt='entertainment-and-family' />
<img src='/images/illustrations/food-and-drink.svg' alt='food-and-drink' />
<img src='/images/illustrations/general.svg' alt='general' />
<img src='/images/illustrations/internet.svg' alt='internet' />
<img src='/images/illustrations/languages-spoken.svg' alt='languages-spoken' />
<img src='/images/illustrations/living-area.svg' alt='living-area' />
<img src='/images/illustrations/media-and-technology-TV.svg' alt='media-and-technology-TV' />
<img src='/images/illustrations/occupancy-adult.svg' alt='occupancy-adult' />
<img src='/images/illustrations/occupancy-child.svg' alt='occupancy-child' />
<img src='/images/illustrations/parking.svg' alt='parking' />
<img src='/images/illustrations/pets.svg' alt='pets' />
<img src='/images/illustrations/reception.svg' alt='reception' />
<img src='/images/illustrations/sound-proofing.svg' alt='sound-proofing' />
<img src='/images/illustrations/wellness.svg' alt='wellness' />
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.
<img src="..." class="img-fluid">
<img src="..." class="img-rounded">
<img src="..." class="img-circle">