Testing Picnic CSS

A small testing page to see how elements behave across devices

Button types and colors

Link Link Link Link Link Link

Card

This is a nice forest. What do you want to do with it?

A more elaborated card

It has some text
And even a footer!

Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore...

Header 1

Header 2

Header 3

×

Header 4

×

This is a one line card

×

Checkbox


Dropimage

Grid

1
2
3
4
5
6
7
8
9
10

Input

Label

h1 is important Normal

h2 is important too Success

Is h3 important? Warning

h4 is not so important Error

p is normal text Normal

Great offer

We have a special offer for you. I am sure you will love it! However this does look spammy...

Radio button

Select

Stack

Buttons stack

Plugins Demo Test
Plugins Demo Test

Image stack

Forest
Balloon
Lake
Halong bay

Form stack

Table

Name City Age
Francisco Valencia, Spain 23
Eve San Francisco, USA 22
Martin New York, USA 45
Sarah London, UK 25

Tab

/ /

Super important notice!

Thank you for registering! By doing so you agree to the Terms and conditions

Your basic data

Create account

This is the first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the second tab

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the second tab

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the fourth tab

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the first tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the second tab

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the third tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the fourth tab

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

This is the fifth tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the sixth tab

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Tooltip