version 1.1

Uncode Styleguide

inspired by client first & our own work method.

structure classes

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-large
padding-section-larger
padding-section-medium
padding-section-tiny
btn-group

grids

2col_grid
3col_grid
4col_grid
5col_grid

html tags

H1

Dit is een heading

H2

Dit is een heading

H3

Dit is een heading

H4

Dit is een heading

other HTML tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

H2
Text Link
All quotes

Dit is een heading

All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

text sizes

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present.

text-size-small

Sample text is being used as a placeholder for real text that is normally present.

text-size-tiny

Sample text is being used as a placeholder for real text that is normally present.

colors

background colors

bg-color-black--700
bg-color-black--600
bg-color-black--500
bg-color-black--400
bg-color-black--300
bg-color-black--200
bg-color-black--100
bg-color-black--50

text colors

color-black--700
This is some text inside of a div block.
color-black--600
This is some text inside of a div block.
color-black--500
This is some text inside of a div block.
color-black--400
This is some text inside of a div block.
color-black--300
This is some text inside of a div block.
color-black--200
This is some text inside of a div block.
color-white
This is some text inside of a div block.

paddings

direction classes

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

size classes

padding-0
padding-tiny
padding-xxmedium
padding-xmedium
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge

margins

directional classes

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

margin size classes

marin-0
marin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge

webflow elements

form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
rich-text

What’s a Rich Text element?

What’s a Rich Text element?

‍

What’s a Rich Text element?

‍

What’s a Rich Text element?

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.

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

  • This is a list item
  • This is a list item
  • This is a list item

custom code classes

white-text-outline

custom code classes

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.

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.

interaction classes

fade-in-up
[element-trigger]-[interaction]
interaction_fade-in-up
[element-trigger]-[interaction]
[element-trigger]-[interaction]