Style Guide
Edit the following Elements directly in this Style Guide. All changes will be reflected across the Website. This Website uses the Client-First Naming Conventions by Finsweet.
Typography
Here you can find all the Typography Classes and HTML Tags that are used in this Website.
This is an H1 Heading
This is an H2 Heading
This is an H3 Heading
This is an H4 Heading
This is an H5 Heading
This is an H6 Heading
This is an H1 Heading
This is an H2 Heading
This is an H3 Heading
This is an H4 Heading
This is an H5 Heading
This is an H6 Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div block.
- This is some text inside of a div 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
- Item 1
- Item 2
- Item 3
Unordered list
- Item A
- Item B
- Item C
Bold text
Emphasis
Superscript
Subscript
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Colors
In this Section you can find all the Colors used across the Website. To swap the Colors out with your own Brand Colors, it is recommended to do so directly in the Variables Menu (Shortcut V)
Icons
To keep all Icons consistent across the Website we used the following classes to set their sizes. Icon-height changes only the height of the icon, while icon-1x1 changes both the width and the height.
Form Elements
Here you can find and edit all the different Form Elements used across the Website.
Shadows
Here you can find a selection of drop shadow combo classes that can be applied to any element on the website.
UI Elements
Here you can find the core UI Elements used across the Site.
This is a Card Heading
This is a Card Heading
Animation Classes
Here you can find a set of animation combo classes that makes applying consistent Interactions easier than ever before. Simply wrap what you animate into a new div or add the combo class to an already existing element and the animation will be applied automatically.
Sections
Here you can find Classes for differently sized Sections. To change the size of an individual section, add one of the following combo classes to the section class. Example: section padding-section-large
Containers
Here you can find Classes for differently sized Containers. To change the size of an individual container, add one of the following combo classes to the container class. Example: container container-large
Grids
This Website uses CSSĀ Grids to create different Layouts. The following Grid Classes are fully responsive and look great across all Breakpoints.
Spacers
Spacers are used across the Website to increase the space between 2 Elements. Utilizing these Classes helps in keeping the Spacing consistent throughout the Project.
Padding Classes
The Padding Classes consist of 2 pieces. The Main padding-[Direction] and the padding-[size]. Find all available padding sizes below.
Margin Classes
The Margin Classes consist of 2 pieces. The Main margin-[direction] and the margin-[size]. Find all available padding sizes below.