Colors

Neutral Colors

White

#ffffff

Haze

#f8f8f9

Border

#f8f8f9

Paragraph

#737373

Dark Grey

#26282d

Black

#000000

APG Orange

#f16334

Deep Pink

#e854a1

Red

#f63535

Royal Blue

#1f62f2

Lime Green

#42ae13
Typography

Headings

Heading H1 - Aa Bb Cc Dd

Heading 1 - 48px/60px

Heading H2 - Aa Bb Cc Dd

Heading 2 - 36px/46px

Heading H3 - Aa Bb Cc Dd

Heading 3 - 24px/32px

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/28px
Heading H5 - Aa Bb Cc Dd
Heading 5 - 18px/24px
Heading H6 - Aa Bb Cc Dd
Heading 6 - 16px/22px

Paragraphs

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.

Paragraph Default - 16px/26px

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.

Paragraph Small - 14px/24px

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.

Paragraph Large - 20px/32px

Miscellaneous Elements

Lorem ipsum dolor sit amet

Bold Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Italic Text
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List
Rich Text Blocks

PV Rich Text

What’s a Rich Text element?

Static and dynamic content editing

How to customize formatting for each rich text

How to customize formatting for each rich text

How to customize formatting for each rich text
How to customize formatting for each rich text

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.

  • Line 1
  • Line 2
  • Line 2

Google Website

  1. Hi
Papervide
Media

Images

Image 80% height
Image - 225 px height
Image - 175px height
Image 50px
Image - circle
Image - 80% width
Image - 250px Height
Image 25 px
Image 200px width
Image - 80% width
image - 100% height
Image - 60% width
Buttons
Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large
Blocks

Section

Section - Hero - Section for the hero banner
Section - Section for all section

Containers

Container - Content: Primary Container
Container - Header: Container for Heading blocks

Div Block

Horizontal Wrapper - Primary Div Block
Vertical Wrapper - Primary Div Block
Div Block 40px padding
Cards

Products Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Products Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Products Card

Lorem Ipsum is simply dummy text of the printing and typesetting industry.