The Styleguide of
stanvision logo black
Typography
Buttons
Fa-icons
Colors
Classes
How to
Elements

Typography

HTML tags

H1 - Visual Scale

H2 - Visual Scale

H3 - Visual Scale

H4 - Visual Scale

H5 - Visual Scale
H6 - Visual Scale
Classes
H1 - Visual Scale
H2 - Visual Scale
H3 - Visual Scale
H4 - Visual Scale
H5 - Visual Scale
H6 - Visual Scale

Text Sizes

p-leading

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

p-body

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

p-small

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

p-tiny

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

subtitle

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

overline

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Weights

text-weight-thin

Sample text

text-weight-extra-light

Sample text

text-weight-light

Sample text

text-weight-normal

Sample text

text-weight-medium

Sample text

text-weight-semibold

Sample text

text-weight-bold

Sample text

text-weight-extra-bold

Sample text

text-weight-black

Sample text

Text Styles

text-strikethrough

Sample text

text-italic

Sample text

text-allcaps

Sample text

text-nowrap

Sample text

text-underline

Sample text

text-quote

Sample text

text-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-4lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-balanced

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Alignments

text-left

Sample text

text-center

Sample text

text-right

Sample text

Other HTML Tags

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
rich-text

This is an H1 heading inside rich text

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 an H2 heading inside rich text

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

This is an H3 heading inside 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.

This is an H4 heading inside rich text

This is an H5 heading inside rich text
This is an H6 heading inside rich text
  • Example 1
  • Example 3

‍

Buttons

бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон
бутон

Font Awesome icon

Note: Only the regular weight is upploaded. Add more if needed, preferably not more than 2 weights and only in woff2 format.
Note: The brand icons are in a Fontawesome kit called Brand icons. Add more if necessary, download and upload the font again.

Colors

Mode Colors

bg-background
text-primary
Sample text
bg-background
text-primary
Sample text
text-secondary
Sample text
text-secondary
Sample text
text-opacity
Sample text
text-opacity
Sample text

Neutral Colors

bg-black
text-black
Sample text
bg-grey-900
text-grey-900
Sample text
bg-grey-800
text-grey-800
Sample text
bg-grey-700
text-grey-700
Sample text
bg-grey-600
text-grey-600
Sample text
bg-grey-500
text-grey-500
Sample text
bg-grey-400
text-grey-400
Sample text
bg-grey-300
text-grey-300
Sample text
bg-grey-200
text-grey-200
Sample text
bg-grey-100
text-grey-100
Sample text
bg-grey-50
text-grey-50
Sample text
bg-white
text-white
Sample text

Functional Colors

Red

bg-red-900
text-red-900
Sample text
bg-red-600
text-red-600
Sample text
bg-red-500
text-red-500
Sample text
bg-red-100
text-red-500
Sample text

Orange

bg-orange-900
text-orange-900
Sample text
bg-orange-500
text-orange-500
Sample text
bg-orange-200
text-orange-200
Sample text

Green

bg-green-900
text-green-900
Sample text
bg-green-700
text-green-700
Sample text
bg-green-500
text-green-500
Sample text
bg-green-100
text-green-100
Sample text

Blue

bg-blue-900
text-blue-900
Sample text
bg-blue-600
text-blue-600
Sample text
bg-blue-500
text-blue-500
Sample text
bg-blue-100
text-blue-100
Sample text

Elevation

elevation
elevation.two
elevation.three
elevation.four

Useful utility classes

Containers

container-small
container-medium
container-large
container-none

Global padding

global-padding

Spacings

spacing-0
spacing-2
spacing-4
spacing-8
spacing-12
spacing-16
spacing-24
spacing-32
spacing-40
spacing-48
spacing-56
spacing-64
spacing-72
spacing-80
spacing-96
spacing-120
spacing-160
spacing-240
spacing-320

Border radiuses

br-0
br-2
br-4
br-6
br-8
br-10
br-12
br-16
br-20
br-24
br-32
br-40
br-pill

Other utility classes

img-full
img-full.absolute
img-full.cover
img-full.contain
icon-embed
hidden
This element is hidden
hidden-desktop
This element is hidden only on desktop
hidden-tablet
This element is hidden only on tablet
hidden-mobile
This element is hidden only on mobile
overflow-visible
overflow-hidden
overflow-scroll
overflow-auto
pointer-events-on
pointer-events-off
box-padding
box-padding.smaller

How to Structure your page content?

main-wrapper - Use a <main> tag

section__name - Use a <section> tag + add a global-padding class to it for global left and right margins

container-small / medium / large - It's ONLY use is for giving max width of the container

hero__parent

hero__child

*For top bottom spacings, use the spacing blocks.

BEM naming convention

Block Element Modifier

button - Block - parent element class

button__arrow - Element - child element class

button text-blue-600 - Modifier - changes the style of the block

Elements

Form

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

Accordion - One open at a time - start with first open

Question 1
plus

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

Question 2
plus

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

NOTE: If dynamic, the cms item must be the accordion__item.
NOTE: If multiple open at a time, delete the unnecessary lines marked in the script.
NOTE: If all closed initially, delete the unnecessary lines marked in the script.

Modal

Open modal

Marquee

Share to social media

Swiper JS

бутон
бутон
NOTE: If dynamic, the cms wrapper must be the swiper-container, then follow the hierarchy.
NOTE: Don't change the classes and the hierarchy: swiper-container / swiper-wrapper / swiper-slide . Add a combo class for different styling.
NOTE: Don't change the classes and the structure: slider-main_button.swiper-prev / slider-main_button.swiper-next