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

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-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
Tagline (Default)
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-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
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)
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)