animated svg

Component used to display animated Scalable Vector Graphics (SVG)

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

callout

Popouts for rich tooltips

card

Wrapping containers for consistently styled cards

checkbox card

Checkbox input with built-in layouting subcomponents

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.

countdown timer

A countdown timer that displays a circular progress bar to represent the remaining time.

currency input

Currency input field

drawer

An overlay panel that slides in to display additional content

dropdown filter

A button which displays a rich popout

file select

User interfaces for file attachments

file viewer

A component that handles file previewing

floating action

Floating action is used to notify and provide action for the user.

gallery mosaic

Grid preview of files

grid

The grid system in Freelancer is a 12 column based Flexbox grid system. It’s fully responsive using a mobile first approach.

highlight

Highlighting a component

hr

a horizontal divider to emphasize end of a section and start of a new section

icon

Icons from our icon set

image cropper

Image cropper is used to resize and crop a given image.

input

Inputs that accept typed input from users

label

Labels used in forms to provide descriptions for inputs

link

Anchor tags used for embedded links or smaller actions

loading text

A placeholder to be used in place of text being fetched from network

location input

An autocompleting text-box for location input

modal

Appears on top of and disables the main content until it has been explicitly interacted with

more options

Displays a list of action items

multi select

Multiselects for typing multiple options

multiple location input

Multiple location input field for autocompleting "from" and "to" locations

otp input

OTP input component for entering one-time passwords and verification codes. Renders a series of single-digit input boxes that automatically advance focus as the user types.

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

Phone number input field

progress bar

A widget for showing unitless progress

progress steps

A widget for showing progress of the user on a funnel with multiple steps

pull refresh

A container component that streamlines the implementation of pull-to-refresh functionality.

radio

Inputs to select one of multiple options

search

A general purpose search component with optional result display

select

Inputs for selecting from a menu of items

share buttons

Social Media Platform's sharing buttons

share link

Component that allows users to copy a shareable link.

slider

Inputs for choosing a value or a range inside a range of values

smart textarea

Provides ability to show customized callouts inside textareas based on user text selection events

social buttons

Icons for linking to social media platforms or providing sharing buttons

spinner

A component that indicates loading or processing

split button

A button which allows the user to execute a default action or to choose a predefined action from a drop-down list

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

textarea

Multi-line inputs for forms

toggle buttons

Toggle buttons group

toggle

Simple toggle switches

widget

The widget card display the information in a single element.