Body L
Body M
Body S
“You know you're in love when you can't fall asleep because reality is finally better than your dreams.”
You can set alignment for text elements by adding a class name from below.
Text align right
Text align left
Text align center
Text align justify
We will notify you about the newest updates
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Sprkl grid system can adapt across all 4 default webflow breakpoints (Desktop, tablet, mobile ladscape and mobile portrait). We are using different names for breakpoints e.g. Desktop = Large (LG), Tablet = Medium (MD), etc. Default grid tiers are as follows:
Large (LG) - Base
Medium (MD) - ≤ 991
Medium landscape (MDL) - ≤ 767
Small (SM) - ≤ 478
HEADS UP. Switch between breakpoints in designer mode in order to make changes.
Styles apply at all breakpoints, unless they’re edited at a larger or smaller breakpoint. Sprkl use 12 column grid at LG breakpoint. You can change them from here.
Styles added here will apply at 991px and down, unless they’re edited at a smaller breakpoint. Sprkl use 6 column grid at MD breakpoint. You can change them from here.
Styles added here will apply at 767px and down, unless they’re edited at a smaller breakpoint. Sprkl use 6 column grid at MDL breakpoint. You can change them from here.
Styles added here will apply at 478px and down. Sprkl use 2 column grid at SM breakpoint. You can change them from here.
Sprkl system use a series of containers, rows, and columns in order to build different layouts. Overall structure listed below.
Section
↳ Wrapper
↳↳ Row
↳↳↳ Col
You can visually structure you content into logical groups with Section global class. Wrapper, row and col classes should be nested inside of it.
Wrapper defines global paddings of your website. Note that wrapper has its own Max-width and should be sum of Row width and global paddings width (e.g. Row width 1320px + 20px left global padding + 20px right global padding = 1360px Wrapper max-width).
All columns should be nested inside of rows, you can stack any row amount on top of each other. Rows defines Max-width of your content and its overall width includes left and right paddings of nested columns.
Columns constructed of Col global class and LGN supporting combo class. Where Col class holds global settings for columns and LGN defines width of the column (where N is a number 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 which defines width of column).
Use the spacing scale for components or sections. This scale is applied and used within all components and sections. Spacing available in the system:
2px
4px
8px
12px
16px
24px
32px
48px
64px
120px
Spacing classes represented with Stack, Inline, Indent, Inset, Section classes and G Stack, G Inline group classes. Use them to provide proper spacing across components, blocks and sections.
Stack is a global class which adds bottom margin. Bellow you'll find table of existing stack scale.
Inline is a global class which adds right margin. Bellow you'll find table of existing inline scale.
Indent is a global class which adds left margin. Bellow you'll find table of existing indent scale.
Inset is a global class which adds equal margin around the element. Bellow you'll find table of existing inset scale.
Group spacing such as G Stack and G Inline are global classes and used to add spacing inside of elements groups.
Uses flexbox (vertical direction) to provide space between group of elements.
Uses flexbox (horizontal direction) to provide space between group of elements.
With section classes you can set top and bottom margins for a whole section.
Copyright © Restful App | Designed by EGO
Powered by Webflow
