Eclipse SG
The foundational framework for every web project, crafted in full compliance with Tailwind CSS guidelines.
Brand
Full
Square
Brand Colors (replace in Theme Variables)
Tailwind CSS Color Generator
Instantly create stunning color scales by entering a base color or hitting the spacebar.
Font Family
Inter
Ag
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Switzer (Brand & Headings)
A@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()
Font Size
font-weight-400
9XL
font-weight-500
9XL
font-weight-600
9XL
font-weight-700
9XL
font-weight-400
8XL
font-weight-500
8XL
font-weight-600
8XL
font-weight-700
8XL
font-weight-400
7XL
font-weight-500
7XL
font-weight-600
7XL
font-weight-700
7XL
font-weight-400
6XL
font-weight-500
6XL
font-weight-600
6XL
font-weight-700
6XL
font-weight-400
5XL
font-weight-500
5XL
font-weight-600
5XL
font-weight-700
5XL
font-weight-400
4XL
font-weight-500
4XL
font-weight-600
4XL
font-weight-700
4XL
font-weight-400
3XL
font-weight-500
3XL
font-weight-600
3XL
font-weight-700
3XL
font-weight-400
2XL
font-weight-500
2XL
font-weight-600
2XL
font-weight-700
2XL
font-weight-400
XL
font-weight-500
XL
font-weight-600
XL
font-weight-700
XL
font-weight-400
LG
font-weight-500
LG
font-weight-600
LG
font-weight-700
LG
font-weight-400
base
font-weight-500
base
font-weight-600
base
font-weight-700
base
font-weight-400
sm
font-weight-500
sm
font-weight-600
sm
font-weight-700
sm
font-weight-400
xs
font-weight-500
xs
font-weight-600
xs
font-weight-700
xs
font-weight-400
xxs
font-weight-500
xxs
font-weight-600
xxs
font-weight-700
xxs
Headings
Switzer
H1
Switzer
H2
Switzer
H3
Switzer
H4
Switzer
H5
Switzer
H6
Paragraph
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Rich Text
Rich Text
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Cards
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
USA
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
USA
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
USA
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
3.52 min
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
3.52 min
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
3.52 min
Important
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Images
Full
Normal
Background Video
Background Video
YouTube Video
YouTube
Tags
Tag
Default
Normal
Error
Alert
Success
Important
Spacer
sm - 0.5 rem
base - 1 rem
md - 1.5 rem
lg - 2 rem
xl - 4 rem
Grids
6-col
6-col
6-col
6-col
6-col
6-col
5-col
5-col
5-col
5-col
5-col
4-col
4-col
4-col
4-col
3-col
3-col
3-col
2-col
2-col
Flex
h-flex
v-flex
Icons
sm
base
md
lg
xl
Smootify Icons App
With Smootify Icons, you’ll have instant access to 8 of the best icon libraries on the web, including Google Material Icons, Iconoir, Hero Icons, and Lucide. Simply choose your favorite library, pick the icon you need, and the app will place it directly onto your Webflow canvas—right where you selected in the Navigator. You can then easily customize its color and size, making it a seamless fit for your design.
Forms
form
Accordion
accordion
What is Eclipse SG?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
What is Eclipse SG?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
What is Eclipse SG?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tabs
tabs
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Slider
slider