Documentation

Get started with Linear.

Linear is a powerful toolkit for your Webflow project. With over 2,000 Styles and nearly a dozen blocks, you can build almost anything using Linear.

How to use Linear?

Currently Linear is only available on Webflow. The following documentation is written for the Webflow platform. You can quickly get started with Linear for Webfow by cloning this documentation project in Webflow. Once you clone it, you'll have access to the latest styles and components. Currently, Linear is on V1.0. As we update this project, you will only gain access to these new updates if you reclone this documentation again.
Clone Linear

Layouts

Breakpoints
Linear's breakpoints align with common standard Desktop, Tablet, Landscape, and Portrait Breakpoints. You can make further adjustments as needed.
Sections
Sections are just that—sections of your website. Linear comes complete with various section styles with pre-defined padding and margins depending on the section you are building. These sections automatically scale down as they need to for each breakpoint.
Containers
Containers are the divs inside of your sections. Linear comes complete with most container widths that you'll use from 480px to 1140px and full 100% width.
Flex & Positioning
Linear has a variety of Flex layout class and positioning classes to help you quickly and easily layout your website.
Grid
Linear easily supports the use of Grids. Need a quick 3-column grid for your layout or one that's offset? Linear grid styles make it fast!

Styles & Utilities

Typography
Linear uses Poppins as the default font. It's used for all headlines and paragraphs. You can update the All Fonts Style if you'd like to override that font. If you'd like to update the font for your Headlines, you can select each font below and change the font for the appropriate class. For example, if you want to update your H1, you'll choose the All H1 Headings Style and make your adjustments.
Headlines

H1 for Linear Headlines

H2 for Linear Headlines

H3 for Linear Headlines

H4 for Linear Headlines

H5 for Linear Headlines
H6 for Linear Headlines
Typography Styling
You can use various combo styles to adjust your Typography's alignment, weight, sizing, and line height for both Desktop and Mobile breakpoints.
This is an example of a pieces of content using the
Colors
You can adjust Linear's colors by selecting any of the following global color swatches and editing the associate color swatch in the background color of this styles panel.
Global Colors
Body Background
Body Text
Headings
Brand Color
Button Colors
Button Colors
Button Hover Color
Button Text Color
Button Text Hover Color
Button Secondary
Button Secondary Hover Color
Button Secondary Text Color
Button Secondary Text Hover Color
Button Outline
Button Outline Hover Color
Button Outline Text Color
Link Colors
Link Color
Link Hover Color
Nav LInk Color
Nav LInk Hover Color
Background Colors
Background Color 1
Background Color 2
Background Color 3
Background Color 4
Text Colors
Text Color 1
Text Color 2
Text Color 3
Text Color 4
Various Other Colors
Border Color
Form Input Background Color
Form Input Placeholder Color
Form Input Modal Color
Images
Images can easily be adjusted using the following styles.
Fit Contain
Fit Cover
Fit Fill
Fit None
Fit Scale Down
Shadows
Add or remove shadows quickly and easily to any element with the box shadow utility.
No Shadow
Box Shadow Small
Box Shadow Medium
Box Shadow Large
Borders
Add or remove borders quickly and easily to any element with the box shadow utility. You can add borders just top and bottom, left and right, or around the entire element.
Border Bottom 1 px
Border 2 px
Border 3 px
Radius
Add or remove a radius quickly and easily to any element with the radius utility.
Radius None
Radius XS
Radius Small
Radius Medium
Radius Large
Radius XL
Radius 2XL
Radius 3XL
Radius Full
Opacity
Add or remove an opacity quickly and easily to any element with the opacity utility.
Opacity 10%
Opacity 20%
Opacity 30%
Opacity 40%
Opacity 50%
Opacity 60%
Opacity 70%
Opacity 80%
Opacity 90%
Opacity 100%

Components

Accordian
Here's a simple accordion that you can modify.
Accordian Item #1
This is the content for accordion item #1
Accordian Item #2
This is the content for accordion item #2
Accordian Item #3
This is the content for accordion item #3
Accordian Item #4
This is the content for accordion item #4
Accordian Item #5
This is the content for accordion item #5
Alerts
Do you need a pre-styled alert for your form or any other alert? The four Alert styles are available for you. You can also add an animation to open and close your alert if needed.
Alerts
This is a simple success alert.
This is a simple warning alert.
This is a simple error alert.
This is a simple error alert.
Alert with a dismiss function
This is a simple warning alert.
Button Types & Sizes
Linear comes with a Button, Secondary Button, and Outlined Button, available in three different sizes. In addition, you can add the Class Width Full to a Button to allow a button to span the width of a card, container, or other div.
Button
Secondary Button
Outlined Button
LargeDefaultSmall
Cards
Linear comes with three types of pre-built cards that you can use in your projects. The building block of a card is the Card Body or Card Body Image Class. This provides universal padding to your card. In addition, you can add the Rounded Class to the card to round it as you see fit. All Cards default to 100% width.
Card Body
This is some text inside the Card Body Class.
Card with Button

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.
Card with Image Top & Button

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.
Card with Image Top & Button
Header Title

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.
Forms
Linear comes out of the box with basic Form styling. If you want to adjust the styling of your form, you can do so in the Styles manager and manipulate this form below. Alternatively, you can change the label's styles using the All Labels style.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Tabs
Here's a basic Tab structure using Webflow's native Tab component as a base.
Tabs with Underline
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Tooltips
Tippy powers tooltips with Linear. The code has already been added. Assign the Tippy style to your button, Link, or Link Block, along with the attribute "data-tippy-content" = Your Tooltip Description, and that's it. Once published, you'll be able to see your Tooltips.

Resources & Powerups

Below are a variety of our favorite resources, powers, and tools to use with Linear. We'll be expanding this library often, and in future updates to Linear, we'll be adding several pre-built components utilizing these resources or powerups.

Font Awesome

We love to use Font Awesome with Linear. Download Font Awesome, and Upload it as a Custom Font, and you now have icons.

Jetboost

Jetboost is one of our go-to powers to expand Webflow capabilities like Serch, Pagination, and more.

About

Overview
Greenline Creative maintains Linear. It is an ongoing project that is regularly updated with new styles and components. Linear is currently on Version 1.0. Learn more about Linear today.
Learn More
Copyright © 2022 Greenline Creative. All rights reserved.
This site was built with love on Linear version 1.0