HLB Webflow Template
elements
Layers
Typography
Icons
Images
Controls
components
Cards
Forms
sections
Navigations
Footer
Newsletter
RAW classes
Layers
Source layers. Generate a palette here: mcg.mbitson.com
Clone this templace
Fill
Colors of the brand. You can have up to 3. Each brand color comes in 7 shades: 100, 80, 60, 40, 20, 10, and 5%
Brand-Primary
Parent classe(s):
Layer_Color-Primary_900
Layer_Color-Primary_700
Layer_Color-Primary_500
Layer_Color-Primary_300
Layer_Color-Primary_100
Layer_Color-Primary_50
Brand-Secondary
Parent classe(s):
Layer_Color-Secondary_900
Layer_Color-Secondary_700
Layer_Color-Secondary_500
Layer_Color-Secondary_300
Layer_Color-Secondary_100
Layer_Color-Secondary_50
Brand-Tertiary
Parent classe(s):
Layer_Color-Tertiary_900
Layer_Color-Tertiary_700
Layer_Color-Tertiary_500
Layer_Color-Tertiary_300
Layer_Color-Tertiary_100
Layer_Color-Tertiary_50
UI colors
Parent classe(s):
Layer_Color-Validate_900
Layer_Color-Validate_700
Layer_Color-Validate_500
Layer_Color-Validate_300
Layer_Color-Validate_100
Layer_Color-Validate_50
Layer_Color-Error_900
Layer_Color-Error_700
Layer_Color-Error_500
Layer_Color-Error_300
Layer_Color-Error_100
Layer_Color-Error_50
Layer_Color-Danger_900
Layer_Color-Danger_700
Layer_Color-Danger_500
Layer_Color-Danger_300
Layer_Color-Danger_100
Layer_Color-Black_50
Layer_Color-White
Borders
Brand Borders
Parent classe(s):
Border_Color-Primary_500
Border_Color-Secondary_500
Border_Color-Tertiary_500
UI Borders
Parent classe(s):
Border_Color-Validate_500
Border_Color-Error_500
Border_Color-Danger_500
Border_Color-Dark_500
Border_Color-White
Shadows
Shadows with hover effect
Parent classe(s):
Layer_Shadow-hover_ON-Large
Layer_Shadow-hover_ON-Medium
Shadows withouthover effect
Parent classe(s):
Layer_Shadow-hover_OFF-Large
Layer_Shadow-hover_OFF-Medium
Button Shapes
Change button radius and padding here
Classic buttons
Parent classe(s):
Button-Classic
Children classe(s):
Button_Size-Small
Button_Size-Medium
Button_Size-Large
Main Wrapper
Icon only buttons
Parent classe(s):
Button-Classic
Children classe(s):
Button_Size-Icon_Only-Small
Button_Size-Icon_Only-Medium
Button_Size-Icon_Only-Large
