đź‘‹ Welcome to your site style guide.
This is a quick and easy reference for the general styles, text, and colors that define the overall look and feel of your website. We've also included instructions on how to achieve specific effects.
In case you missed it:
Your site also has an Elements Library, which contains a reference library of saved sections and modules.
Color Palette
These are the colors (and corresponding hex codes) that are used throughout this website.
Heading Styles
Your heading font is called DM Sans.
Display
Heading One
Heading Two
Heading Two (Post)
Heading Three
Heading Three (Cards)
Heading Four
Heading Five
Heading Six
Display
Heading One
Heading Two
Heading Two (Post)
Heading Three
Heading Three (Cards)
Heading Four
Heading Five
Heading Six
Text Styles
Your general body font is called Manrope.
This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.
This is a blockquote.
Unordered list:
- This is an unordered list item.
- This is another unordered list item.
Ordered list:
- This is an ordered list item.
- This is another ordered list item.
This is larger text. You can make text like this by using the larger css class.
This is smaller text. You can make text like this by using the smaller css class.
This is what normal text looks like.
This is bold text.
This is italicized text.
This is a link.
This is a blockquote.
Unordered list:
- This is an unordered list item.
- This is another unordered list item.
Ordered list:
- This is an ordered list item.
- This is another ordered list item.
This is larger text. You can make text like this by using the larger css class.
This is smaller text. You can make text like this by using the smaller css class.
⚡️ Quick Tip
How to use classes in the page builder
All page builder elements, from rows, to columns, to modules, allow you to assign custom CSS classes to manipulate their appearance in a predefined way. We have indicated when this is the case with any of the elements below.
To assign a class to an element:
- Open the Row, Column, or Module settings.
- Click the "Advanced" tab.
- Scroll to the bottom.
- Enter your desired class in the "Classes" field. (To add multiple classes, separate them with a space.)
- Hit "Save"
Bonus: You can add the class invert to any element to create inverted text (like this!)
Background Colors
You can assign predefined background colors by updating a row or column with the classes indicated below. If you manually set a background color in the page builder, it will automatically override your class.
This has the class bg-main
This has the class bg-light
This has the classes bg-dark and invert
Inverted Button Styles
These are the button styles when combined with the invert class. In some instances, these styles can be useful when displaying a button on a dark background. To use an inverted button, add invert as a class, in addition to any other appropriate classes. In some cases, the default and inverted versions of a button may (intentionally) look the same.
Resizing Buttons
You can change the size of a button by using the classes larger or smaller. You can also combine these with other button classes, for a wide range of style and size combinations.
Button Shortcodes
You can use a shortcode to display a button in an area that isn't using Beaver Builder.
For use in the visual editor
Basic usage:
[button url="https://example.com" text="Button text"]
Force it to open in a new tab/window:
[button url="https://example.com" text="Button text" new-window="true"]
Add extra classes:
[button url="https://example.com" text="Button text" class="additional-class-name another-additional-class-name"]
Image Sizes & Dimensions
When you upload an image to the site, it's important to make sure that it's the right dimensions (or approximately so). This will help speed up load time and make your site more accessible to people on slower connections.
Page Banners (Featured Image)
1920x960px (approx)
Your featured images are also used as your page banners. If you upload a significantly different size, it may appear blurry, take a long time to load, or be cropped in an unusual way.
Headshots
600x600px (approx)
Ideally, headshots should be cropped before uploading. If you upload an alternate size, it may be cropped automatically.
Inline Images
1200px wide (approx)
Inline images go within your content, and are not intended to display at the full width of the page.
Heroicons
A shortcode to use the Heroicon library has been built into the site, and you can select the icon from below to add to the shortcode.
Click on the image of the icon list to the right to view the full size.
If you want to use the outline versions of the icons, use the shortcode below.
[heroicon icon="document-text"]
If you want to use the solid versions of the icons, add the style solid to your shortcode.
[heroicon icon="document-text" style="solid"]
academic-cap
adjustments-horizontal
adjustments-vertical
archive-box-arrow-down
archive-box-x-mark
archive-box
arrow-down-circle
arrow-down-left
arrow-down-on-square-stack
arrow-down-on-square
arrow-down-right
arrow-down-tray
arrow-down
arrow-left-circle
arrow-left-on-rectangle
arrow-left
arrow-long-down
arrow-long-left
arrow-long-right
arrow-long-up
arrow-path-rounded-square
arrow-path
arrow-right-circle
arrow-right-on-rectangle
arrow-right
arrow-small-down
arrow-small-left
arrow-small-right
arrow-small-up
arrow-top-right-on-square
arrow-trending-down
arrow-trending-up
arrow-up-circle
arrow-up-left
arrow-up-on-square-stack
arrow-up-on-square
arrow-up-right
arrow-up-tray
arrow-up
arrow-uturn-down
arrow-uturn-left
arrow-uturn-right
arrow-uturn-up
arrows-pointing-in
arrows-pointing-out
arrows-right-left
arrows-up-down
at-symbol
backspace
backward
banknotes
bars-2
bars-3-bottom-left
bars-3-bottom-right
bars-3-center-left
bars-3
bars-4
bars-arrow-down
bars-arrow-up
battery-0
battery-100
battery-50
beaker
bell-alert
bell-slash
bell-snooze
bell
bolt-slash
bolt
book-open
bookmark-slash
bookmark-square
bookmark
briefcase
bug-ant
building-library
building-office-2
building-office
building-storefront
cake
calculator
calendar-days
calendar
camera
chart-bar-square
chart-bar
chart-pie
chat-bubble-bottom-center-text
chat-bubble-bottom-center
chat-bubble-left-ellipsis
chat-bubble-left-right
chat-bubble-left
chat-bubble-oval-left-ellipsis
chat-bubble-oval-left
check-badge
check-circle
check
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-left
chevron-right
chevron-up-down
chevron-up
circle-stack
clipboard-document-check
clipboard-document-list
clipboard-document
clipboard
clock
cloud-arrow-down
cloud-arrow-up
cloud
code-bracket-square
code-bracket
cog-6-tooth
cog-8-tooth
cog
command-line
computer-desktop
cpu-chip
credit-card
cube-transparent
cube
currency-bangladeshi
currency-dollar
currency-euro
currency-pound
currency-rupee
currency-yen
cursor-arrow-rays
cursor-arrow-ripple
device-phone-mobile
device-tablet
document-arrow-down
document-arrow-up
document-chart-bar
document-check
document-duplicate
document-magnifying-glass
document-minus
document-plus
document-text
document
ellipsis-horizontal-circle
ellipsis-horizontal
ellipsis-vertical
envelope-open
envelope
exclamation-circle
exclamation-triangle
eye-dropper
eye-slash
eye
face-frown
face-smile
film
finger-print
fire
flag
folder-arrow-down
folder-minus
folder-open
folder-plus
folder
forward
funnel
gif
gift-top
gift
globe-alt
globe-americas
globe-asia-australia
globe-europe-africa
hand-raised
hand-thumb-down
hand-thumb-up
hashtag
heart
home-modern
home
identification
inbox-arrow-down
inbox-stack
inbox
information-circle
key
language
lifebuoy
light-bulb
link
list-bullet
lock-closed
lock-open
magnifying-glass-circle
magnifying-glass-minus
magnifying-glass-plus
magnifying-glass
map-pin
map
megaphone
microphone
minus-circle
minus-small
minus
moon
musical-note
newspaper
no-symbol
paint-brush
paper-airplane
paper-clip
pause-circle
pause
pencil-square
pencil
phone-arrow-down-left
phone-arrow-up-right
phone-x-mark
phone
photo
play-circle
play-pause
play
plus-circle
plus-small
plus
power
presentation-chart-bar
presentation-chart-line
printer
puzzle-piece
qr-code
question-mark-circle
queue-list
radio
receipt-percent
receipt-refund
rectangle-group
rectangle-stack
rocket-launch
rss
scale
scissors
server-stack
server
share
shield-check
shield-exclamation
shopping-bag
shopping-cart
signal-slash
signal
sparkles
speaker-wave
speaker-x-mark
square-2-stack
square-3-stack-3d
squares-2x2
squares-plus
star
stop-circle
stop
sun
swatch
table-cells
tag
ticket
trash
trophy
truck
tv
user-circle
user-group
user-minus
user-plus
user
users
variable
video-camera-slash
video-camera
view-columns
viewfinder-circle
wallet
wifi
window
wrench-screwdriver
wrench
x-circle
x-mark