Clubup.com

ClubUp.com Design System

Collection of design elements utilized for Clubup.com sitewide design.

01. Colors
The following are classes specific to designating background and text colors to your elements.
Background colors
.fill--bg--black
.fill--bg--grey
.fill--bg--navy
.fill--bg--teal
.fill--bg--light--blue
.fill--bg--soft--grey
.fill--bg--white
Text colors
.fill--text--black
.fill--text--navy
.fill--text--green
.fill--text--grey
.fill--text--soft--grey
.fill--text--white
02. Typography
Maintaining a structured typographical scale helps your site look and feel consistent across all devices. The following as the baseline styles for your website, feel free to add more as you go.

*Use class .italic to italicized all global text styles
*Use class .center to align-center all global text styles
.heading--xxl
The quick brown fox jumps over the lazy dog.
.heading--xl
The quick brown fox jumps over the lazy dog.
.heading--l
The quick brown fox jumps over the lazy dog.
.heading--m
The quick brown fox jumps over the lazy dog.
.heading--s
The quick brown fox jumps over the lazy dog.
.heading--xs
The quick brown fox jumps over the lazy dog.
.paragraph--l
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.
.paragraph--m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.
.paragraph--s
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id orci in velit cursus consequat. Donec elementum euismod maximus. Nulla purus mi, tempus et dui vitae, auctor tincidunt dolor.
.label
Lorem ipsum dolor sit amet
.rtf

Heading 1

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.

Heading 2

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.

Heading 3

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.

Heading 4

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.

Heading 5

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.

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.

  1. 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.
  2. 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.
  3. 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.

  • 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.
  • 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.
  • 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.
.List .Numbered
  • 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.
.list .bulleted
  • 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.
03. Sections & Containers
The <section> represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it.

Containers help define how you want the content within a section to behave, whether you want it to be fluid or fixed max-width. They also center your content within your section.
.section
.container--fluid
.container--1440
.container--1280
.container--960
04. Spacing
The following styles apply for all different types of margins and paddings across your project. Paddings are defined at the container level. Sizers help you reduce the size of your content to match your design needs while keeping everything responsive. Spacers are bottom paddings to establish a seamless vertical cadence for your content.
.padding--xl
.padding--xl {margin-top: 120px; margin-bottom: 120px;}
.padding--l
.padding--l {margin-top: 80px; margin-bottom: 80px;}
.padding--m
.padding--m {margin-top: 64px; margin-bottom: 64px;}
.padding--s
.padding--s {margin-top: 40px; margin-bottom: 40px;}
.padding--xs
.padding--xs {margin-top: 24px; margin-bottom: 24px;}
.width--90
.width--90 {width: 90%;}
.width--80
.width--80 {width: 80%;}
.width--70
.width--70 {width: 70%;}
.width--60
.width--60 {width: 60%;}
.width--50
.width--50 {width: 50%;}
.width--40
.width--40 {width: 40%;}
.width--30
.width--30 {width: 30%;}
.width--20
.width--20 {width: 20%;}
.width--10
.width--10 {width: 10%;}
.margin-b--80
.margin-b--80 {margin-bottom: 80px;}
.margin-b--72
.margin-b--72 {margin-bottom: 72px;}
.margin-b--64
.margin-b--64 {margin-bottom: 64px;}
.margin-b--56
.margin-b--56 {margin-bottom: 56px;}
.margin-b--48
.margin-b--48 {margin-bottom: 48px;}
.margin-b--40
.margin-b--40 {margin-bottom: 40px;}
.margin-b--32
.margin-b--32 {margin-bottom: 32px;}
.margin-b--24
.margin-b--24 {margin-bottom: 24px;}
.margin-b--16
.margin-b--16 {margin-bottom: 16px;}
.margin-b--8
.margin-b--8 {margin-bottom: 8px;}
05. Forms
Webflow forms are self hosted, this styling applies only for WF default forms. If you need to implement a third party form, please refer to their specific documentation.
.form
Arrow Down
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
06. Components
A library of reusable components to help you build your website.
.btn
Button
.btn .invert
Button
.btn .secondary
Button
.btn .invert .secondary
Button
.btn .Tertiary
Button
.btn .innactive
Button
.link .strikethru
Text Link
.img--16-9
.Img--4-3
.Img--1-1