Pill Text

Walk to work - the safe way.

Lorem ipsum dolor sit amet consectetur adipiscing eli mattis sit phasellus mollis sit aliquam sit nullam neque ultrices.

Picture of Wijnand van Aalst speaking waterside in Rotterdam with Erasmus bridge in the background

CSS_sheet

1. text 2. buttons 3. background 4. cards 5. filter 5. FORM

1. Text styling

1.1 Font types

This is a taglineThis is a taglineThis is a taglineThis is a taglineThis is a taglineThis is a tagline.

Heading

Heading

Heading

Heading

Heading

Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph

Heading

Heading

1.2 Font color

Basic

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

System

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

Special

All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)All paragraphs (no class)

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.

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.

Head ing

1.3 Font sizing

Px

Font-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-smallFont-size-small

font-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normalfont-size-normal

font-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-bigfont-size-big

Ch

font-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-chfont-max-50-ch

font-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-chfont-max-25-ch

1.4 alignment

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.

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.

Heading

<style>
.outline-white {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #ffffff;
</style>

<style>
.outline-black {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #000000;
</style>

<style>
.outline-misc {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #??????;
</style>

Text shadow

2. buttons

<button>

Button Text Button Text Button Text Button Text

Special buttons

Style me with combo classes

Style me with combo classes

 Button Text

3. bg colors

Base

Accent

System

Special

4. card

5. filters

6. form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

misc

spacing

Size

seperators

Je kunt hier de dikte van se seperators aanpassen.

voeg een seperator toe, deze heeft geen bg. De breedte gebruik je de wid30, 50 of 100. de kleur doe je met bg-color. wil je een overlopende seperator? gebruik dan een achtergrond die radial is en de zijkanten transparant maken.

Structuur

Je kunt hier de basisstructuur van de website aanpassen.

Standaardformaat zit er nu in. Gebruik X-Ray mode om te zien.

Measurements

Flexbox

Vertical

Horizon

Position

Shadow

Opacity

Responsive