Shipium Style Guide

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

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

text-size-medium

text-size-regular

text-size-small

text-size-tiny

Text Weights

Text weight classes when typography weight doesn't match the default HTML tag.

• text-weight-xbold (800)
• text-weight-bold (700)
• text-weight-semibold (600)
• text-weight-medium (500)
• text-weight-normal (400)
• text-weight-light (300)

Text Styles

Text style classes when typography style doesn't match the default HTML tag.

• text-style-italic
• text-style-strikethrough
• text-style-allcaps
• text-style-nowrap
• text-style-quote
• text-style-link

Text Alignment

Text alignment classes when typography alignment doesn't match the default HTML tag.

• text-align-left
• text-align-center
• text-align-right

Text Wrap

• text-wrap-normal
• text-wrap-balance
• text-wrap-pretty

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a block quote

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

• 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

• color-scheme-2

Scheme 2

Color Modes

• color-mode

Base

• color-mode is-white

White

• color-mode is-dark

Dark

Background Color

• bg-white

White

• bg-petrol-50

Petrol 50

• bg-petrol-200

Petrol 200

• bg-petrol-500

Petrol 500

• bg-petrol-800

Petrol 800

• bg-petrol-950

Petrol 950

• bg-mint-900

Mint 900

Text Color

• text-white

White

• text-petrol-100

Petrol 100

• text-petrol-50

Petrol 50

• text-petrol-200

Petrol 200

• text-petrol-950

Petrol 950

• text-mint-500

Mint 500

• text-mint-700

Mint 700

• text-mint-900

Mint 900

• text-accent-mint

Accent Mint

• text-accent-pink

Accent Pink

• text-accent-yellow

Accent Yellow

• text-cta

CTA

Gradients

• gradient

Petrol 950 to Petrol 50

• gradient

Petrol 800 to Petrol 50

UI Elements

Buttons

• button
  Button

• button is-small
  Button

• button is-secondary
  Button

• button is-cta
  Button

Buttons With Icons

• button is-icon
  Button

Other UI Elements

• tab-link
  Monthly Yearly

• category-filter-link
  View all Category one

• slider-arrow
  View all Category one

Tags

Linkable labels that categorize or highlight information on cards, products and posts

• tag
• tag is-text
• tag is-alternate

Form Elements

• form_field-label
• form_input
• is-text-area
• form_checkbox
• form_radio

Icons (Image)

icon-height-xxsmall

icon-height-xsmall

icon-height-small

icon-height-medium

icon-height-large

icon-height-xlarge

icon-height-custom1

Radius

Large: Large radius is applied to elements which are 1 or 2 columns in width.

Medium: Medium radius is applied to elements which are between 2 and 3 columns in width.

Small: Small radius is applied to elements which are smaller than 4 columns in width.

Effects

Box Shadows: Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

• page-wrapper
• main-wrapper
• container-small
• container-medium
• container-large
• padding-global
• padding-section-small
• padding-section-medium
• padding-section-large

Max Widths

Use the max-width CSS property to contain inner content to a maximum width.

• max-width-full
• max-width-full-tablet
• max-width-full-mobile-landscape
• max-width-full-mobile-portrait
• max-width-xxlarge
• max-width-xlarge

Paddings

Direction Classes

• padding-bottom
• padding-top

Size Classes

• padding-0
• padding-tiny
• padding-xxsmall
• padding-xsmall
• padding-small

Margins

Direction Classes

• margin-bottom
• margin-top

Size Classes

• margin-0
• margin-tiny
• margin-xxsmall
• margin-xsmall

Spacers

Unified spacer system for the project.

• spacer-tiny
• spacer-xxsmall
• spacer-xsmall

Utility Classes

Useful utility classes we like to use in most of our projects to build faster.

• hide
  This element is hidden

• overflow-visible

• overflow-hidden

• overflow-auto