Custom classes

button
large-button

Component previews

Copied!
Copy color code
7B03AC
Accent Purple
HEX #7B03AC
Copied!
Copy color code
110F0E
Neutral 900
HEX #110F0E
Copied!
Copy color code
#332C29
Neutral 800
HEX #332C29
Copied!
Copy color code
77675F
Neutral 600
HEX #77675F
Copied!
Copy color code
B2A59F
Neutral 400
HEX #B2A59F
Copied!
Copy color code
CBC2BE
Neutral 300
HEX #CBC2BE
Copied!
Copy color code
E7E3E1
Neutral 200
HEX #E7E3E1
Copied!
Copy color code
F4F4F4
Neutral 100
HEX #F4F4F4
Copied!
Copy color code
Type hex code here
First
HEX
RGB
PANTONE
CMYK
Copied!
Copy color code
It will be copied
First
HEX #nasd02
RGB
PANTONE
CMYK
Copied!
Copy color code
And hidden. Example:
First
HEX
RGB
PANTONE
CMYK
Copied!
Copy color code
300048
Purple
HEX #300048
Copied!
Copy color code
000000
Black
HEX #000000
Copied!
Copy color code
FFFFFF
White
HEX #ffffff
Copied!
Copy color code
Type hex code here
Name
HEX
RGB
PANTONE
CMYK
Copied!
Copy color code
Example:
Name
HEX
RGB
PANTONE
CMYK
Copy color code
Copied!
#111111
Name
HEX
RGB
PANTONE
CMYK
Copy color code
Copied!
Type hex code here
Name
HEX
RGB
PANTONE
CMYK
Copied!
Copy color code
Example:
Name
HEX
RGB
PANTONE
CMYK
Copied!
Copy color code
#111111
Name
HEX
RGB
PANTONE
CMYK
Optional image description
Optional image description
Optional image description
Optional image description
Do not change the logo colors.
Do not apply effects to the logo.
Do not distort the logo in any way.
Do not place logo on a noisy background.
Do not outline the logo.
Do not apply a gradient to the logo.
Do not rotate the logo.
Do not use the logo as a mask.

Code examples - copy these

Button with external link

<a href="https://www.agencyleroy.com" class="db-button">View our website</a>

Large button with external link

<a href="https://www.agencyleroy.com" class="large-button">View our website</a>

Button with internal link

<a href="#anchor-tag1" class="button">Link on page</a>

Required tag to link to: <div id="anchor-tag1"> </div>

Large button with internal link

<a href="#anchor-tag-h3" class="large-button">Link on page</a>

Required tag to link to: <div id="anchor-tag-h3"> </div>

Components

Now on this page there are three components:

Colors component of 3 columns: {{brand-colors-3-1="/rtc"}}

Second colors component of 3 columns: {{brand-colors-3-1="/rtc"}}

Colors component of 4 columns: {{brand-colors-4-1="/rtc"}}

Links component of 2 columns with 4 links: {{buttons-2-1="/rtc"}}

Links component of 3 columns with 3 links: {{buttons-3-1="/rtc"}}

Images component of 3 columns {{images-3-1="/rtc"}}

First images component of 2 columns {{images-2-1="/rtc"}}

These can be added by typing the bold code inside of the rich text field on the homepage.

These components can be edited with the correct colors of the project as well as new text and new links. New components can be created by duplicating the ones found here. Or new ones can be created (by me). For each component a unique name needs to be set. Follow the screenshots to find out how to do that.

A required custom attribute has to be set on the element of fs-richtext-component with the unique name of the component
This is found in the Settings tab on the rightside in Webflow after clicking on the component on this page.
Do not change the logo colour or tone outside of the Pa-Hu green, white, or black.
Do not apply a drop shadow or other effects to the logo.
Do not distort, warp or change the logo in any way.
Do not place logo on a noisy background.