Style Guide

Last updated: Apr 2024

Introducing ThePost, for small publishing businesses. Crafted with precision using Mast CSS framework ↗️, this Webflow template offers an efficient solution for creating a functional and visually captivating blog website. Designed with adaptability in mind, 'ThePost' boasts a versatile and easy-to-edit category color system, allowing you to effortlessly align your digital identity with your brand. Elevate your online reach and enhance your storytelling capabilities with this user-friendly template, tailor-made for the modern publishing landscape.

TypographyColorComponentsUtilitiesLayout

Typography

Fonts

Playfair Display

Headlines & Buttons

Type: Sans Serif
Weights: 400, 500

Manrope

Paragraph & Text

Type: Sans Serif
Weights: 400

Cutive Mono

Headlines & Links

Type: Mono
Weights: 400

Headings

H1 Headings

Htlm

H2 Headings

Htlm

H3 Headings

Htlm

H4 Headings

Htlm

HTML Headings Tags

HTML tags define default Heading styles.

h1
Class
h2
Class
h3
Class
h4
Class

Heading Classes

Heading classes when typography style doesn't match the default HTML tag.

Body

paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

All Unordered Lists
  • Example Unordered List
  • Example Unordered List
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List

Text HTML Tags

HTML tags define default text styles.

Paragraph 1.5rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph 1.25rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Paragraph 0.9rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Eyebrow
Lorem Ipsum
Blog 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

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

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Text Styles

Text sizes classes when typography size doesn't match the default HTML tag.

Rich Text

Colors

Color backgrounds

Red

#972E1d
U BG Red

Green

#565A56
U BG Green

Yellow

#929692
U BG Yellow

Purple

#F5F6F5
U BG Purple

Blue

#F5F6F5
U BG Blue

Black

#050501
U BG Black

White

white
U BG White

Color Swatches

Easily customize colors using variables. To change a container's background color, simply apply the class u-bg-'yourcolor'.

Text

Aa

Text Black

#1d1c1a
U Text Black
Aa

Text White

white
U Text White

Text Color

To change text color, simply apply the class u-bg-'yourcolor' to a container or text element.

Components

Button

Text

Text Link

All Links
Button

Default

Button
Button

Secondary

Button
CC Secondary
Text

Text Link Light

U Text White
Button

Default White

Button
CC White
Button

Secondary White

Button
CC Secondary

Form

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

Card

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Utilities

Utilities classes use a 'U' prefix so they are quickly identifiable.

U {Class Name}

Margin

Top

U Margin Top 0
margin-top: 0;
U Margin Top 1em
margin-top: 1em;
U Margin Top 2em
margin-top: 2em;
U Margin Top 3em
margin-top: 3em;
U Margin Top Auto
margin-top: auto;

Bottom

U Margin Bottom 0
margin-bottom: 0;
U Margin Bottom 1em
margin-bottom: 1em;
U Margin Bottom 2em
margin-bottom: 2em;
U Margin Bottom 3em
margin-bottom: 3em;

Other

U Margin 0
margin: 0;
U Margin Lateral Auto
margin: 0 auto; (centers element))
U Margin Right 1em
margin-right: 1em;
U Margin Left 1em
margin-left: 1em;

Padding

Top

U Padding Top 0
padding-top: 0;
U Padding Top 1em
padding-top: 1em;
U Padding Top 2em
padding-top: 2em;
U Padding Top 3em
padding-top: 3em;

Bottom

U Padding Bottom 0
padding-bottom: 0;
U Padding Bottom 1em
padding-bottom: 1em;
U Padding Bottom 2em
padding-bottom: 2em;
U Padding Bottom 3em
padding-bottom: 3em;

Other

U Padding 0
padding: 0;
U Padding 1em
padding: 1em;

Alignment

U Text Center
text-align: center;
U Text Right
text-align: right;

Overflow

U Overflow Hidden
overflow: hidden;
U Overflow Visible
overflow: visible;

Display + position

U Display None
display: none;
U Display Block
display: block;
U Display Flex
display: flex;
U Position Relative
position: relative;

Size

U Width 100
width: 100%;
U Height 100
height: 100%;

Helpers

U Image Cover
Multiple properties
U Link Cover
Multiple properties
Open link
U Aspect 1x1
Multiple properties
U Z-Index 1
Multiple properties
U Screen Reader Only
Multiple properties
Screen Reader Only
U Border
Multiple properties

Layout

Section

Section

Container

Container

12 Columns Grid

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

12 Columns Grid - Desktop

Column
Col Large 1
Column
Col Large 11
Column
Col Large 2
Column
Col Large 10
Column
Col Large 3
Column
Col Large 9
Column
Col Large 4
Column
Col Large 8
Column
Col Large 5
Column
Col Large 7
col
Col Large 6
col
Col Large 6
Column
Col Large 12

12 Columns Grid - Tablet

Column
Col Medium 1
Column
Col Medium 11
Column
Col Medium 2
Column
Col Medium 10
Column
Col Medium 3
Column
Col Medium 9
Column
Col Medium 4
Column
Col Medium 8
Column
Col Medium 5
Column
Col Medium 7
Column
Col Medium 6
Column
Col Medium 6
Column
Col Medium 12

12 Columns Grid - Mobile Landscape

Column
Col Small 1
Column
Col Small 11
Column
Col Small 2
Column
Col Small 10
Column
Col Small 3
Column
Col Small 9
Column
Col Small 4
Column
Col Small 8
Column
Col Small 5
Column
Col Small 7
Column
Col Small 6
Column
Col Small 6
Column
Col Small 12

12 Columns Grid - Mobile Portrait

Column
Col XSmall 1
Column
Col XSmall 11
Column
Col XSmall 2
Column
Col XSmall 10
Column
Col XSmall 3
Column
Col XSmall 9
Column
Col XSmall 4
Column
Col XSmall 8
Column
Col XSmall 5
Column
Col XSmall 7
Column
Col XSmall 6
Column
Col XSmall 6
Column
Col XSmall 12

Align columns

Row
Row Align Center
Column
Column
Column
Row
Row Align End
Column
Column
Column

Justify columns

Row
Row Justify End
Column
Column
Row
Row Justify Center
Column
Column
Row
Row Justify Around
Column
Column
Row
Row Justify Between
Column
Column

Reorder columns

Column
Col Large First
Column
Col Medium First
Column
Col Small First
Column
Col XSmall First
Column
Col Large Last
Column
Col Medium Last
Column
Col Small Last
Column
Col XSmall Last

Other columns modifiers

Shrink Column

Column
Col Shrink
Column

Gutterless Column

Row
Row No Gutters
Column
Col No Gutters
Column
Col No Gutters
Column
Col No Gutters
Column
Col No Gutters
Home page
by emicorneau
All Blogs
→
Most Popular
→
Featured Blogs
→
Business
Politics
Sports
Technology
World
Powered by Webflow
Style Guide
/
Licenses
/
Changelog
/
Instructions
Instagram icon
Linkedin icon
Facebook icon
Buy $49 USD