shuaijiao.org Brand Design System

HTML Structure

How the <div> should be structured after <container>

h# stands for heading

Always have a h# right before a .content-block or inside a .content-block to prevent padding issues for para

Top Level (required)

section > container > .wrapper

Basic Centered Single-piece Content

.wrapper > h# + .content-block

.content-block > para

or

.wrapper > .content-block > h# + para

Multi Content

.wrapper > h# + .content-wrap-flex > .content-block + .content-block

.content-block > h# + para

Typography

Pagination Hack
‍
https://kevinhaag.notion.site/Add-numbered-page-links-to-your-CMS-Collection-Lists-in-Webflow-8f264f97dbcd47848b65314320ac3123

Font

Paragraph - Default padding-bottom: 10px;
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.

Text Block - This is some text inside of a div block. No padding or margins
All headings have margin-top-bottom: 10px;

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is some text inside of a div block.

Paragraph

Paragraph - Default padding-bottom: 10px;
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.

Text Block

Text Block - This is some text inside of a div block. No padding or margins

Text Link

Text Link

Block Quote

This is a Block Quote
This is some text inside of a div block.

Rich Text Block

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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript