# Typography
## HTML Headings Tags
HTML tags define default Heading styles.
### All H1 Headings
# Heading 1
### All H2 Headings
## Heading 2
### All H3 Headings
### Heading 3
### All H4 Headings
#### Heading 4
### All H5 Headings
##### Heading 5
### All H6 Headings
###### Heading 6
## Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
- heading-style-h1
- Heading-style-h1
- heading-style-h2
- Heading-style-h2
- heading-style-h3
- Heading-style-h3
- heading-style-h4
- Heading-style-h4
- heading-style-h5
- Heading-style-h5
- heading-style-h6
- Heading-style-h6
## Other HTML Tags
HTML tags define default text styles.
### All 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.
### All Links
[All Links](https://pave.com/dev/style-guide#)
### All Block Quotes
> Block Quote
### All Unordered Lists
- No bullet list
- No bullet list
### All Ordered Lists
1. No bullet list
2. No bullet list
3. No bullet list
## Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
- text-size-large
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- text-size-medium
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- text-size-regular
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- text-size-small
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
- text-size-tiny
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
## Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
- text-weight-xbold
- text-weight-xbold (800)
- text-weight-bold
- text-weight-bold (700)
- text-weight-semibold
- text-weight-semibold (600)
- text-weight-medium
- text-weight-medium (500)
- text-weight-normal
- text-weight-normal (400)
- text-weight-light
- text-weight-light (300)
## Text Styles
Text style classes when typography style doesn't match the default HTML tag.
- text-style-italic
- text-style-italic
- text-style-strikethrough
- text-style-strikethrough
- text-style-allcaps
- text-style-allcaps
- text-style-nowrap
- text-style-nowrap
- text-style-quote
- text-style-quote
- text-style-link
- text-style-link
- text-style-2lines
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- text-style-3lines
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- text-style-muted
- text-style-muted
- text-style-tagline
- text-style-tagline
- text-color-white
- text-color-white
## Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
- text-align-left
- text-align-left
- text-align-center
- text-align-center
- text-align-right
- text-align-right
## Rich Text
### 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.
[This is a link inside of a rich text](https://relume.io/)
- List item
- List item
- List item
1. List item
2. List item
3. List item
Caption goes here
# Colors
## Color Schemes
Manage your colors easily with global color schemes simply adding the color scheme class to the section you want it applied to.
- color-scheme-1
- ##### Scheme 1
Text color
##### Scheme: Dark Blue
Foreground, Accent Color
##### Scheme: Light Blue
Foreground, Accent Color
##### Scheme: Dark Green
Foreground, Accent Color
# UI Elements
## Buttons
- button
- [Button](https://pave.com/dev/style-guide#)
- button
- is-small
- [Button](https://pave.com/dev/style-guide#)
- button
- is-secondary
- [Button](https://pave.com/dev/style-guide#)
- button
- is-link
- [Button](https://pave.com/dev/style-guide#)
To use on a dark background, simple use the add-on class is-alternate
- button
- is-alternate
- [Button](https://pave.com/dev/style-guide#)
## Buttons With Icons
- button
- is-icon
- [Button](https://pave.com/dev/style-guide#)
## Other UI Elements
- tab-link
- [Monthly](https://pave.com/dev/style-guide)
- [Yearly](https://pave.com/dev/style-guide#)
## Tags
Linkable labels that categorize or highlight information on cards, products and posts.
- tag
- Tag
## Form Elements
- form_field-label
- form_input
- .form_field-label
- form_input
- is-text-area
- .form_field-label
- form_input
- is-select-input
- .form_field-label
Select one...
First Choice
Second Choice
Third Choice
## Icons (Image)
- icon-height-xxsmall
-
- icon-height-xsmall
-
- icon-height-small
-
- icon-height-medium
-
- icon-height-large
-
- icon-height-xlarge
-
## Radius
### Radius Classes
- Extra Large
- Large
- Medium
- Small
## Effects
### Box Shadows
- shadow-xxsmall
- shadow-xsmall
- shadow-small
- shadow-medium
- shadow-large
- shadow-xlarge
- shadow-xxlarge
## Structure Classes
- page-wrapper
- main-wrapper
- container-small
- container-medium
- container-large
## Paddings
- padding-bottom
- padding-top
- padding-vertical
- padding-horizontal
- padding-left
- padding-right
## Margins
- margin-bottom
- margin-top
- margin-vertical
- margin-horizontal
- margin-left
- margin-right
## Utility Classes
- hide
- This element is hidden
- overflow-visible
- overflow-hidden
- overflow-auto
- overflow-scroll
- pointer-events-auto
- pointer-events-none
- layer
- spacing-clean
- align-center
- z-index-1
- z-index-2
- display-inlineflex
- margin-top-auto
- aspect-ratio-square
- aspect-ratio-portrait
- aspect-ratio-landscape
- aspect-ratio-widescreen
- inherit-color