info

Get Help from a LiftKit Expert

arrow_forward
Get Help

Sections

Choose a Starter Kit

Get started with LiftKit using one of the official starter kits for Webflow, Figma, or CSS.

Quickstart

Get a feel for LiftKit by following along with this short tutorial.

Overview

Sections are the most essential building block of a page. There are 5 default utility categories for them.

Class Name Padding (top and bottom) Padding (left-and-right)
.section__leastPadding var(--titleBFontSize) var(--titleBFontSize)
.section__lessPadding var(--display2FontSize) var(--display1FontSize)
.section__default var(--display1FontSize) var(--display1FontSize)
.section__morePadding calc(var(--display1FontSize) * var(--wholeStep)) var(--display1FontSize)
.section__mostPadding calc(var(--display1FontSize) * var(--display2FontSize)) var(--display1FontSize)

You may notice that there’s more variance in top-and-bottom padding than left and right padding. That’s simply because I’ve never had a use case where I needed a least-padding section that had the default left-and-right padding. If user feedback indicates this is a stupid way to do it, I’ll gladly change it.

Give Us Feedback

Click or tap to reveal form.
expand_more
check_circle
Success! An email has been sent to you with more details.
Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.
error
Error: Something went wrong. Email info@chainlift.io directly for assistance.