Features

Fonts

We use A bold, rounded typeface Nunito combines with a lighter, condensed style Proxima Nova to make a great font pairing.

No JavaScript guideline

This is purely HTML+CSS guideline, you can choose your preferred javascript frameworks. Some jQuery has been used for presentational purpose only.

Icons

This project includes Fontawesome 4.7.0 as default icons framework, also we have designed PageUp Icon library for PageUp specific use. You may not choose other icon frameworks.

Sematic markup

Based on Bootstrap 3.3.7 Also we have PageUp markup, e.g. icons gel-icon, avatar gel-avatar

Browser compatibility

We supports Chrome, Firefox, Safari and IE10+.

Accessibility

We follows Bootstrap Accessibility and common web standards and—with minimal extra effort—can be used to create sites that are accessible.

How to use

Since PageUp UI is built on top of Bootstrap 3 as a theme, you can use it in your Bootstrap project. We did not modify any line of Bootstrap, so you will be safe using PageUp UI in your ongoing project :)

CSS

  1. In the <head> of your html, reference the location to your pageup-gel.min.css.
    <link rel="stylesheet" href="https://ui.pageuppeople.com/gel/v2.0.1/css/pageup-gel.min.css">
          
  2. Check out the examples to start using!

colors

#142C52
#8A96A9
Primary
#257BA0
#92BDD0
Primary
#57C0E9
#DDF2FB
Primary
#58585B
#ACACAD
Primary
#339989
#D6EBE7
Secondary
#F78764
#FDE7E0
Secondary
#EE3D4B
#FCD8DB
Secondary

#E1A931
#F9EED6
Tertiary
#7E52A0
#E5DCEC
Tertiary
#939597
#C9CACB
Tertiary

grid

Our grid uses the Bootstrap grid system We also use a 30px gutter which is 15px on either side of a column.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
.col-md-12

iconography

Default

lg

x2

x3

x4

x5

Full list of icons

typography

Nunito

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

0 1 2 3 4 5 6 7 8 9

Heading 1 36px

Heading 2 30px

Heading 3 24px

Heading 4 18px

Heading 5 16px
Heading 6 14px
Description lists
A description list is perfect for defining terms.
Euismod
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Proxima Nova

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

0 1 2 3 4 5 6 7 8 9

This is an example of leading paragragh.

This is an example of muted text.

This is an example of primary text.

This is an example of success text.

This is an example of info text.

This is an example of warning text.

This is an example of danger text.

This is an example of small text.

Use the mark tag to highlight text.

Use the b tag to bold text, or use strong tag to emphasize text.

This line of text is meant to be treated as deleted text.

avatars

lg
md
Default
sm
xs
Copy Source
<!-- default -->
<img class="gel-avatar" src="images/avatar.svg">
<!-- large -->
<img class="gel-avatar gel-avatar-lg" src="images/avatar.svg">
<!-- medium  -->
<img class="gel-avatar gel-avatar-md" src="images/avatar.svg">
<!-- small -->
<img class="gel-avatar gel-avatar-sm" src="images/avatar.svg">

badges

1 3 5 7
Copy Source
<span class="badge">1</span>
<span class="badge badge-green">3</span>
<span class="badge badge-blue">5</span>
<span class="badge badge-red">7</span>

button group

Copy Source
<!-- dropdown button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Default
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="#">Action</a>
    </li>
    <li>
      <a href="#">Another action</a>
    </li>
    <li>
      <a href="#">Something else here</a>
    </li>
    <li>
      <a href="#">Separated link</a>
    </li>
  </ul>
</div>
<!-- split with more -->
<div class="btn-group">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="#">Action</a>
    </li>
    <li>
      <a href="#">Another action</a>
    </li>
    <li>
      <a href="#">Something else here</a>
    </li>
    <li>
      <a href="#">Separated link</a>
    </li>
  </ul>
</div>

<!-- Button Groups -->
<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-info">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

buttons

Variants

Disabled

Outline

Sizes

Round

Ghost

Loading state

Copy Source
<!-- Buttons -->
<button type="button" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-success">Approve</button>
<button type="button" class="btn btn-info">View</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Withdraw</button>
<button type="button" class="btn btn-link">Link</button>

<!-- disable -->
<button type="button" class="btn btn-primary disabled" disabled="disabled">Save</button>

<!-- outline -->
<button type="button" class="btn btn-outline btn-primary">
  <i class="fa fa-files-o"></i>Copy</button>

<!-- sizes -->
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">Extra Small</button>

<!-- block -->
<button type="button" class="btn btn-block btn-primary">Block button</button>

<!-- round -->
<button type="button" class="btn btn-round btn-primary">Round button</button>

<!-- loading state -->
<button type="button" class="btn btn-primary loading">Saving</button>

circles

lg
78%
md
66%
Default
25%
sm
15%
Copy Source
<div class="gel-circle p25 center gel-circle-blue">
	<span>25%</span>
	<div class="slice">
		<div class="bar"></div>
		<div class="fill"></div>
	</div>
</div>

diamonds

Copy Source
<span class="gel-diamond gel-diamond-blue gel-diamond-lg"></span>

<span class="gel-diamond gel-diamond-green gel-diamond-lg"></span>

<span class="gel-diamond gel-diamond-orange"></span>

<span class="gel-diamond gel-diamond-purple"></span>

<span class="gel-diamond gel-diamond-red gel-diamond-sm"></span>

<span class="gel-diamond gel-diamond-yellow gel-diamond-sm"></span>

indicators

Copy Source
<span class="gel-dot"></span>
<span class="gel-dot gel-dot-red"></span>
<span class="gel-dot gel-dot-green"></span>
<span class="gel-dot gel-dot-blue"></span>
<span class="gel-dot gel-dot-orange"></span>

labelsBeta

Example heading label

Example heading label

Example heading label
Example heading label

Success Info Warning Danger Purple Yellow

loadingsBeta

progress bars

Default
45% Complete
Small
75% Complete
Copy Source
<div class="progress progress-striped active">
  <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

<div class="progress progress-striped  progress-sm active">
  <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
    <span class="sr-only">75% Complete</span>
  </div>
</div>

segmented control

Copy Source
<div data-toggle="buttons" class="gel-segmented-control btn-group">
  <label class="btn">
    <input id="option1" name="options1" type="radio">
    Me
  </label>
  <label class="btn">
    <input id="option2" name="options1" type="radio">
    My team
  </label>
</div>

tags

Default
mobile agility growth communication
Small
quality teamwork zing
Copy Source
<!-- with close -->
<span class="gel-tag">grey
	<sup class="fa fa-times"></sup>
</span>
<span class="gel-tag gel-tag-green">green
	<sup class="fa fa-times"></sup>
</span>

<!-- without close -->
<span class="gel-tag gel-tag-red">communication
</span>

tooltips

Copy Source
<i class="gel-icon gel-icon-3x gel-icon-logo" data-toggle="tooltip" data-placement="left" title="PageUp logo"></i>

<i class="gel-icon gel-icon-3x gel-icon-recruitment" data-toggle="tooltip" data-placement="top" title="Recruitment module"></i>

<i class="gel-icon gel-icon-3x gel-icon-learning" data-toggle="tooltip" data-placement="bottom" title="Learning module"></i>

<i class="gel-icon gel-icon-3x gel-icon-performance" data-toggle="tooltip" data-placement="right" title="Performance module"></i>

checkboxes

Basic
Circled
Disabled
Without label text
With indeterminate state
Inline checkboxes
Copy Source
<!-- default  -->
<div class="checkbox checkbox-info">
  <input type="checkbox" checked="" id="checkbox2">
  <label for="checkbox2">
    Primary
  </label>
</div>

<!-- circled  -->
<div class="checkbox checkbox-info checkbox-circle">
  <input type="checkbox" id="checkbox7">
  <label for="checkbox7">
    Simply Rounded
  </label>
</div>

<!-- disabled -->
<div class="checkbox checkbox-info">
  <input type="checkbox" disabled="" id="checkbox9">
  <label for="checkbox9">
    Can't check this
  </label>
</div>

<!-- Without label text -->
<div class="checkbox checkbox-info">
  <input type="checkbox" aria-label="Single checkbox One" value="option1" id="singleCheckbox1">
  <label></label>
</div>

<!-- With indeterminate state -->
<div class="checkbox checkbox-info">
  <input type="checkbox" onclick="changeState(this)" id="indeterminateCheckbox">
  <label></label>
</div>
<!-- Inline checkboxes -->
<div class="checkbox checkbox-info checkbox-inline">
  <input type="checkbox" value="option1" id="inlineCheckbox1">
  <label for="inlineCheckbox1">
    One
  </label>
</div>
<div class="checkbox checkbox-info checkbox-inline">
  <input type="checkbox" checked="" value="option1" id="inlineCheckbox2">
  <label for="inlineCheckbox2">
    Two
  </label>
</div>

<script type="text/javascript">
  function changeState(el) {
    if (el.readOnly)
      el.checked = el.readOnly = false;
    else if (!el.checked)
      el.readOnly = el.indeterminate = true;
    }
</script>

form controls

Instant info notification
Can't be blank
.00
Please enter ...
Please enter ...
Copy Source
<form>
    <div class="form-group">
        <label class="control-label required">Label</label>
        <input class="form-control" placeholder="placeholder" type="text">
    </div>
    <div class="form-group">
        <label class="control-label">Disabled</label>
        <input class="form-control" placeholder="Disabled input here..." disabled="" type="text">
    </div>
    <div class="form-group has-info">
        <label class="control-label">Input with info message</label>
        <input class="form-control" type="text">
        <span class="help-block">Instant info notification</span>
    </div>
    <div class="form-group has-error">
        <label class="control-label">Input with error</label>
        <input class="form-control" type="text">
        <span class="help-block">Can't be blank</span>
    </div>
    <div class="form-group">
        <label class="control-label">Column sizing</label>

        <div class="row">
            <div class="col-md-2"><input class="form-control" placeholder="No." type="text"></div>
            <div class="col-md-4"><input class="form-control" placeholder="Street" type="text">
                <span class="help-block">Please enter ...</span>
            </div>
            <div class="col-md-6"><input class="form-control" placeholder="State" type="text">
                <span class="help-block">Please enter ...</span>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">Height sizing</label>
        <div class="row">
            <div class="col-md-4"><input class="form-control input-sm" placeholder=".input-sm" type="text"></div>
            <div class="col-md-4"><input class="form-control" placeholder="default" type="text"></div>
            <div class="col-md-4"><input class="form-control input-lg" placeholder=".input-lg" type="text"></div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">Button addons</label>
        <div class="input-group">
            <input class="form-control" type="text">
            <span class="input-group-btn">
                <button class="btn" type="button">Action</button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label">Select</label>
        <div class="select">
            <select class="form-control">
                <option>Option 1</option>
                <option>option 2</option>
                <option>option 3</option>
                <option>option 4</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">Text area
            <a class="help" tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="" data-content="And here's some amazing content. It's very engaging. Right?" data-original-title="Dismissible popover">
                <i class="fa fa-question-circle"></i>
            </a>
        </label>
        <textarea class="form-control"></textarea>
    </div>
</form>

radio buttons

Basic
Disabled
Inline radios
Copy Source
<!-- basic -->
<div class="radio radio-info">
    <input type="radio" value="option1" id="radio3" name="radio2">
    <label for="radio3">
        Next
    </label>
</div>

<!-- Radios without label text -->
<div class="radio">
    <input type="radio" aria-label="Single radio One" name="radioSingle1" value="option1" id="singleRadio1">
    <label></label>
</div>

<!-- Inline radios -->
<div class="radio radio-info radio-inline">
    <input type="radio" checked="" name="radioInline" value="option1" id="inlineRadio1">
    <label for="inlineRadio1">
        Inline One
    </label>
</div>

<!-- Disabled -->
<div class="radio">
    <input type="radio" disabled="" checked="" value="option2" id="radio6" name="radio3">
    <label for="radio6">
        One
    </label>
</div>

rich text editor

Copy Source
<script type="text/javascript" src="https://ui.pageuppeople.com/libs/scribble/scribble.js" charset="UTF-8" async></script>
<textarea style="visibility: hidden;" pageup-scribble>Hello from Scribble!</textarea>

toggles

Large
Medium
Default
Small
Copy Source
<div class="gel-toggle-btn">
    <label>
        <input type="checkbox">
        <span>Default</span>
    </label>
</div>
<div class="gel-toggle-btn gel-toggle-btn-green">
    <label>
        <input type="checkbox" checked>
        <span>checked</span>
    </label>
</div>

upload files

Drag & Drop files here

Or browse from local drive

Max 5MB in size, Word, PDF, or JPG formats

Button upload

validation

Interactive form validation

accordions

Integer semper dolor ac auctor rutrum. Duis porta ipsum vitae mi bibendum bibendum Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.

Accordion on white background

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.le VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Copy Source
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
      </div>
    </div>
  </div>
</div>

alerts

Info Message! Consequatur facere deleniti cumque link ducimus maiores nemo.
Success Message! Totam officiis dolorum voluptatibus maxime molestiae iste.
Warning Message! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error Message! Numquam quos fuga quam suscipit sapiente link perferendis magnam.
Hint! Numquam quos fuga quam suscipit sapiente link perferendis magnam.
Copy Source
<div class="alert alert-info">
    <strong>Info Message!</strong> Consequatur facere deleniti cumque
    <a class="alert-link" href="">link</a> ducimus maiores nemo.
    <button href="#" type="button" class="close">
        <i class="fa fa-times-circle-o"></i>
    </button>
</div>

boxBeta

This is box title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.

breadcrumb

Copy Source
<ol class="breadcrumb">
    <li>
        <a href="#">Home level</a>
    </li>
    <li>
        <a href="#">level 2</a>
    </li>
    <li>
        <a href="#">level 3</a>
    </li>
    <li class="active">Current</li>
</ol>

cardsBeta

Person cards

Employee Lastname

Global Support Team Lead

leadership management analysis

first.last@compamy.com

+61 0400 000 000

1 Abcd Street, Melbourne

Technology

Manager: John Smith

Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quitdam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti

Mihi quidem Homerus huius modi quitdam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti

Job cards

Sales Manager

Approved to advertise

Job No.: 512829 Position No.: 5

Location: Melbourne
Business Unit: Sale Team
Recruiter: Bob Smith
Hiring Manager: Jenifer Smith
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
Other cards

Journal card

19 Oct 15, 03:53 PM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...

presentation client facing demo

Card one

Online learning

Consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet ...

Card two

Online learning

Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit ...

Learning card

Online learning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...
15

carousel

chat

Jim Smith 23 Jan 2:00 pm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...
Daniel Wang 23 Jan 2:05 pm
Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...
Alexander Pierce 23 Jan 2:00 pm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...
Sarah Bullock 23 Jan 2:05 pm
Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...
Daniel Wang 23 Jan 2:05 pm
Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ...

comment

Maria Gonzales 8:03 PM Today It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Luna Stark 8:03 PM Today Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ....
Luna Stark 8:03 PM Today It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
Alt Text

divider

Left column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ....

Right column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ....

Top section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ....

Bottom section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet ....

drag n drop

Draggable item Draggable item

Drag and drop item here

Copy Source
<!-- draggable -->
<span class="gel-draggable-item">
  <span class="drag"></span>
  Draggable item</span>
<span class="gel-draggable-item">
  <span class="drag"></span>
  <i class="close fa fa-times" aria-hidden="true"></i>
  Draggable item</span>

<!-- dropzone -->
<div class="gel-dropzone">
  <div class="vertical-center">
    <i class="fa fa-magic"></i>
    Drag and drop item here
  </div>
</div>

jumbotron

Welcome, Daniel!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Get started

list group

Copy Source
<div class="list-group">
  <a href="#" class="list-group-item">
    Item 1
  </a>
  <a href="#" class="list-group-item active">Item 2
    <span class="badge">3</span>
  </a>
  <a href="#" class="list-group-item">Item 3
    <span class="badge badge-red">2</span>
  </a>
  <a href="#" class="list-group-item">Item 4</a>
  <a href="#" class="list-group-item">Item 5</a>
  <a href="#" class="list-group-item">Item 6
    <span class="badge badge-green">3</span>
  </a>
</div>

modals

Copy Source
<!-- Button trigger modal -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#infoModal">
  Launch default modal
</button>

<!-- Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span class="fa fa-times" aria-hidden="true"></span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

navbars

Copy Source
<!-- primary navbar -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <div class="navbar-header">
        <a href="#"><img width="112" src="http://styleguide.pageuppeople.com/images/gel-logo.png"/></a>
      </div>
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Home</a>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">Page 1-1</a>
            </li>
            <li>
              <a href="#">Page 1-2</a>
            </li>
            <li>
              <a href="#">Page 1-3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Page 2</a>
        </li>
        <li>
          <a href="#">Page 3</a>
        </li>
        <li>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input class="form-control" placeholder="Search" type="text">
            </div>
          </form>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <button class="btn btn-info btn-sm margin-right">Action</button>
        </li>
        <li><img class="gel-avatar gel-avatar-sm" src="images/avatar.svg"/></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="fa fa-cog"></span>
          </a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li>
              <a href="#">
                Action 1</a>
            </li>
            <li>
              <a href="#">
                Action 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- Secondary navbar -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">
            <i class="gel-icon gel-icon-logo"></i>
            PageUp</a>
        </li>
        <li>
          <a href="#">
            <i class="gel-icon gel-icon-recruitment"></i>
            Recruitment</a>
        </li>
        <li>
          <a href="#">
            <i class="gel-icon gel-icon-performance"></i>
            Performance</a>
        </li>
        <li>
          <a href="#">
            <i class="gel-icon gel-icon-learning"></i>
            Learning</a>
        </li>
        <li>
          <a href="#">
            <i class="gel-icon gel-icon-analytics"></i>
            Analytics</a>
        </li>
        <li>
          <a href="#">
            <i class="gel-icon gel-icon-settings"></i>
            Settings</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <button class="btn btn-info btn-sm margin-right">Action</button>
        </li>
        <li><img class="gel-avatar gel-avatar-sm" src="images/avatar.svg"/></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="fa fa-cog"></span>
          </a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li>
              <a href="#">
                Action 1</a>
            </li>
            <li>
              <a href="#">
                Action 2</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

paginations

Default
Small
Copy Source
<ul class="pagination">
  <li>
    <a href="#">
      <i class="fa fa-chevron-left" aria-hidden="true"></i>
    </a>
  </li>
  <li class="active">
    <a href="#">1</a>
  </li>
  <li>
    <a href="#">2</a>
  </li>
  <li>
    <a href="#">3</a>
  </li>
  <li>
    <a href="#">4</a>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-chevron-right" aria-hidden="true"></i>
    </a>
  </li>
</ul>

panelsBeta

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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.

More ...

Panel title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.

popovers

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Note:

John Smith

Sales Manager

Melbourne, Australia

Copy Source
<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

scroll

  • Top, there is no shadow!
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • The end! No shadow there.

stepperBeta

Step 1
Lorem ipsum dolor sit amet.
Step 2
Lorem ipsum dolor sit amet.
Step 3
Lorem ipsum dolor sit amet.
Step 4
Lorem ipsum dolor sit amet.
Step 5
Lorem ipsum dolor sit amet.

tables

Name Completed Task Date Action
John Smith 20% Jul 14, 2013
Alpha Peters 40% Jul 16, 2013
Robert Hill 75% Jul 18, 2013
Melvyn Jackson 18% Jul 22, 2013

Table in a box

# First Name Tables
1 Selected Are formatted like this
2 Lucille Do you like them?
3 Success
4 Danger
5 Warning
6 Disabled
Copy Source
<table class="table gel-table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Tables</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>1</td>
      <td>Selected</td>
      <td>Are formatted like this</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Lucille</td>
      <td>Do you like them?</td>
    </tr>
    <tr class="success">
      <td>3</td>
      <td>Success</td>
      <td></td>
    </tr>
    <tr class="danger">
      <td>4</td>
      <td>Danger</td>
      <td></td>
    </tr>
    <tr class="warning">
      <td>5</td>
      <td>Warning</td>
      <td></td>
    </tr>
    <tr class="muted">
      <td>6</td>
      <td>Disabled</td>
      <td></td>
    </tr>
  </tbody>
</table>

tabs

Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti

De illis, cum volemus. Inquit, dasne adolescenti veniam?

Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Description lists
A description list is perfect for defining terms.
Euismod
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

De illis, cum volemus. Inquit, dasne adolescenti veniam?

Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tabs on white background

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti

Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti

Copy Source
<!-- PU tabs -->
<ul class="nav nav-tabs nav-justified gel-tab">
  <li class="active">
    <a href="#1b">One</a>
  </li>
  <li>
    <a href="#2b">Two</a>
  </li>
  <li>
    <a href="#3b">Three</a>
  </li>
</ul>
<div class="tab-content clearfix">
  <div class="tab-pane active" id="1b">
    <p>Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti
    </p>
  </div>
  <div class="tab-pane" id="2b">
    <p>De illis, cum volemus. Inquit, dasne adolescenti veniam?</p>
  </div>
  <div class="tab-pane" id="3b">
    <p>Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

<!-- tabs line -->
<ul class="nav nav-tabs nav-line">
  <li class="active">
    <a href="#1c">One</a>
  </li>
  <li>
    <a href="#2c">Two</a>
  </li>
  <li>
    <a href="#3c">Three</a>
  </li>
</ul>
<div class="tab-content clearfix">
  <div class="tab-pane active" id="1c">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="tab-pane" id="2c">
    <p>Inquit, dasne adolescenti veniam? Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti
    </p>
  </div>
  <div class="tab-pane" id="3c">
    <p>Mihi quidem Homerus huius modi quiddam Lorem ipsum dolor sit amet, consectetur adipiscing elit. De illis, cum volemus. Inquit, dasne adolescenti
    </p>
  </div>
</div>

timelineBeta

History

  • 18 Dec 2016, 9:01am

    Marcus Recruiter

    Applied via: Website, Source: Internet advertisement - Intranet, Score: 51.00

  • 21 Mar 2016, 1:02pm

    System

    System changed status to 'Offer paperwork' on completion of 'Contractor post-offer information

  • 21 Mar 2016, 1:02pm

    Marcus Recruiter

    Offer: Casual Employment Contract Size: 59kbd

  • 21 Mar 2016, 1:02pm

    Marcus Recruiter

    Paperwork received

wizardBeta

Step 1
Lorem ipsum dolor sit amet.
Step 2
Integer semper dolor ac auctor rutrum. Duis porta ipsum vitae mi bibendum bibendum
Step 3
Curabitur mollis magna at blandit vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae

basic layout

error