PLEASE DO NOT EDIT

Last Updated: Feb 29, 2024

Fetch Pet Rx Style Guide

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
Primary Color 1
HEX #4DC4B1
RGB 77 196 177
CMYK 64% 0% 39% 0%
Primary Color 2
HEX #FAF6ED
RGB 250 246 237
CMYK 0% 2% 7% 2%
Secondary Color 1
HEX #D7F1ED
RGB 215 241 237
CMYK 11% 0% 2% 5%
Secondary Color 2
HEX #F3EFE6
RGB 243 239 230
CMYK 0% 2% 5% 5%
Tertiary Color 1
HEX #F19FC2
RGB 241 159 194
CMYK 2% 47% 2% 0%
Tertiary Color 2
HEX #191C4F
RGB 25 28 79
CMYK 100% 100% 0% 35%
White Color
HEX #FFFFFF
RGB 255 255 255
CMYK 0% 0% 0% 0%
Black Color
HEX #000000
RGB 0 0 0
CMYK 0% 0% 0% 100%
Error Color
HEX #E51E42
RGB 229 30 66
CMYK 0% 87% 71% 10%
Notification Red
HEX #FF5653
RGB 255 86 83
CMYK 0% 95% 69% 0%
HYPERLINK BLUE
HEX #5757F2
RGB 87 87 242
CMYK 64% 64% 0% 5%
Gray 1
HEX #F4F4F4
RGB 244 244 244
CMYK 0% 0% 0% 4%
Gray 2
Use with any tag
HEX #515151
RGB 81 81 81
CMYK 0% 0% 0% 68%
Gray 3
HEX #C9C7C7
RGB 201 199 199
CMYK 0% 1% 1% 21%
Typography / Fonts

Font Name: DM Sans

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 + - \ * =

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

Typography / Fonts

Font Name: Crimson Text

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

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

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

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
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
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
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
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
Red 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

Default Button

Hover Button

Default Button

Hover Button

Default Button

Hover Button

Default Button

Hover Button

  • 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

Default Button

Hover Button

Default Button

Hover Button

Default Button

Hover Button

Default Button

Hover Button

Button Disabled
Icons Buttons

Default Button

Hover Button

Social Media Button

Default Button

Hover Button

Buttons with Icons

Default Buttons

Hover Buttons

Top contact bar
Shipping, Call, Fax, Live Chat.
Back to FetchPetRx.com
Free shipping Over $49
Call: 877.299.0893
Fax: 877-500-9950
Live Customer Care
Header
Logo, Search and Buttons
My Profile My Orders My AutoShip My Rx My Pets My Vets My Rewards Sign Out
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)
Image size 10Mb max (.jpg, .jpeg, .png, .bmp, .gif)
Error Message
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"
Reviews.io Review Widget
Live review widget directly from Reviews.io
Navigation menu