TRAVLR UI Kit

<%= require('html-loader!./../components/sidebar-documentation.html') %>

Brands Icons

TRAVLR UI Kit uses Brands Icons font icons which are composed of some 250+ icons. Easily style icons using border color classes, background color classes and size classes. Highlight icons using the .t-icon class.

Example

                            
                              <span class="t-icon icon-facebook"></span>

Icon Colour

Add color classes in combination with the feature icon class to draw attention to an icon. .icon-color-primary

Example

                            
                              <span class="t-icon icon-love t-color-primary"></span>
                              <span class="t-icon icon-love t-color-secondary"></span>
                              <span class="t-icon icon-love t-color-tertiary"></span>

Icon Size

To alter size use one of the four existing size classes: .icon-small , .icon-medium

Example

                            
                              <span class="t-icon icon-facebook icon-small"></span>
                              <span class="t-icon icon-facebook"></span>
                              <span class="t-icon icon-facebook icon-large"></span>

Icon Type

To alter size use one of the four existing size classes: .t-icon-is-spinning , .t-icon-rotate-90 , .t-icon-rotate-180 , .t-icon-rotate-270 , .t-icon-flip-y , .t-icon-flip-x

Example

                            
                              <span class="t-icon icon-facebook t-icon-is-spinning"></span>
                              <span class="t-icon icon-facebook t-icon-rotate-90"></span>
                              <span class="t-icon icon-facebook t-icon-rotate-180"></span>
                              <span class="t-icon icon-facebook t-icon-rotate-270"></span>
                              <span class="t-icon icon-facebook t-icon-flip-y"></span>
                              <span class="t-icon icon-facebook t-icon-flip-x"></span>

Brands Icons List

Rollover any icon to see icon class name.

<%= require('html-loader!./../components/footer-documentation.html') %>