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 LinearLayouts
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
Button Colors
Button Secondary Hover Color
Button Secondary Text Color
Button Secondary Text Hover Color
Button Outline Hover Color
Button Outline Text Color
Link Colors
Background Colors
Text Colors
Various Other Colors
Form Input Background Color
Form Input Placeholder Color
Images
Images can easily be adjusted using the following styles.
Shadows
Add or remove shadows quickly and easily to any element with the box shadow utility.
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.
Radius
Add or remove a radius quickly and easily to any element with the radius utility.
Opacity
Add or remove an opacity quickly and easily to any element with the opacity utility.
Components
Accordian
Here's a simple accordion that you can modify.
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.
Breadcrumbs
Quickly build breadcrumbs with Linear.
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
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Links
Here's a simple link structure. You can use the Flexbox styles to adjust the alignment of the links. By default, this is centered.
Modals
Linear has a simple modal component with animation to open and close. You can style this modal however you see fit.
Live Demo
Navbar
Need a Navbar? Here's one for you. You can adjust the global styles by editing the Nav Bar Style in the Styles Manager. Note: I added a combo class to override my primary page Nav for this particular component.
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.
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.
