Custom classes

button
large-button

Component previews

Copied!
Copy color code
#395244
Havu
PANTONE 7736 C
CMYK 74 48 69 39
sRGB 57 82 68
HEX #395244
Copied!
Copy color code
#BD9147
Pahvi
PANTONE 7407 C
CMYK 25 42 84 4
sRGB 189 145 71 HEX #BD9147
Copied!
Copy color code
#2e2a2c
Hiili
PANTONE BLACK C
CMYK 0 0 0 100
sRGB 46 42 44
HEX #2e2a2c
Copied!
Copy color code
#111111
Tuhka
PANTONE 2332 C
CMYK 48 39 42 4
sRGB 139 140 136
HEX #8b8c88
Copied!
Copy color code
#4a677f
Lähde
PANTONE 2167 C
CMYK 76 54 35 12
sRGB 74 103 127
HEX #4a677f
Copied!
Copy color code
#c06c84
Mustikka
PANTONE 7634 C
CMYK 24 69 32 1
sRGB 192 108 132
HEX #c06c84
Copied!
Copy color code
#f67280
Kajo
PANTONE 177 C
CMYK 0 69 35 0
sRGB 246 114 128
HEX #f67280
Copied!
Copy color code
#f8b195
Lohi
PANTONE 2022 C
CMYK 0 36 38 0
sRGB 248 177 149
HEX #f8b195
Copied!
Copy color code
#395244
Havu
PANTONE 7736 C
CMYK 74 48 69 39
sRGB 57 82 68
HEX #395244
Copied!
Copy color code
#b0d872
Kerkkä
PANTONE 366 C
CMYK 34 0 72 0
sRGB 176 216 114
HEX #b0d872
Copied!
Copy color code
#BD9147
Pahvi
PANTONE 7407 C
CMYK 25 42 84 4
sRGB 189 145 71
HEX #BD9147
Copied!
Copy color code
#2e2a2c
Hiili
PANTONE BLACK C
CMYK 0 0 0 100
sRGB 46 42 44
HEX #2e2a2c
Copied!
Copy color code
#8b8c88
Tuhka
PANTONE 2332 C
CMYK 48 39 42 4
sRGB 139 140 136
HEX #8b8c88
Copy color code
Copied!
#ffffff
Lumi
PANTONE White
CMYK 0 0 0 0
sRGB 255 255 255
HEX #ffffff
Copy color code
Copied!
#d1dbbd
Jäkälä
PANTONE 7485 C
CMYK 18 6 29 0
sRGB 209 219 189
HEX #d1dbbd
Copied!
Copy color code
#f8f4e5
Säde
PANTONE —
‍CMYK 5
sRGB 248 244 229
HEX #f8f4e5
Copied!
Copy color code
#f1f1f1
Tuohi
PANTONE COOL GREY 1 C
CMYK 4 2 2 0
sRGB 242 242 242
HEX #f1f1f1
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="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.