Shift - Style Guide

Elements & Classes
All about the copy

Text Styleguide

Far far away, behind the word mountains, far from the countries

h1-jumbo

Far far away, behind the word mountains, far from the countries

h1

Far far away, behind the word mountains.

h2-jumbo

Far far away, behind the word mountains, far from the countries

h2

Far far away, behind the word mountains, far from the countries

h3

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.

h4
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
h5
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.
h6

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Paragraph (Basic)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Text--XL (1.5em)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Text--XL (1.5em)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Text--lg (1.25em)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Text--lg .opac--60

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Text--med (.75em)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

Text--med .opac--60

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

text--sm (.87em)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

text--sm .opac--60

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

text--sm .opac--30

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

text--xs (.69em)

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about.

text--xs .opac--60
A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences.
Block Quote
  • A small river named Duden
  • It is a paradisematic country
  • Which roasted parts
UnOrdered List
A small river named Duden flows
caption__text (.75em)

What’s a Rich Text element?

  1. Begin helping her learn self-soothing techniques using toys during her naps in the daytime.
  2. Put two or three new toys in the cribs. Rattles, mobiles, blankets, or stuffed toys to name a few. You want your baby to feel comfortable in their crib. Noise making toys can serve as an auditory cue for sleep. Blankets that smell like mama or papa can be a sensory cue for calm.

Static and dynamic content editing content editing

  • When your baby cries that first night, take a chair and sit next to her crib. Don’t touch her (this is hard) and just sit. You can sing softly, but it is best if you are quiet.

How to customize formatting for each rich text customize formatting for each 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.

What’s a 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.

Static and dynamic content editing

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!

How to customize formatting for each 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.

Rich Text - reading

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!

Rich Text - reading - intro
Click here or Click there, AM I RIGHT?

Buttons (Normal or Big)

Call to Action
.Button (Default Blue)
Call to Action
.Button .button-lg (Default Blue)
Call to Action
.button .button-outline-light
Call to Action
.Button .button-Lg .BTN-OUTLINE-light
Call to Action
.Button .button-white
Call to Action
.btn-Big .btn-white
Call to Action
.button .button-outline-dark
Call to Action
.Button .button-Lg .BTN-OUTLINE-DARK
Anyone need labels?

Tags

default label
Label (Default Blue)
label
.label-aqua
Label
.LABEL-Orange
label
.LABEL-Red
Label
.LABEL-Green
LAbel
.LABEL-Cyan
label
.Label-pink
Label
.label-grey
Headlines need order as well!

Headline Block

small caption

Doing nothing is hard, you never know when you're done.

Headline-block--50
small caption

Maybe you should eat some makeup so you can be pretty on the inside too.

Headline-block--60
small caption

One advantage of talking to yourself is that you know at least somebody's listening.

Headline-block--75
hilarious

Is it Hilarious When Women Eat?

Explore
.CARD .CARD1-CONTENT
Introducing

5 Crazy Recent News Stories

Explore
.card .card2-content
Trending

Alton Attorney Accidentally Sues Himself

Explore
.CARD .CARD3-CONTENT
Quiz

Quiz: What Should Your Tinder Bio Be?

Explore
.article
FOOD

45 Creative Coffee Shop and Names

Explore
.ARTICLE
Cryptomarket

5 Reasons Cryptocurrency Is Way Dumber Than You Thought. With real examples.

Explore
.ARTICLE
Other

Banana

$2

.product-card
Music

Speaker

$199

.PRODUCT-CARD
NBA Players

Headphones

$349

.PRODUCT-CARD

2.40

$991.24
ETH
-9.9%
.number-card .number-card-content1

34.3

$820.53
TNB
+15.2%
.NUMBER-CARD .NUMBER-CARD-CONTENT2

1902.1

$154,569
BTC
+932.1%
.NUMBER-CARD .NUMBER-CARD-CONTENT3

994.2

$238.89
ENG
+3.2%
.NUMBER-CARD .NUMBER-CARD-CONTENT4
.big-article

Mary Ortega

fashion blogger

Love basketball, hiking, work in the legal field, and my best friend is a gold fish.

.Profile-card-big

Mary Ortega

Fashion Blogger

Love basketball, hiking, work in the legal field, and my best friend is a gold fish. 

Send Message
.profile-card

Mary Ortega

Fashion Blogger

Love basketball, hiking, work in the legal field, and my best friend is a gold fish.

.fullpic-profile
Music

Quiz: What Should Your Tinder Bio Be?

Marc Norris
.article .article-1-Content
Facts

Statistics show that teen pregnancy drops off significantly after age 25.

Tom Jordan
.ARTICLE .ARTICLE-2-CONTENT
Business

Hot to succeed in business, easily.

Johnny Logan
.ARTICLE .ARTICLE-3-CONTENT
Facts

Everything known about women.

Jack Gutierrez
.ARTICLE .ARTICLE-4-CONTENT
Funny

Eating people is wrong, always.

Billy Fuller
.ARTICLE .ARTICLE-5-CONTENT

Hero

Introducing

Chris Powell

A transformation specialist with a perfect track record.

Explore More
.Hero1
Centered
Let me present you

Desert Walks

Biggest photo pack focusing only on people walking in the desert. I know, crazy.

Explore More
.Hero2
Left Aligned

Forms

.signup-form

Navigation / Menu

Colors via Global Colors

.SWATCH-BLOCK-BIG
#1991EB
.SWATCH-BLOCK-BIG
.2nd--SWATCH--100
#3023ae
.SWATCH-BLOCK-BIG
.3rD--SWATCH--100
#39b54a
.SWATCH-BLOCK-BIG
.4th--SWATCH-100
#c5d0de
.SWATCH-BLOCK-BIG
.4th--SWATCH-100
#c5d0de

Alerts

Get ready for your flight! Boarding starts at 9:45AM.
.alert .positive-alert
Hey man! Go check out janlosert store for more amazing products!
.alert .neutral-alert
Ou snap! Seems like there is a problem with our server.
.alert .warning-alert
Damn... What the hell have you done.
.alert .error-alert

Labels

default label
.label
Green Label
.LABEL--green
blue Label
.LABEL--blue
This one is orange
.LABEL--orange
gold label
.LABEL--gold
grey label
.LABEL--Grey

Social Buttons

.social-icon
.icon-facebook
.SOCIAL-ICON
.ICON-twitter
.SOCIAL-ICON
.ICON-Instagram
.SOCIAL-ICON
.ICON-googleplus
.SOCIAL-ICON
.ICON-linkedin
.SOCIAL-ICON
.ICON-Pinterest