# Style guide

This project utilizes Client-first as style system. You can [read the docs here](https://finsweet.com/client-first).

Check the [instructions page](/content/template/style-guide#/index.html) for a basic tutorial about this template.

## Structure

### Core

- page-wrapper
- main-wrapper
- padding-global

### Container

- container-tiny
- container-xxsmall
- container-xsmall
- container-small
- container-medium
- container-large
- container-full

### Max Width

- max-width-xxsmall
- max-width-xsmall
- max-width-small
- max-width-medium
- max-width-large
- max-width-xlarge
- max-width-xxlarge
- max-width-full-mobile
- max-width-full-tablet
- max-width-full

### Typography

#### Heading

- **Heading 1**
- heading-style-h1

# h1

h1

- **Heading 2**
- heading-style-h2

## h2

h2

- **Heading 3**
- heading-style-h3

### h3

h3

- **Heading 4**
- heading-style-h4

#### h4

h4

- **Heading 5**
- heading-style-h5

##### h5

h5

- **Heading 6**
- heading-style-h6

###### h6

h6

### Other elements

#### Paragraph

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.

#### Block Quote

> "The **Block quote** element lets you add and style a quotation to make it stand out from the rest of your text."

#### Unordered Lists

- Sample text is being used as a placeholder.
- Sample text is being used as a placeholder.
- Sample text is being used as a placeholder.

#### Ordered Lists

1. Sample text is being used as a placeholder.
2. Sample text is being used as a placeholder.
3. Sample text is being used as a placeholder.

#### Link

[Text Link](/content/template/style-guide#/index.html)

### Text size

- **text-size-large**
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- **text-size-medium**
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

- **text-size-regular**
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

- **text-size-small**
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

- **text-size-tiny**
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit nullam suscipit rhoncus.

### Text style

- **text-style-label**
  
  Label

- **text-style-strikethrough**
  
  Strikethrough

- **text-style-italic**
  
  Italic

- **text-style-muted**
  
  Muted

- **text-style-all-caps**
  
  All caps

- **text-style-nowrap**
  
  nowrap

- **text-style-link**
  
  Link

### Text Weight

- **text-weight-black**
  
  Black

- **text-weight-xbold**
  
  Xbold

- **text-weight-bold**
  
  Bold

- **text-weight-semibold**
  
  Semibold

- **text-weight-medium**
  
  Medium

- **text-weight-normal**
  
  Normal

- **text-weight-light**
  
  Text light

- **text-weight-xlight**
  
  Text xlight

- **text-weight-thin**
  
  Text thin

### Text Alignment

- **text-align-left**
  
  Left

- **text-align-center**
  
  Center

- **text-align-right**
  
  Right

### Rich Text

#### Text Rich Text

# H1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

**The rich text element** allows you to create and [format headings](https://vimeo.com/526958225), 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.

Caption text

- Sample text is being used as a placeholder.
- Sample text is being used as a placeholder.
- Sample text is being used as a placeholder.

1. Sample text is being used as a placeholder.
2. Sample text is being used as a placeholder.
3. Sample text is being used as a placeholder.

> 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.

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.

## Spacing

### Section

- padding-section-xsmall
- padding-section-small
- padding-section-medium
- padding-section-large
- padding-section-xlarge
- padding-section-xxlarge

### Spacer

- spacer-tiny
- spacer-xxsmall
- spacer-xsmall
- spacer-small
- spacer-medium
- spacer-large
- spacer-xlarge
- spacer-xxlarge
- spacer-huge
- spacer-xhuge
- spacer-xxhuge
- spacer-custom-1
- spacer-custom-2
- spacer-custom-3

## Utility

### Visibility

- hide
- hide-tablet
- hide-mobile-landscape
- hide-mobile-portrait
- overflow-visible
- overflow-hidden
- overflow-scroll
- overflow-auto

### Layout

- display-block
- display-flex
- display-inline-block
- display-inline

### Aspect ratio

- aspect-ratio-square
- aspect-ratio-portrait
- aspect-ratio-landscape
- aspect-ratio-widescreen

### Others

- pointer-events-auto
- pointer-events-none
- layer
- spacing-clean
- align-center
- z-index-1
- z-index-2

## Elements

### Icons

- **icon-height-small**

- **icon-height-medium**

- **icon-height-large**

- **icon-height-xlarge**