PLEASE DO NOT EDIT

Last Updated: Sep 1st, 2021

GiantEagle.com Style Guide

GiantEagle logo
SVG logo with different sizes
GiantEagle Logo
GiantEagle Logo
GiantEagle Logo
GiantEagle Logo
  • Large size logo class="logo-large"
  • Click on the Logo to Download
  • Medium size logo class="logo-medium"
  • Click on the Logo to Download
  • Small size logo class="logo-small"
  • Click on the Logo to Download
  • xSmall size logo class="logo-xsmall"
  • Click on the Logo to Download
Spacing and Gaps - with Margins
Following classes can be used with any tag
  • class="margin-10" is for 10px margin for All the sides
  • class="margin-15" is for 15px margin for All the sides
  • class="margin-20" is for 20px margin for All the sides
  • class="margin-top-bottom-10" is for 10px margins from Top and Bottom while Left and Right 0px
  • class="margin-top-bottom-15" is for 15px margins from Top and Bottom while Left and Right 0px
  • class="margin-top-bottom-20" is for 20px margins from Top and Bottom while Left and Right 0px
  • class="margin-top-bottom-10-auto" is for 10px margins from Top and Bottom while Left and Right auto
  • class="margin-top-bottom-15-auto" is for 15px margins from Top and Bottom while Left and Right auto
  • class="margin-top-bottom-20-auto" is for 20px margins from Top and Bottom while Left and Right auto
  • class="margin-left-right-10" is for 10px margins from Right and Left while Top and Bottom 0px
  • class="margin-left-right-15" is for 15px margins from Right and Left while Top and Bottom 0px
  • class="margin-left-right-20" is for 20px margins from Right and Left while Top and Bottom 0px
  • class="margin-left-right-10-auto" is for 10px margins from Right and Left while Top and Bottom auto
  • class="margin-left-right-15-auto" is for 15px margins from Right and Left while Top and Bottom auto
  • class="margin-left-right-20-auto" is for 20px margins from Right and Left while Top and Bottom auto
  • class="margin-left-10, 15, 20" is for 10px, 15px, 20px margin from Left
  • class="margin-right-10, 15, 20" is for 10px, 15px, 20px margin from Right
  • class="margin-top-10, 15, 20" is for 10px, 15px, 20px margin from Top
  • class="margin-bottom-10, 15, 20" is for 10px, 15px, 20px margin from Bottom
  • class="no-margin" is for 0px margin for All the sides
  • class="no-margin-left" is for 0px margin from Left
  • class="no-margin-right" is for 0px margin from Right
  • class="no-margin-top" is for 0px margin from Top
  • class="no-margin-bottom" is for 0px margin from Bottom
Spacing and Gaps - with Padding
Following classes can be used with any tag
  • class="padding-10" is for 10px padding for All the sides
  • class="padding-15" is for 15px padding for All the sides
  • class="padding-20" is for 20px padding for All the sides
  • class="padding-top-bottom-10" is for 10px padding for Top and Bottom while Left and Right 0px
  • class="padding-top-bottom-15" is for 15px padding for Top and Bottom while Left and Right 0px
  • class="padding-top-bottom-20" is for 20px padding for Top and Bottom while Left and Right 0px
  • class="padding-top-bottom-10-auto" is for 10px padding for Top and Bottom while Left and Right auto
  • class="padding-top-bottom-15-auto" is for 15px padding for Top and Bottom while Left and Right auto
  • class="padding-top-bottom-20-auto" is for 20px padding for Top and Bottom while Left and Right auto
  • class="padding-left-right-10" is for 10px padding from Right and Left while Top and Bottom 0px
  • class="padding-left-right-15" is for 15px padding from Right and Left while Top and Bottom 0px
  • class="padding-left-right-20" is for 20px padding from Right and Left while Top and Bottom 0px
  • class="padding-left-right-10-auto" is for 10px padding from Right and Left while Top and Bottom auto
  • class="padding-left-right-15-auto" is for 15px padding from Right and Left while Top and Bottom auto
  • class="padding-left-right-20-auto" is for 20px padding from Right and Left while Top and Bottom auto
  • class="padding-left-10, 15, 20" is for 10px, 15px, 20px padding from Left
  • class="padding-right-10, 15, 20" is for 10px, 15px, 20px padding from Right
  • class="padding-top-10, 15, 20" is for 10px, 15px, 20px padding from Top
  • class="padding-bottom-10, 15, 20" is for 10px, 15px, 20px padding from Bottom
  • class="no-padding" is for 0px padding for All the sides
  • class="no-padding-left" is for 0px padding from Left
  • class="no-padding-right" is for 0px padding from Right
  • class="no-padding-top" is for 0px padding from Top
  • class="no-padding-bottom" is for 0px padding from Bottom
GE Red Primary Color
Use with any tag
HEX #C8102E
RGB 200 16 46
CMYK 0% 72% 60% 22%
  • For background color class="bg-color-red"
  • For Text color class="text-color-red"
GE Gray Primary Color
Use with any tag
HEX #7C878E
RGB 124 135 142
CMYK 7% 3% 0% 44%
  • For background color class="bg-color-gray"
  • For Text color class="text-color-gray"
GE Atlantis Green Primary Color
Use with any tag
HEX #B5CB34
RGB 181 203 52
CMYK 9% 0% 59% 20%
  • For background color class="bg-color-atlantis-green"
  • For Text color class="text-color-atlantis-green"
GE Sushi Green Primary Color
Use with any tag
HEX #7AAE42
RGB 122 174 66
CMYK 30% 0% 62% 32%
  • For background color class="bg-color-sushi-green"
  • For Text color class="text-color-sushi-green"
GE Pharmacy Silver Sand
Use with any tag
HEX #FF8200
RGB 255 130 0
CMYK 0% 49% 100% 0%
  • For background color class="bg-color-orange-tertiary"
  • For Text color class="text-color-orange-tertiary"
GE Dark Gray [Supporting Neutral Colors]
Use with any tag
HEX #37424A
RGB 55 66 74
CMYK 26% 11% 0% 71%
  • For background color class="bg-color-dark-gray"
  • For Text color class="text-color-dark-gray"
GE Medium Gray [Supporting Neutral Colors]
Use with any tag
HEX #A5ACAF
RGB 165 172 175
CMYK 4% 1% 0% 31%
  • For background color class="bg-color-medium-gray"
  • For Text color class="text-color-medium-gray"
GE Light Gray [Supporting Neutral Colors]
Use with any tag
HEX #D1D4D3
RGB 209 212 211
CMYK 1% 0% 0% 17%
  • For background color class="bg-color-light-gray"
  • For Text color class="text-color-light-gray"
GE Blue Berry - B300
Use with any tag
HEX #0072CE
RGB 0 114 206
CMYK 81% 36% 0% 19%
  • For background color class="bg-color-blue-berry"
  • For Text color class="text-color-blue-berry"
GE Spinach - G300
Use with any tag
HEX #378523
RGB 55 133 35
CMYK 31% 0% 38% 48%
  • For background color class="bg-color-spinach"
  • For Text color class="text-color-spinach"
GE Link Color
Use with any tag
HEX #08BBF2
RGB 255 255 255
CMYK 0% 0% 0% 0%
  • For background color class="bg-link-color"
  • For Text color class="text-link-color"
GE Pharmacy Blue
Use with any tag
HEX #336195
RGB 51 97 149
CMYK 66% 35% 0% 42%
  • For background color class="bg-color-pharmacy-blue"
  • For Text color class="text-color-pharmacy-blue"
GE Pharmacy Silver Sand
Use with any tag
HEX #D0D3D4
RGB 208 211 212
CMYK 2% 0% 0% 17%
  • For background color class="bg-color-silver-sand"
  • For Text color class="text-color-silver-sand"
GE Pharmacy Oslo Gray
Use with any tag
HEX #7C878E
RGB 124 135 142
CMYK 13% 5% 0% 44%
  • For background color class="bg-color-oslo-gray"
  • For Text color class="text-color-oslo-gray"
GE White Color
Use with any tag
HEX #FFFFFF
RGB 255 255 255
CMYK 0% 0% 0% 0%
  • For background color class="bg-color-white"
  • For Text color class="text-color-white"
GE Cornmeal
Use with any tag
HEX #FFCD00
RGB 255 205 0
CMYK 0% 20% 100% 0%
  • For background color class="bg-color-cornmeal"
  • For Text color class="text-color-cornmeal"
GE Redish BG
Use with any tag
HEX #FDF2F2
RGB 253 243 243
CMYK 0% 4% 4% 1%
  • For background color class="bg-color-redish"
  • For Text color class="text-color-redishbg-color-redish"
GE Lightest Gray
Use with any tag
HEX #f3f3f3
RGB 243 243 243
CMYK 0% 0% 0% 5%
  • For background color class="bg-color-lightest-gray"
  • For Text color class="text-color-lightest-gray"
Typography / Fonts
Complete style guide is based on Roboto font

Font Name: Roboto

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

1 2 3 4 5 6 7 8 9 0 + - \ * =

~ ` ! @ # % ^ & ( ) { } _ | / ? < > . ,

basic Headings
Use tags h1 to h6 for get necessary heading

H1 - Bold 30px - Capitalized

H2 - Bold 28px - Capitalized

H3 - Bold 24px - Capitalized

H4 - Bold 20px - Capitalized

H5 - Bold 18px - Capitalized
H6 - Bold 16px - Capitalized
Uppercase Heading
Use tags h1 to h6 with class="all-caps" for get necessary uppercase heading

H1 - Bold 30px - Uppercase

H2 - Bold 28px - Uppercase

H3 - Bold 24px - Uppercase

H4 - Bold 20px - Uppercase

H5 - Bold 18px - Uppercase
H6 - Bold 16px - Uppercase
Default Paragraph / Body Copy
Default Paragraph tag <p></p> or class="text-size-16"

text-size: 16px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Medium Size Paragraph / Body Copy
Use with any tag with class="text-size-14"

text-size: 14px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Large Size Paragraph / Body Copy
Use with any tag class="text-size-18"

text-size: 18px and line-height: 30px sample Lorem ipsum dolor sit amet, consectetur adipiscing 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.

All Capital Letters
Use with any tag class="all-caps"

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Bolder Text
Use with any tag with class="bolder-text"

font-weight: 700 Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Bold Text
Use with any tag with class="bold-text""

font-weight: 600 Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Capitalized Text
Use with any tag with class="text-capitalize"

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Small Text
Use with any tag with class="text-size-12"

text-size: 12px and line-height: 16px sample Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Separators
Using <hr> with class="separator + dashed, dotted, blue, orange, light-gray"
Icons
Icons are from fontawesome.com full icon set available here
ambulance
f0f9
angle-double-down
f103
angle-double-left
f100
angle-double-right
f101
angle-double-up
f102
angle-down
f107
angle-left
f104
angle-right
f105
angle-up
f106
arrow-down
f063
arrow-left
f060
arrow-right
f061
arrow-up
f062
at
f1fa
asterisk
f069
bell
f0f3
bone
f5d7
box
f466
calendar
f133
calendar-alt
f073
camera
f030
capsules
f46b
caret-down
f0d7
caret-left
f0d9
caret-right
f0da
caret-up
f0d8
cat
f6be
check
f00c
check-circle
f058
check-square
f14a
chevron-down
f078
chevron-left
f053
chevron-right
f054
chevron-up
f077
clock
f017
cog
f013
comment
f075
comments
f086
credit-card
f09d
crow
f520
directions
f5eb
dog
f6d3
dollar-sign
f155
dove
f4ba
download
f019
drumstick-bite
f6d7
egg
f7fb
ellipsis-h
f141
ellipsis-v
f142
envelope
f0e0
envelope-open
f2b6
exclamation
f12a
exclamation-circle
f06a
exclamation-triangle
f071
file-pdf
f1c1
filter
f0b0
heart
f004
home
f015
horse
f6f0
image
f03e
images
f302
info-circle
f05a
key
f084
link
f0c1
location-arrow
f124
lock
f023
map-marker-alt
f3c5
paper-plane
f1d8
paperclip
f0c6
pen
f304
pencil-alt
f303
phone
f095
pills
f484
play
f04b
plus
f067
plus-circle
f055
plus-square
f0fe
search
f002
share
f064
shopping-cart
f07a
star
f005
star-half
f089
star-half-alt
f5c0
times
f00d
times-circle
f057
trash
f1f8
trash-alt
f2ed
truck
f0d1
user-alt
f406
user-circle
f2bd
video
f03d
file-export
f56e
Social Icons
Icons are from fontawesome.com full icon set available here
facebook
f09a
facebook-f
f39e
facebook-square
f082
instagram
f16d
instagram-square
e055
linkedin
f08c
linkedin-in
f0e1
pinterest
f0d2
pinterest-p
f231
pinterest-square
f0d3
snapchat
f2ab
snapchat-ghost
f2ac
snapchat-square
f2ad
twitter
f099
twitter-square
f081
whatsapp
f232
whatsapp-square
f40c
youtube
f167
youtube-square
f431
Line Icons
Icons are from fontawesome.com full icon set available here
arrow-alt-circle-down
f358
arrow-alt-circle-left
f359
arrow-alt-circle-right
f35a
arrow-alt-circle-up
f35b
bell
f0f3
calendar
f133
calendar-alt
f073
caret-square-down
f150
caret-square-left
f191
caret-square-right
f152
caret-square-up
f151
check-circle
f058
check-square
f14a
clock
f017
comment
f075
comment-alt
f27a
comment-dots
f4ad
comments
f086
credit-card
f09d
edit
f044
envelope
f0e0
file-pdf
f1c1
heart
f004
image
f03e
paper-plane
f1d8
plus-square
f0fe
question-circle
f059
registered
f25d
star
f005
star-half
f089
sun
f185
times-circle
f057
trash-alt
f2ed
user
f007
user-circle
f2bd
window-close
f410
Layout / Grid System
Borrowed Bootstrap Grid for this layout system full guide available here

Grid options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes
4 Column Item Grid
By using class="col-3"
Trulli

Apoquel TabletRx

Mfg. Price $2.29
Trulli

Vetoryl Capsules 30 Ct.Rx

Starts at $35.44
Trulli

Trifexis Chewable Tablets for DogsRx

Starts at $20.49
Trulli

Nexgard for Dogs and PuppiesRx

Starts at $58.99
6 Column / Homepage Item Grid
By using class="col-2" for single line title
Trulli

Apoquel TabletRx

Mfg. Price $2.29
Trulli

Vetoryl Capsules 30 Ct.Rx

Starts at $35.44
Trulli

Trifexis Chewable Tablets for DogsRx

Starts at $20.49
Trulli

Nexgard for Dogs and PuppiesRx

Starts at $58.99
Trulli

Heartgard Plus Chewables For DogsRx

Starts at $36.49
Trulli

Bravecto ChewsRx

Starts at $56.99
3 Column / Product Listing Grid
By using class="col-4"
Trulli

Vetoryl Capsules 30 Ct.Rx

Starts at $35.44
Trulli

Trifexis Chewable Tablets for DogsRx

Starts at $20.49
Trulli

Nexgard for Dogs and PuppiesRx

Starts at $58.99
Icons Buttons
Buttons using <button> and <a> tag with icon
Default Link
Orange Color Link, Black Color Link
Underline Link
  1. Default <a> tag without any class
  2. Using <a> tag with any color class e.g. class="text-color-orange", class="text-color-black" etc.
  3. Using <a> tag with class="underline"
Elements
Buttons, Forms Inputs, etc.
Buttons
Primary and Secondary Buttons using <button> and <a> tag
Primary Primary Alt
Secondary Secondary Alt
  • Use either <button> or <a> tag with class="primary-btn" or class="primary-btn-alt"
  • Use either <button> or <a> tag with class="secondary-btn" or class="secondary-btn-alt"
Full width Buttons
Full width Primary and Secondary Buttons using <button> and <a> tag
Primary btn Full Width
Primary btn Alt Full Width
Seconadry btn Full Width
Seconadry btn alt Full Width
  • Use either <button> or <a> tag with class="primary-btn + full-width-btn"
  • Use either <button> or <a> tag with class="primary-btn-alt + full-width-btn"
  • Use either <button> or <a> tag with class="secondary-btn + full-width-btn"
  • Use either <button> or <a> tag with class="secondary-btn-alt + full-width-btn"
Button Disabled
By using <button> and <a> tag
Primary btn Disabled
Primary btn Alt Disabled
Secondary btn Disabled
Secondary btn Alt Disabled
  • To set disbaled state on a <button> tag add disabled="disabled" within the tag
  • To set disbaled state on <a> tag add class="disabled"
Icons Buttons
Buttons using <button> and <a> tag with icon
  • Use either <button> or <a> tag with class="primary-btn, secondary-btn + circular-btn"
  • Use either <button> or <a> tag with class="primary-btn-alt, secondary-btn-alt + circular-btn"
Social Media Button
Buttons using <button> and <a> tag with icon
  • Using <button> tag with class="primary-btn, secondary-btn + circular-btn + gray-btn"
Buttons with Icons
Buttons using <button> and <a> tag with icon
Primary btn Primary btn Primary btn Primary btn
  • Use either <button> or <a> tag and define icon in the text like this <i class="fas fa-icon_name"></i> Primary btn
GiantEagle top contact bar
Shipping, Call, Fax, Live Chat.
Free Shipping Over $49
Fax: 888-320-1383
Live Customer Care
Monday-Friday: 8AM - 7PM EST
Saturday: 9AM - 5PM EST
GiantEagle Header
Logo, Search and Buttons
Elements
Form Inputs, Textarea, Select etc.
Text Field, Select box
Text field, Textarea, Select box, Radio Button etc.
Checkbox, Radio button
Text field, Textarea, Select box, Radio Button etc.
Browse / Upload btn, Textarea
Text field, Textarea, Select box, Radio Button etc.
Image size 10Mb max (.jpg, .jpeg, .png, .bmp, .gif)
Error Message
Use with any tag "class="objError"
This is error message for input field
Borders
Different Border style and width
  1. Use with any tag class="borders" for this 1px border width
  2. For roundness use class="borders + rounded, rounded-5, rounded-8 and rounded-10" defaut class="rounded" is 3px
  3. For border color use class="borders + blue-border or orange-border"
  4. For border style use class="borders + dashed or dotted"
Shadows
Box Shadows and Shadow styles
  1. Use with any tag class="box-shadow" for 3px shadow
  2. For 5px shadow class="box-shadow-5"
  3. For 10px shadow class="box-shadow-10"
  4. For 25px shadow class="box-shadow-25"
Error, Warning, Notification etc.
Different color boxes for different scenarios
Error Message
  • Line one
  • Line two
  • Line three
Warning Message
Notification Message
Congratulations! your prescription was approved
  1. Use with any tag class="borders + rounded + error-box"
  2. For warning box use class="borders + rounded + warning-box"
  3. For showing notification use class="borders + rounded + notification-box"
  4. For successful action use class="borders + rounded + happy-box"