Colors
The primary colors and shades of gray on the website are managed through the webflow's variable feature.
Primary 1
Primary 2
Primary 3
Black
Gray 1
Gray 2
White
Buttons
A variety of button styles are available throughout the website.
HTML Headings
Styles for HTML heading tags (H1-H6).
H1
Heading - H1
H2
Heading - H2
H3
Heading - H3
H4
Heading - H4
H5
Heading - H5
H6
Heading - H6
Heading classes
Heading classes are created to match the design style and apply them to different heading tags. This ensures that the style of heading tags that look good in design matches the recommended heading tags for SEO. For example, for page heading you use H1 tag but you want styling(Font size etc.) of H2. By using a "Heading H2" class in H1 tag will give the style of an H2 heading while still keeping the H1 tag for SEO purposes. This way, both visually appealing design and good SEO practices can be achieved.
Paragraphs
Different sizes of paragraphs and text styling are available.
P
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
P
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
P
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Inline text elements
Styling for common inline elements.
P
Suspendisse varius enim in highlight eros elementum tristique.
D
Suspendisse varius enim in highlight eros elementum tristique.
U
Suspendisse varius enim in highlight eros elementum tristique.
B
Suspendisse varius enim in highlight eros elementum tristique.
I
Suspendisse varius enim in highlight eros elementum tristique.
I
Suspendisse varius enim in highlight eros elementum tristique.
Text alignments
Text alignment styles are available to realign text to components.
Text Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Text Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Blockquote
Styling for blockquotes.
This is a blockquote. Lorem comfort reached gay perhaps chamber his six detract besides add. Moonlight newspaper up its enjoyment agreeable depending. Timed voice share led him to widen noisy young. At weddings believed laughing although the material does the exercise of. Up attempt offered ye civilly so sitting to. Of acceptance insipidity remarkably is an invitation.
List Styles
Styling for ordered lists, unordered lists, and unstyled lists.
- This is an ordered list
- This is a list item within an ordered list
- Style each list item as you wish
- This is an unordered list
- This is a list item within an unordered list
- Style each list item as you wish
- This is an unstyled list
- This is a list item within an unstyled list
- This is unstyled list, so no need to style it
Rich Text
The Rich Text Element (RTE) is used to create long-form content. For advanced styling, you can Learn more here
This is rich text heading
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- This is an unordered list
- This is a list item within an unordered list
- Style each list item as you wish
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Form
A general style for Form elements.
Containers
Different types of container widths.
Section Spacings
To give sections more room to breathe and maintain all sections' spacing equally. In responsive, the spacing will be decreased.
Margins
Helper margin classes are available to add a margin between elements and keep spacing values consistent and unified throughout the site.
Margin bottom 0px
Margin bottom 4px
Margin bottom 8px
Margin bottom 12px
Margin Bottom 16px
Margin bottom 20px
Margin bottom 24px
Margin Bottom 28px
Margin Bottom 32px
Margin bottom 36px
Margin bottom 40px
Margin Bottom 44px
Margin Bottom 48px
Margin Bottom 54px
Margin Bottom 60px
Margin Bottom 70px
Margin bottom 80px
Margin bottom 120px
Text Classes
Text classes when typography style doesn't match the default HTML tag.
Text Sizes
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present on your website.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Text Weights
Text Alignments
Text Styles
text-style-strikethrough
text-style-italic
text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
Sample text is being used as a placeholder.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Size Classes
Spacers
Unified spacer system for the project.
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Useful utility systems
Utility classes we like to use in most of our projects to build faster.
How to use these icons in your Webflow project
When in the Webflow designer:
- Click on the icon you wish to use, then copy it to your clipboard using the shortcut CMD + C.
- Paste the icon into the location you wish it be used using the shortcut CMD + V
By default, the icons in the directory all have the class icon-size--medium which gives them dimensions of 24 x 24px.
If you wish to change the dimensions we recommend swapping the class to one of those detailed below.
n.b. You can of course apply your own bespoke classes and/or tinker with the properties related to these pre-set classes.
Explore the icons
acadamic-cap
adjustments
annotation
archive
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-narrow-down
arrow-narrow-left
arrow-narrow-right
arrow-narrow-up
arrow-right
arrow-up
arrows-expand
at-symbol
backspace
badge-check
ban
beaker
bell
book-open
bookmark-alt
bookmark
briefcase
cake
calculator
calendar
camera
cash
chart-bar
chart-pie
chart-square-bar
chat-alt-2
chat-alt
chat
check-circle
check
chevron-double-down
chevron-double-left
chevron-double-right
chevron-double-up
chevron-down
chevron-left
chevron-right
chevron-up
chip
clipboard-check
clipboard-copy
clipboard-list
clipboard
clock
cloud-download
cloud-upload
cloud
code
cog
collection
color-swatch
credit-card
cube-transparent
cube
currency-bangladeshi
currency-dollar
currency-euro
currency-pound
currency-rupee
currency-yen
cursor-click
database
desktop-computer
device-mobile
device-tablet
document-add
document-download
document-duplicate
document-remove
document-report
document-search
document-text
document
dots-circle-horizontal
dots-horizontal
dots-vertical
download
duplicate
emoji-happy
emoji-sad
exclamation-circle
exclamation
external-link
eye-off
device-eye
fast-forward
film
filter
finger-print
fire
flag
folder-add
folder-download
folder-open
folder-remove
folder
gift
globe-alt
globe
hand
hashtag
heart
home
identification
inbox-in
inbox
information-circle
key
library
light-bulb
lightning-bolt
link
location-marker
lock-closed
lock-open
login
logout
mail-open
map
menu-alt-1
menu-alt-2
menu-alt-3
menu-alt-4
menu
microphone
minus-circle
minus-sm
minus
moon
music-note
newspaper
office-building
paper-airplane
paper-clip
pause
pencil-alt
pencil
phone-incoming
phone-missed-call
phone-outgoing
photograph
play
plus-circle
plus-sm
plus
presentation-chart-bar
presentation-chart-line
printer
puzzle
qrcode
question-mark-circle
receipt-refund
receipt-tax
refresh
reply
rewind
rss
save-as
save
scale
scissors
search-circle
search
selector
server
share
shield-check
shield-exclamation
shopping-bag
shopping-cart
sort-ascending
sort-descending
sparkles
speakerphone
star
status-offline
status-online
stop
sun
support
stopswitch-horizontal
switch-vertical
table
tag
template
terminal
thumb-down
thumb-up
ticket
translate
trash
trending-down
trending-up
truck
upload
user-add
user-circle
user-group
user-remove
user
users
variable
video-camera
view-boards
view-grid-add
view-grid
view-list
volume-off
volume-up
wifi
x-circle
x
zoom-in
zoom-out
Our impact, in their words
These testimonials can highlight personal experiences, stories of transformation, or expressions of gratitude for our organization's work.
Volunteering with CharityFlow has been incredibly fulfilling, and witnessing the direct impact of their projects has reaffirmed my belief in collective compassion.
Jacqueline Miller
Donating my time at Charity has been incredibly heartening, and watching the animals find loving homes has solidified my belief in the significance of kindness and empathy.
Julia Wallace
Mentoring youth through local programs has been immensely gratifying, and observing their growth and achievements has reinforced my faith in the transformative potential of guidance and support.