styles.min.css

This .css file contains bootstrap.css (v3.3.7), fontawesome.css and all necessary css code/references. This .css also includes references and paths to fonts and glyph icons (Google Font, FontAwesome and Material Icons).

Include the following in the head of each HTML document:

<link href="https://s3.glo.texas.gov/uilib/css/styles.min.css" rel="stylesheet" />

jQuery

jQuery version 3.2.1 (or earlier version depending on other jQuery dependencies in your application) necessary to run UI components.

Include the following in the bottom of each HTML document before the </body> tag:

<script src="https://s3.glo.texas.gov/uilib/js/jquery-3.2.1.min.js" type="text/javascript"></script>

script.min.js

Contains bootstrap.js (v3.3.7), and all necessary JavaScript code/references for UI animations and display features except for the accordion, which requires jQuery

Include the following in the bottom of each HTML document before the </body> tag:

<script src="https://s3.glo.texas.gov/uilib/js/script.min.js" type="text/javascript"></script>
  • default #777777
  • primary #9e8b56
  • info #03a9f4
  • success #4caf50
  • warning #fbc02d
  • danger #f44336

Google Font Roboto - default font size: 16px


Light - font-weight: 300

class="light"

Regular (default) - font-weight: 400


Medium - font-weight: 500

class="medium"

Bold - font-weight: 700

class="bold"

Sizes

Extra Small (10px)

class="font-xs"

Small (12px)

class="font-sm"

Default (16px)


Large (18px)

class="font-lg"

Extra Large (20px)

class="font-xl"

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript®

Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variarble element, such as x = y

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

  • List Item
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
  • List Item
  • List Item
  • List Item
  • List Item
    • Nested List Item
    • Nested List Item
  • List Item
  1. List Item
  2. List Item
  3. List Item
    1. Nested List Item
    2. Nested List Item
  4. List Item
Term
This is the definition of the term.
group

Sizes

Styles

Button Dropdowns

Single button dropdowns

Sizing

Button Group Variants

Button toolbar

Sizing







Nesting

Vertical variation

Justified button groups


Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4
row 1 cell 1 row 1 cell 2 row 1 cell 3 row 1 cell 4
# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 € 99,225
2 John Doe Design 2012 € 89,241
3 Alex Mike Design 2010 € 92,144
23
Example Label

Page Header Example Label

Page Header Example Label

Page Header Example Label

Page Header Example Label

Page Header Example Label
Page Header Example Label
Primary Success Info Warning Danger
60% Complete

Contextual Alternatives

Progress bars use some of the same button and alert classes for consistent styles.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)

The UI Library currently includes the following FontAwesome fonts:


  • fa-500px [&#xf26e;]

  • fa-adjust [&#xf042;]

  • fa-adn [&#xf170;]

  • fa-align-center [&#xf037;]

  • fa-align-justify [&#xf039;]

  • fa-align-left [&#xf036;]

  • fa-align-right [&#xf038;]

  • fa-amazon [&#xf270;]

  • fa-ambulance [&#xf0f9;]

  • fa-anchor [&#xf13d;]

  • fa-android [&#xf17b;]

  • fa-angellist [&#xf209;]

  • fa-angle-double-down [&#xf103;]

  • fa-angle-double-left [&#xf100;]

  • fa-angle-double-right [&#xf101;]

  • fa-angle-double-up [&#xf102;]

  • fa-angle-down [&#xf107;]

  • fa-angle-left [&#xf104;]

  • fa-angle-right [&#xf105;]

  • fa-angle-up [&#xf106;]

  • fa-apple [&#xf179;]

  • fa-archive [&#xf187;]

  • fa-area-chart [&#xf1fe;]

  • fa-arrow-circle-down [&#xf0ab;]

  • fa-arrow-circle-left [&#xf0a8;]

  • fa-arrow-circle-o-down [&#xf01a;]

  • fa-arrow-circle-o-left [&#xf190;]

  • fa-arrow-circle-o-right [&#xf18e;]

  • fa-arrow-circle-o-up [&#xf01b;]

  • fa-arrow-circle-right [&#xf0a9;]

  • fa-arrow-circle-up [&#xf0aa;]

  • fa-arrow-down [&#xf063;]

  • fa-arrow-left [&#xf060;]

  • fa-arrow-right [&#xf061;]

  • fa-arrow-up [&#xf062;]

  • fa-arrows [&#xf047;]

  • fa-arrows-alt [&#xf0b2;]

  • fa-arrows-h [&#xf07e;]

  • fa-arrows-v [&#xf07d;]

  • fa-asterisk [&#xf069;]

  • fa-at [&#xf1fa;]

  • fa-automobile [&#xf1b9;]

  • fa-backward [&#xf04a;]

  • fa-balance-scale [&#xf24e;]

  • fa-ban [&#xf05e;]

  • fa-bar-chart [&#xf080;]

  • fa-bar-chart-o [&#xf080;]

  • fa-barcode [&#xf02a;]

  • fa-bars [&#xf0c9;]

  • fa-battery [&#xf240;]

  • fa-battery-0 [&#xf244;]

  • fa-battery-1 [&#xf243;]

  • fa-battery-2 [&#xf242;]

  • fa-battery-3 [&#xf241;]

  • fa-battery-4 [&#xf240;]

  • fa-battery-empty [&#xf244;]

  • fa-battery-full [&#xf240;]

  • fa-battery-half [&#xf242;]

  • fa-battery-quarter [&#xf243;]

  • fa-battery-three-quarters [&#xf241;]

  • fa-bed [&#xf236;]

  • fa-beer [&#xf0fc;]

  • fa-behance [&#xf1b4;]

  • fa-behance-square [&#xf1b5;]

  • fa-bell [&#xf0f3;]

  • fa-bell-o [&#xf0a2;]

  • fa-bell-slash [&#xf1f6;]

  • fa-bell-slash-o [&#xf1f7;]

  • fa-bicycle [&#xf206;]

  • fa-binoculars [&#xf1e5;]

  • fa-birthday-cake [&#xf1fd;]

  • fa-bitbucket [&#xf171;]

  • fa-bitbucket-square [&#xf172;]

  • fa-bitcoin [&#xf15a;]

  • fa-black-tie [&#xf27e;]

  • fa-bold [&#xf032;]

  • fa-bolt [&#xf0e7;]

  • fa-bomb [&#xf1e2;]

  • fa-book [&#xf02d;]

  • fa-bookmark [&#xf02e;]

  • fa-bookmark-o [&#xf097;]

  • fa-briefcase [&#xf0b1;]

  • fa-btc [&#xf15a;]

  • fa-bug [&#xf188;]

  • fa-building [&#xf1ad;]

  • fa-building-o [&#xf0f7;]

  • fa-bullhorn [&#xf0a1;]

  • fa-bullseye [&#xf140;]

  • fa-bus [&#xf207;]

  • fa-buysellads [&#xf20d;]

  • fa-cab [&#xf1ba;]

  • fa-calculator [&#xf1ec;]

  • fa-calendar [&#xf073;]

  • fa-calendar-check-o [&#xf274;]

  • fa-calendar-minus-o [&#xf272;]

  • fa-calendar-o [&#xf133;]

  • fa-calendar-plus-o [&#xf271;]

  • fa-calendar-times-o [&#xf273;]

  • fa-camera [&#xf030;]

  • fa-camera-retro [&#xf083;]

  • fa-car [&#xf1b9;]

  • fa-caret-down [&#xf0d7;]

  • fa-caret-left [&#xf0d9;]

  • fa-caret-right [&#xf0da;]

  • fa-caret-square-o-down [&#xf150;]

  • fa-caret-square-o-left [&#xf191;]

  • fa-caret-square-o-right [&#xf152;]

  • fa-caret-square-o-up [&#xf151;]

  • fa-caret-up [&#xf0d8;]

  • fa-cart-arrow-down [&#xf218;]

  • fa-cart-plus [&#xf217;]

  • fa-cc [&#xf20a;]

  • fa-cc-amex [&#xf1f3;]

  • fa-cc-diners-club [&#xf24c;]

  • fa-cc-discover [&#xf1f2;]

  • fa-cc-jcb [&#xf24b;]

  • fa-cc-mastercard [&#xf1f1;]

  • fa-cc-paypal [&#xf1f4;]

  • fa-cc-stripe [&#xf1f5;]

  • fa-cc-visa [&#xf1f0;]

  • fa-certificate [&#xf0a3;]

  • fa-chain [&#xf0c1;]

  • fa-chain-broken [&#xf127;]

  • fa-check [&#xf00c;]

  • fa-check-circle [&#xf058;]

  • fa-check-circle-o [&#xf05d;]

  • fa-check-square [&#xf14a;]

  • fa-check-square-o [&#xf046;]

  • fa-chevron-circle-down [&#xf13a;]

  • fa-chevron-circle-left [&#xf137;]

  • fa-chevron-circle-right [&#xf138;]

  • fa-chevron-circle-up [&#xf139;]

  • fa-chevron-down [&#xf078;]

  • fa-chevron-left [&#xf053;]

  • fa-chevron-right [&#xf054;]

  • fa-chevron-up [&#xf077;]

  • fa-child [&#xf1ae;]

  • fa-chrome [&#xf268;]

  • fa-circle [&#xf111;]

  • fa-circle-o [&#xf10c;]

  • fa-circle-o-notch [&#xf1ce;]

  • fa-circle-thin [&#xf1db;]

  • fa-clipboard [&#xf0ea;]

  • fa-clock-o [&#xf017;]

  • fa-clone [&#xf24d;]

  • fa-close [&#xf00d;]

  • fa-cloud [&#xf0c2;]

  • fa-cloud-download [&#xf0ed;]

  • fa-cloud-upload [&#xf0ee;]

  • fa-cny [&#xf157;]

  • fa-code [&#xf121;]

  • fa-code-fork [&#xf126;]

  • fa-codepen [&#xf1cb;]

  • fa-coffee [&#xf0f4;]

  • fa-cog [&#xf013;]

  • fa-cogs [&#xf085;]

  • fa-columns [&#xf0db;]

  • fa-comment [&#xf075;]

  • fa-comment-o [&#xf0e5;]

  • fa-commenting [&#xf27a;]

  • fa-commenting-o [&#xf27b;]

  • fa-comments [&#xf086;]

  • fa-comments-o [&#xf0e6;]

  • fa-compass [&#xf14e;]

  • fa-compress [&#xf066;]

  • fa-connectdevelop [&#xf20e;]

  • fa-contao [&#xf26d;]

  • fa-copy [&#xf0c5;]

  • fa-copyright [&#xf1f9;]

  • fa-creative-commons [&#xf25e;]

  • fa-credit-card [&#xf09d;]

  • fa-credit-card-alt [&#xf283;]

  • fa-crop [&#xf125;]

  • fa-crosshairs [&#xf05b;]

  • fa-css3 [&#xf13c;]

  • fa-cube [&#xf1b2;]

  • fa-cubes [&#xf1b3;]

  • fa-cut [&#xf0c4;]

  • fa-cutlery [&#xf0f5;]

  • fa-dashboard [&#xf0e4;]

  • fa-dashcube [&#xf210;]

  • fa-database [&#xf1c0;]

  • fa-dedent [&#xf03b;]

  • fa-delicious [&#xf1a5;]

  • fa-desktop [&#xf108;]

  • fa-deviantart [&#xf1bd;]

  • fa-diamond [&#xf219;]

  • fa-digg [&#xf1a6;]

  • fa-dollar [&#xf155;]

  • fa-dot-circle-o [&#xf192;]

  • fa-download [&#xf019;]

  • fa-dribbble [&#xf17d;]

  • fa-dropbox [&#xf16b;]

  • fa-drupal [&#xf1a9;]

  • fa-edit [&#xf044;]

  • fa-eject [&#xf052;]

  • fa-ellipsis-h [&#xf141;]

  • fa-ellipsis-v [&#xf142;]

  • fa-empire [&#xf1d1;]

  • fa-envelope [&#xf0e0;]

  • fa-envelope-o [&#xf003;]

  • fa-envelope-square [&#xf199;]

  • fa-eraser [&#xf12d;]

  • fa-eur [&#xf153;]

  • fa-euro [&#xf153;]

  • fa-exchange [&#xf0ec;]

  • fa-exclamation [&#xf12a;]

  • fa-exclamation-circle [&#xf06a;]

  • fa-exclamation-triangle [&#xf071;]

  • fa-expand [&#xf065;]

  • fa-expeditedssl [&#xf23e;]

  • fa-external-link [&#xf08e;]

  • fa-external-link-square [&#xf14c;]

  • fa-eye [&#xf06e;]

  • fa-eye-slash [&#xf070;]

  • fa-eyedropper [&#xf1fb;]

  • fa-facebook [&#xf09a;]

  • fa-facebook-f [&#xf09a;]

  • fa-facebook-official [&#xf230;]

  • fa-facebook-square [&#xf082;]

  • fa-fast-backward [&#xf049;]

  • fa-fast-forward [&#xf050;]

  • fa-fax [&#xf1ac;]

  • fa-feed [&#xf09e;]

  • fa-female [&#xf182;]

  • fa-fighter-jet [&#xf0fb;]

  • fa-file [&#xf15b;]

  • fa-file-archive-o [&#xf1c6;]

  • fa-file-audio-o [&#xf1c7;]

  • fa-file-code-o [&#xf1c9;]

  • fa-file-excel-o [&#xf1c3;]

  • fa-file-image-o [&#xf1c5;]

  • fa-file-movie-o [&#xf1c8;]

  • fa-file-o [&#xf016;]

  • fa-file-pdf-o [&#xf1c1;]

  • fa-file-photo-o [&#xf1c5;]

  • fa-file-picture-o [&#xf1c5;]

  • fa-file-powerpoint-o [&#xf1c4;]

  • fa-file-sound-o [&#xf1c7;]

  • fa-file-text [&#xf15c;]

  • fa-file-text-o [&#xf0f6;]

  • fa-file-video-o [&#xf1c8;]

  • fa-file-word-o [&#xf1c2;]

  • fa-file-zip-o [&#xf1c6;]

  • fa-files-o [&#xf0c5;]

  • fa-film [&#xf008;]

  • fa-filter [&#xf0b0;]

  • fa-fire [&#xf06d;]

  • fa-fire-extinguisher [&#xf134;]

  • fa-firefox [&#xf269;]

  • fa-flag [&#xf024;]

  • fa-flag-checkered [&#xf11e;]

  • fa-flag-o [&#xf11d;]

  • fa-flash [&#xf0e7;]

  • fa-flask [&#xf0c3;]

  • fa-flickr [&#xf16e;]

  • fa-floppy-o [&#xf0c7;]

  • fa-folder [&#xf07b;]

  • fa-folder-o [&#xf114;]

  • fa-folder-open [&#xf07c;]

  • fa-folder-open-o [&#xf115;]

  • fa-font [&#xf031;]

  • fa-fonticons [&#xf280;]

  • fa-forumbee [&#xf211;]

  • fa-forward [&#xf04e;]

  • fa-foursquare [&#xf180;]

  • fa-frown-o [&#xf119;]

  • fa-futbol-o [&#xf1e3;]

  • fa-gamepad [&#xf11b;]

  • fa-gavel [&#xf0e3;]

  • fa-gbp [&#xf154;]

  • fa-ge [&#xf1d1;]

  • fa-gear [&#xf013;]

  • fa-gears [&#xf085;]

  • fa-genderless [&#xf22d;]

  • fa-get-pocket [&#xf265;]

  • fa-gg [&#xf260;]

  • fa-gg-circle [&#xf261;]

  • fa-gift [&#xf06b;]

  • fa-git [&#xf1d3;]

  • fa-git-square [&#xf1d2;]

  • fa-github [&#xf09b;]

  • fa-github-alt [&#xf113;]

  • fa-github-square [&#xf092;]

  • fa-gittip [&#xf184;]

  • fa-glass [&#xf000;]

  • fa-globe [&#xf0ac;]

  • fa-google [&#xf1a0;]

  • fa-google-plus [&#xf0d5;]

  • fa-google-plus-square [&#xf0d4;]

  • fa-google-wallet [&#xf1ee;]

  • fa-graduation-cap [&#xf19d;]

  • fa-gratipay [&#xf184;]

  • fa-group [&#xf0c0;]

  • fa-h-square [&#xf0fd;]

  • fa-hacker-news [&#xf1d4;]

  • fa-hand-grab-o [&#xf255;]

  • fa-hand-lizard-o [&#xf258;]

  • fa-hand-o-down [&#xf0a7;]

  • fa-hand-o-left [&#xf0a5;]

  • fa-hand-o-right [&#xf0a4;]

  • fa-hand-o-up [&#xf0a6;]

  • fa-hand-paper-o [&#xf256;]

  • fa-hand-peace-o [&#xf25b;]

  • fa-hand-pointer-o [&#xf25a;]

  • fa-hand-rock-o [&#xf255;]

  • fa-hand-scissors-o [&#xf257;]

  • fa-hand-spock-o [&#xf259;]

  • fa-hand-stop-o [&#xf256;]

  • fa-hdd-o [&#xf0a0;]

  • fa-header [&#xf1dc;]

  • fa-headphones [&#xf025;]

  • fa-heart [&#xf004;]

  • fa-heart-o [&#xf08a;]

  • fa-heartbeat [&#xf21e;]

  • fa-history [&#xf1da;]

  • fa-home [&#xf015;]

  • fa-hospital-o [&#xf0f8;]

  • fa-hotel [&#xf236;]

  • fa-hourglass [&#xf254;]

  • fa-hourglass-1 [&#xf251;]

  • fa-hourglass-2 [&#xf252;]

  • fa-hourglass-3 [&#xf253;]

  • fa-hourglass-end [&#xf253;]

  • fa-hourglass-half [&#xf252;]

  • fa-hourglass-o [&#xf250;]

  • fa-hourglass-start [&#xf251;]

  • fa-houzz [&#xf27c;]

  • fa-html5 [&#xf13b;]

  • fa-i-cursor [&#xf246;]

  • fa-ils [&#xf20b;]

  • fa-image [&#xf03e;]

  • fa-inbox [&#xf01c;]

  • fa-indent [&#xf03c;]

  • fa-industry [&#xf275;]

  • fa-info [&#xf129;]

  • fa-info-circle [&#xf05a;]

  • fa-inr [&#xf156;]

  • fa-instagram [&#xf16d;]

  • fa-institution [&#xf19c;]

  • fa-internet-explorer [&#xf26b;]

  • fa-intersex [&#xf224;]

  • fa-ioxhost [&#xf208;]

  • fa-italic [&#xf033;]

  • fa-joomla [&#xf1aa;]

  • fa-jpy [&#xf157;]

  • fa-jsfiddle [&#xf1cc;]

  • fa-key [&#xf084;]

  • fa-keyboard-o [&#xf11c;]

  • fa-krw [&#xf159;]

  • fa-language [&#xf1ab;]

  • fa-laptop [&#xf109;]

  • fa-lastfm [&#xf202;]

  • fa-lastfm-square [&#xf203;]

  • fa-leaf [&#xf06c;]

  • fa-leanpub [&#xf212;]

  • fa-legal [&#xf0e3;]

  • fa-lemon-o [&#xf094;]

  • fa-level-down [&#xf149;]

  • fa-level-up [&#xf148;]

  • fa-life-bouy [&#xf1cd;]

  • fa-life-buoy [&#xf1cd;]

  • fa-life-ring [&#xf1cd;]

  • fa-life-saver [&#xf1cd;]

  • fa-lightbulb-o [&#xf0eb;]

  • fa-line-chart [&#xf201;]

  • fa-link [&#xf0c1;]

  • fa-linkedin [&#xf0e1;]

  • fa-linkedin-square [&#xf08c;]

  • fa-linux [&#xf17c;]

  • fa-list [&#xf03a;]

  • fa-list-alt [&#xf022;]

  • fa-list-ol [&#xf0cb;]

  • fa-list-ul [&#xf0ca;]

  • fa-location-arrow [&#xf124;]

  • fa-lock [&#xf023;]

  • fa-long-arrow-down [&#xf175;]

  • fa-long-arrow-left [&#xf177;]

  • fa-long-arrow-right [&#xf178;]

  • fa-long-arrow-up [&#xf176;]

  • fa-magic [&#xf0d0;]

  • fa-magnet [&#xf076;]

  • fa-mail-forward [&#xf064;]

  • fa-mail-reply [&#xf112;]

  • fa-mail-reply-all [&#xf122;]

  • fa-male [&#xf183;]

  • fa-map [&#xf279;]

  • fa-map-marker [&#xf041;]

  • fa-map-o [&#xf278;]

  • fa-map-pin [&#xf276;]

  • fa-map-signs [&#xf277;]

  • fa-mars [&#xf222;]

  • fa-mars-double [&#xf227;]

  • fa-mars-stroke [&#xf229;]

  • fa-mars-stroke-h [&#xf22b;]

  • fa-mars-stroke-v [&#xf22a;]

  • fa-maxcdn [&#xf136;]

  • fa-meanpath [&#xf20c;]

  • fa-medium [&#xf23a;]

  • fa-medkit [&#xf0fa;]

  • fa-meh-o [&#xf11a;]

  • fa-mercury [&#xf223;]

  • fa-microphone [&#xf130;]

  • fa-microphone-slash [&#xf131;]

  • fa-minus [&#xf068;]

  • fa-minus-circle [&#xf056;]

  • fa-minus-square [&#xf146;]

  • fa-minus-square-o [&#xf147;]

  • fa-mobile [&#xf10b;]

  • fa-mobile-phone [&#xf10b;]

  • fa-money [&#xf0d6;]

  • fa-moon-o [&#xf186;]

  • fa-mortar-board [&#xf19d;]

  • fa-motorcycle [&#xf21c;]

  • fa-mouse-pointer [&#xf245;]

  • fa-music [&#xf001;]

  • fa-navicon [&#xf0c9;]

  • fa-neuter [&#xf22c;]

  • fa-newspaper-o [&#xf1ea;]

  • fa-object-group [&#xf247;]

  • fa-object-ungroup [&#xf248;]

  • fa-odnoklassniki [&#xf263;]

  • fa-odnoklassniki-square [&#xf264;]

  • fa-opencart [&#xf23d;]

  • fa-openid [&#xf19b;]

  • fa-opera [&#xf26a;]

  • fa-optin-monster [&#xf23c;]

  • fa-outdent [&#xf03b;]

  • fa-pagelines [&#xf18c;]

  • fa-paint-brush [&#xf1fc;]

  • fa-paper-plane [&#xf1d8;]

  • fa-paper-plane-o [&#xf1d9;]

  • fa-paperclip [&#xf0c6;]

  • fa-paragraph [&#xf1dd;]

  • fa-paste [&#xf0ea;]

  • fa-pause [&#xf04c;]

  • fa-paw [&#xf1b0;]

  • fa-paypal [&#xf1ed;]

  • fa-pencil [&#xf040;]

  • fa-pencil-square [&#xf14b;]

  • fa-pencil-square-o [&#xf044;]

  • fa-phone [&#xf095;]

  • fa-phone-square [&#xf098;]

  • fa-photo [&#xf03e;]

  • fa-picture-o [&#xf03e;]

  • fa-pie-chart [&#xf200;]

  • fa-pied-piper-alt [&#xf1a8;]

  • fa-pied-piper-pp [&#xf1a7;]

  • fa-pinterest [&#xf0d2;]

  • fa-pinterest-p [&#xf231;]

  • fa-pinterest-square [&#xf0d3;]

  • fa-plane [&#xf072;]

  • fa-play [&#xf04b;]

  • fa-play-circle [&#xf144;]

  • fa-play-circle-o [&#xf01d;]

  • fa-plug [&#xf1e6;]

  • fa-plus [&#xf067;]

  • fa-plus-circle [&#xf055;]

  • fa-plus-square [&#xf0fe;]

  • fa-plus-square-o [&#xf196;]

  • fa-power-off [&#xf011;]

  • fa-print [&#xf02f;]

  • fa-puzzle-piece [&#xf12e;]

  • fa-qq [&#xf1d6;]

  • fa-qrcode [&#xf029;]

  • fa-question [&#xf128;]

  • fa-question-circle [&#xf059;]

  • fa-quote-left [&#xf10d;]

  • fa-quote-right [&#xf10e;]

  • fa-ra [&#xf1d0;]

  • fa-random [&#xf074;]

  • fa-rebel [&#xf1d0;]

  • fa-recycle [&#xf1b8;]

  • fa-reddit [&#xf1a1;]

  • fa-reddit-square [&#xf1a2;]

  • fa-refresh [&#xf021;]

  • fa-registered [&#xf25d;]

  • fa-remove [&#xf00d;]

  • fa-renren [&#xf18b;]

  • fa-reorder [&#xf0c9;]

  • fa-repeat [&#xf01e;]

  • fa-reply [&#xf112;]

  • fa-reply-all [&#xf122;]

  • fa-resistance [&#xf1d0;]

  • fa-retweet [&#xf079;]

  • fa-rmb [&#xf157;]

  • fa-road [&#xf018;]

  • fa-rocket [&#xf135;]

  • fa-rotate-left [&#xf0e2;]

  • fa-rotate-right [&#xf01e;]

  • fa-rouble [&#xf158;]

  • fa-rss [&#xf09e;]

  • fa-rss-square [&#xf143;]

  • fa-rub [&#xf158;]

  • fa-ruble [&#xf158;]

  • fa-rupee [&#xf156;]

  • fa-safari [&#xf267;]

  • fa-save [&#xf0c7;]

  • fa-scissors [&#xf0c4;]

  • fa-search [&#xf002;]

  • fa-search-minus [&#xf010;]

  • fa-search-plus [&#xf00e;]

  • fa-sellsy [&#xf213;]

  • fa-send [&#xf1d8;]

  • fa-send-o [&#xf1d9;]

  • fa-server [&#xf233;]

  • fa-share [&#xf064;]

  • fa-share-alt [&#xf1e0;]

  • fa-share-alt-square [&#xf1e1;]

  • fa-share-square [&#xf14d;]

  • fa-share-square-o [&#xf045;]

  • fa-shekel [&#xf20b;]

  • fa-sheqel [&#xf20b;]

  • fa-shield [&#xf132;]

  • fa-ship [&#xf21a;]

  • fa-shirtsinbulk [&#xf214;]

  • fa-shopping-cart [&#xf07a;]

  • fa-sign-in [&#xf090;]

  • fa-sign-out [&#xf08b;]

  • fa-signal [&#xf012;]

  • fa-simplybuilt [&#xf215;]

  • fa-sitemap [&#xf0e8;]

  • fa-skyatlas [&#xf216;]

  • fa-skype [&#xf17e;]

  • fa-slack [&#xf198;]

  • fa-sliders [&#xf1de;]

  • fa-slideshare [&#xf1e7;]

  • fa-smile-o [&#xf118;]

  • fa-soccer-ball-o [&#xf1e3;]

  • fa-sort [&#xf0dc;]

  • fa-sort-alpha-asc [&#xf15d;]

  • fa-sort-alpha-desc [&#xf15e;]

  • fa-sort-amount-asc [&#xf160;]

  • fa-sort-amount-desc [&#xf161;]

  • fa-sort-asc [&#xf0de;]

  • fa-sort-desc [&#xf0dd;]

  • fa-sort-down [&#xf0dd;]

  • fa-sort-numeric-asc [&#xf162;]

  • fa-sort-numeric-desc [&#xf163;]

  • fa-sort-up [&#xf0de;]

  • fa-soundcloud [&#xf1be;]

  • fa-space-shuttle [&#xf197;]

  • fa-spinner [&#xf110;]

  • fa-spoon [&#xf1b1;]

  • fa-spotify [&#xf1bc;]

  • fa-square [&#xf0c8;]

  • fa-square-o [&#xf096;]

  • fa-stack-exchange [&#xf18d;]

  • fa-stack-overflow [&#xf16c;]

  • fa-star [&#xf005;]

  • fa-star-half [&#xf089;]

  • fa-star-half-empty [&#xf123;]

  • fa-star-half-full [&#xf123;]

  • fa-star-half-o [&#xf123;]

  • fa-star-o [&#xf006;]

  • fa-steam [&#xf1b6;]

  • fa-steam-square [&#xf1b7;]

  • fa-step-backward [&#xf048;]

  • fa-step-forward [&#xf051;]

  • fa-stethoscope [&#xf0f1;]

  • fa-sticky-note [&#xf249;]

  • fa-sticky-note-o [&#xf24a;]

  • fa-stop [&#xf04d;]

  • fa-stop-circle [&#xf28d;]

  • fa-stop-circle-o [&#xf28e;]

  • fa-street-view [&#xf21d;]

  • fa-strikethrough [&#xf0cc;]

  • fa-stumbleupon [&#xf1a4;]

  • fa-stumbleupon-circle [&#xf1a3;]

  • fa-subscript [&#xf12c;]

  • fa-subway [&#xf239;]

  • fa-suitcase [&#xf0f2;]

  • fa-sun-o [&#xf185;]

  • fa-superscript [&#xf12b;]

  • fa-support [&#xf1cd;]

  • fa-table [&#xf0ce;]

  • fa-tablet [&#xf10a;]

  • fa-tachometer [&#xf0e4;]

  • fa-tag [&#xf02b;]

  • fa-tags [&#xf02c;]

  • fa-tasks [&#xf0ae;]

  • fa-taxi [&#xf1ba;]

  • fa-television [&#xf26c;]

  • fa-tencent-weibo [&#xf1d5;]

  • fa-terminal [&#xf120;]

  • fa-text-height [&#xf034;]

  • fa-text-width [&#xf035;]

  • fa-th [&#xf00a;]

  • fa-th-large [&#xf009;]

  • fa-th-list [&#xf00b;]

  • fa-thumb-tack [&#xf08d;]

  • fa-thumbs-down [&#xf165;]

  • fa-thumbs-o-down [&#xf088;]

  • fa-thumbs-o-up [&#xf087;]

  • fa-thumbs-up [&#xf164;]

  • fa-ticket [&#xf145;]

  • fa-times [&#xf00d;]

  • fa-times-circle [&#xf057;]

  • fa-times-circle-o [&#xf05c;]

  • fa-tint [&#xf043;]

  • fa-toggle-down [&#xf150;]

  • fa-toggle-left [&#xf191;]

  • fa-toggle-off [&#xf204;]

  • fa-toggle-on [&#xf205;]

  • fa-toggle-right [&#xf152;]

  • fa-toggle-up [&#xf151;]

  • fa-trademark [&#xf25c;]

  • fa-train [&#xf238;]

  • fa-transgender [&#xf224;]

  • fa-transgender-alt [&#xf225;]

  • fa-trash [&#xf1f8;]

  • fa-trash-o [&#xf014;]

  • fa-tree [&#xf1bb;]

  • fa-trello [&#xf181;]

  • fa-tripadvisor [&#xf262;]

  • fa-trophy [&#xf091;]

  • fa-truck [&#xf0d1;]

  • fa-try [&#xf195;]

  • fa-tty [&#xf1e4;]

  • fa-tumblr [&#xf173;]

  • fa-tumblr-square [&#xf174;]

  • fa-turkish-lira [&#xf195;]

  • fa-tv [&#xf26c;]

  • fa-twitch [&#xf1e8;]

  • fa-twitter [&#xf099;]

  • fa-twitter-square [&#xf081;]

  • fa-umbrella [&#xf0e9;]

  • fa-underline [&#xf0cd;]

  • fa-undo [&#xf0e2;]

  • fa-university [&#xf19c;]

  • fa-unlink [&#xf127;]

  • fa-unlock [&#xf09c;]

  • fa-unlock-alt [&#xf13e;]

  • fa-unsorted [&#xf0dc;]

  • fa-upload [&#xf093;]

  • fa-usd [&#xf155;]

  • fa-user [&#xf007;]

  • fa-user-md [&#xf0f0;]

  • fa-user-plus [&#xf234;]

  • fa-user-secret [&#xf21b;]

  • fa-user-times [&#xf235;]

  • fa-users [&#xf0c0;]

  • fa-venus [&#xf221;]

  • fa-venus-double [&#xf226;]

  • fa-venus-mars [&#xf228;]

  • fa-viacoin [&#xf237;]

  • fa-video-camera [&#xf03d;]

  • fa-vimeo [&#xf27d;]

  • fa-vimeo-square [&#xf194;]

  • fa-vine [&#xf1ca;]

  • fa-vk [&#xf189;]

  • fa-volume-down [&#xf027;]

  • fa-volume-off [&#xf026;]

  • fa-volume-up [&#xf028;]

  • fa-warning [&#xf071;]

  • fa-wechat [&#xf1d7;]

  • fa-weibo [&#xf18a;]

  • fa-weixin [&#xf1d7;]

  • fa-whatsapp [&#xf232;]

  • fa-wheelchair [&#xf193;]

  • fa-wifi [&#xf1eb;]

  • fa-wikipedia-w [&#xf266;]

  • fa-windows [&#xf17a;]

  • fa-won [&#xf159;]

  • fa-wordpress [&#xf19a;]

  • fa-wrench [&#xf0ad;]

  • fa-xing [&#xf168;]

  • fa-xing-square [&#xf169;]

  • fa-y-combinator [&#xf23b;]

  • fa-y-combinator-square [&#xf1d4;]

  • fa-yahoo [&#xf19e;]

  • fa-yc [&#xf23b;]

  • fa-yc-square [&#xf1d4;]

  • fa-yelp [&#xf1e9;]

  • fa-yen [&#xf157;]

  • fa-youtube [&#xf167;]

  • fa-youtube-play [&#xf16a;]

  • fa-youtube-square [&#xf166;]

The UI Library supports all Google Material Icons located HERE

Typically spacing should be part of a pattern's styles. In some cases, we still need to be able to apply spacing manually. These classes can be added to elements to add space above or below them, in these special cases.

Demo item above
Space Above (standard)
Demo item above
Space Above (large)
Space Below (standard)
Demo item below
Space Below (large)
Demo item below
Error Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Default Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Info Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Success Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Warning Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Error Alert: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Panel title

Panel content

Panel with heading

Panel heading without title
Panel content

Panel title

Panel content
Panel content

Contextual alternatives

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
@glo.com
@glo.com
@glo.com

 

$
.00

Sizing

@

@

@

Sizes

Colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Consectetur adipiscing elit. add
Nulla eu finibus ex, a placerat lacus add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Phasellus vitae lorem sit amet add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fermentum et tempus sed, maximus add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis at dignissim add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Maecenas add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nullam turpis lorem, porttitor add

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Application Name System Login
person
lock