Components
badge
Badges that represent a user subscription
banner alert
Banners which inform users about important things
banner announcement
Announcement Banner are used to display extremely important messages that has affects the whole website experience.
breadcrumbs
A breadcrumb trail on a page indicates the page's position in the site hierarchy.
button
Clickable elements for anything you want people to click on
card
Wrapping containers for consistently styled cards
checkbox
Checkboxes for giving users the ability to choose zero, one or more items from a range of options.
container
The container component is used to literally contain elements using standard maximum widths and center it in the page. This component doesn't have any paddings by default in mobile but supports side notches.
currency input
Tags: forms
dropdown filter
A button which displays a rich popout
file display
Icons with backgrounds that can be used to display/preview a file
flag
Icons for displaying country flags
floating action
Floating action is used to notify and provide action for the user.
grid
The grid system in Freelancer is a 12 column based Flexbox grid system. It’s fully responsive using a mobile first approach.
highlight text
Styled text for showing text with specific chunks highlighted
hr
a horizontal divider to emphasize end of a section and start of a new section
input
Inputs that accept typed input from users
link
Anchor tags used for embedded links or smaller actions
logo
A Freelancer logo
modal
Appears on top of and disables the main content until it has been explicitly interacted with
page layout
page-layout is the base standard component to house all of the components in a page. This component contains the standard background color, maximum width and minimum height.
pagination
A simple pagination component
phone input
Tags: forms
picture
Media components used to display asset images
progress steps
A widget for showing progress of the user on a funnel with multiple steps
radio
Inputs to select one of multiple options
rating
The Rating component is a five star rating system for users who work together to rate each other based on their experience
relative time
Simple time-ago components with optional live updating
ribbon
Coloured strips used to highlight components
search
A general purpose search component with optional result display
slider
Inputs for choosing a value or a range inside a range of values
spinner
A component that indicates loading or processing
table
Tables for displaying dynamic data
tabs
Tabs used to switch between different views
tag
Tags for skills or filters, which can be clicked or dismissed
tailwind text
Text that is styled via the tailwind utility classes.
textarea
Multi-line inputs for forms
toast alert
Toast alerts are displayed at the top and center, just below the header nav.
toggle
Simple toggle switches
tooltip
A tooltip is a floating, non-actionable label used to explain a UI element, feature or to provide additional information.
unread indicator
Indicator for unread messages
user avatar
Components for showing user profile images
validation error
Validation error which shows up on invalid form responses.