Cards 2.0 Styleguide

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

Demotext för en paragraf

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

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.

Text20 .Text-20-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-16

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.

Text16 .Text-16-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-14

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.

TEXT14 .TEXT-14-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.

TEXT14 .TEXT-14-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.
Block Quote
  • A small river named Duden
  • It is a paradisematic country
  • Which roasted parts
UnOrdered List
A small river named Duden flows
Link (Default)
Link (Default)
A small river named Duden flows
Tagline (Default)

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.

A link

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.

RICHTEXT
Click here or Click there, AM I RIGHT?

Buttons (Normal or Big)

Far far away
Btn (Default Blue)
Far far away
Btn-Big (Default Blue)
Far far away
.btn-outline-light
Far far away
.btn-Big .BTN-OUTLINE-LIGHT
Far far away
.btn-Green
Far far away
.btn-Big .BTN-GREEN
Far far away
.btn-Green
Far far away
.btn-Big .BTN-GREEN
Far far away
.btn-violet
Far far away
.btn-Big .BTN-violet
Far far away
.Btn-white
Far far away
.btn-Big .btn-white
Far far away
.btn-outline-dark
Far far away
.btn-Big .BTN-OUTLINE-DARK
Far far away
.btn-outline-Yellow
Far far away
.btn-Big .BTN-OUTLINE-DARK
Far far away
.btn-outline-Yellow
Far far away
.btn-Big .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 needs order as well!

Headline Block

Small Tagline

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

Headline-6-Col
Small Tagline

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

Headline-8-Col
Small Tagline

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

Headline-9-Col
Smaller units

Columns

1-col
1-col
1-col
1-col
1-col
1-col
1-col
1-col
1-col
1-col
1-col
1-col
2-col
2-col
2-col
2-col
2-col
.2-col-Last
3-col
3-col
3-col
.3-col-Last
4-col
4-col
.4-col-Last
5-col
2-col
.5-col-Last
6-col
.6-col-Last
7-col
.5-col-Last
5-col
.7-col-Last
4-col
.8-col-Last
3-col
.9-col-Last
2-col
.10-col-Last
1-col
.11-col-Last
wrap it up

Wraps

wrap .w50
wrap .w20
Used for small spacing between sections
wrap .w80
Used for dark section between two white sections (+30px from top and bottom)
wrap .w50-80
Used for smooth transition between two different background sections (+30 from bottom)
wrap .w80-50
Used to leave more breathing room from top between two different background sections (+30 from top)
wrap .w50-20
Used to leave more breathing room from top between two different background sections (+30 from top)
Special pre-defined wraps

Flex Wraps

wrap .w50-center
Used for centering elements within wrap vertically
wrap .w80-center
Used for centering elements within wrap vertically
wrap .w20-center
Used for centering elements within wrap vertically
wrap .w50-80-center
Used for centering elements within wrap vertically
wrap .w80-50-center
Used for centering elements within wrap vertically
wrap .w50-start
Used for aligning elements from top
wrap .w20-start
Used for aligning elements from top
wrap .w80-start
Used for aligning elements from top
wrap .w50-80-start
Used for aligning elements from top
wrap .w50-80-start
Used for aligning elements from top
wrap .w50-Spcbetween
Used for aligning elements to sides while keeping them centered
wrap .w20-Spcbetween
Used for aligning elements to sides while keeping them centered
wrap .w80-Spcbetween
Used for aligning elements to sides while keeping them centered
wrap .w50-80-Spcbetween
Used for aligning elements to sides while keeping them centered
wrap .w80-50-Spcbetween
Used for aligning elements to sides while keeping them centered
wrap .wCustom
Used for special occasions such as hero section and section where you need 0px from bottom for example and for your future designs
Default building block

Sections

section (white/transparent default)
section (white/transparent default)