Global Partners Site Style Guide
This is a style guide showcasing common HTML elements.
Palette
Stratos
#000F39
Astronaut
#2A3177
Science Blue
#0163BB
Dark Blue
#0320DA
Link Water
#e8f0f9
Whisper
#eeeff7
Aqua Haze
#F0F4F7
Hawkes Blue
#cfd5fd
Feijoa
#A6E08A
Monza
#DB0020
Tarawera
#094364
Bahama Blue
#015E94
Boston Blue
#3596C8
Jungle Green
#20A096
Jewel
#137950
FontAwesome Icons
-
handshake
\f4c6
-
bullhorn
\f0a1
-
broadcast-tower
\f519
-
glasses
\f5f5
-
icon-diet-food
\ea06
-
gas-pump
\f52f
-
tint
\f043
-
icon-heartbeat
\f21e
-
chair-office
\f6c1
-
piggy-bank
\f4d3
-
tree-alt
\f400
-
award
\f559
-
tooth
\f5c9
-
wheelchair-2
\f193
-
chart network
\f78a
-
arrow-circle-up
\f0aa
-
arrow-circle-down
\f0ab
-
arrow-circle-left
\f0a8
-
arrow-circle-right
\f0a9
-
times-circle
\f057
-
clock
\f017
-
sort
\f0dc
-
file-certificate
\f5f3
-
linkedin-square
\f08c
-
facebook-square
\ea1c
-
vimeo
\f40a
-
instagram
\f16d
Font Awesome Icon Sizing
<i class="fas fa-camera fa-xs"> </i>
<i class="fas fa-camera fa-sm"> </i>
<i class="fas fa-camera fa-lg"> </i>
<i class="fas fa-camera fa-2x"> </i>
<i class="fas fa-camera fa-3x"> </i>
<i class="fas fa-camera fa-5x"> </i>
<i class="fas fa-camera fa-7x"> </i>
<i class="fas fa-camera fa-10x"> </i>
Typography
Barlow Semi Condensed Regular
Barlow Semi Condensed Medium
Barlow Light
Barlow SemiBold
Nunito Sans Regular
Nunito Sans Bold
Headers
| Example | REM | PX |
|---|---|---|
Header 1 |
3.125rem | 50px |
Header 2 |
2.375rem | 38px |
Header 3 |
1.75rem | 28px |
Header 4 |
1.25rem | 20px |
Header 5 |
1.063rem | 17px |
Header 6 |
0.9375rem | 15px |
Body Text
Lead Paragraph/Intro
Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat
fugiatadipisicing ex in dolore ullamco.
Standard Paragraph
Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud voluptate aliquip Ut eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat
fugiatadipisicing ex in dolore ullamco ad ullamco velit nisi irure ad tempor minim fugiat fugiat aute Excepteur in id culpa id velit proident commodo enim cillum Ut quis dolor cillum enim ullamco est in eu laboris Ut Excepteur nisi aliquip
occaecatdeserunt incididunt eiusmod aute Excepteur Excepteur non ut ut fugiat nostrud laboris dolore Excepteur id qui eiusmod esse mollit fugiat eiusmod dolore quis quis aliquip reprehenderit sint commodo dolore proident officia Duis eiusmod esse
cupidatatid consequat aliqua Excepteur dolore tempor consequat laboris dolore sit aliqua eu sed dolore laboris ad tempor et in incididunt dolore dolor irure anim adipisicing cillum dolor in laborum laboris veniam voluptate Ut irure ad dolor irure
in ex sintdolor deserunt ut adipisicing est pariatur Excepteur dolore ullamco pariatur in non Excepteur mollit consequat laborum ullamco reprehenderit ea id ut anim ex consectetur occaecat.
Lists
Unordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered List
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
List Unstyled with Media Object
List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.List-based media object
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
in faucibus.
Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Tables
Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Bordered Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap | |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Table Small
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
List groups
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
- Dapibus ac facilisis in
- This is a primary list group item
- This is a secondary list group item
- This is a success list group item
- This is a danger list group item
- This is a warning list group item
- This is a info list group item
- This is a light list group item
- This is a dark list group item
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.
List group item heading
3 days ago
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.