NL ENG D

Digitaal huisstijlhandboek voor
de Gemeente Enschede

Het digitale huisstijlhandboek omschrijft de randvoorwaarden voor het implementeren van de Gemeente Enschede huisstijl online. Het doel is om zoveel mogelijk eenheid te creëren en richting te geven.

Grofweg is het gebruik van de huisstijl onderverdeeld in drie schillen:
a) pagina’s om te informeren
b) pagina’s om te informeren en overtuigen en
c) pagina’s om te vermarkten of verkopen.

Een nieuw initiatief komt in schil a terecht. Alleen als de communicatiedoelen het vereisen, schuift het initiatief door naar type b of c. Dit digitaal huisstijlhandboek legt beperkingen op in de huisstijl, maar niet in functionaliteit.

Grid

Grid specificatie
row | max-width: 70em ( 1120px ); padding: 1.88em ( 30px )
column gutter 20px | padding-left: 0.625em + padding-right: 0.625em = 20px
Het grid is mobile first, standaard wordt de css small-12 gehanteerd mits anders aangegeven
Bekijk grid

.small-12 column

.small-6 column

.small-4 column

.small-3 column

.small-2 column

.small-1 column


.row.collapse
verwijderd de gutter tussen columns
.small-collapse .medium-collapse .large-collapse
.small-uncollapse .medium-uncollapse .large-uncollapse


push & pull
Push drukt de column van links naar rechts
Pull trekt de column van rechts naar links

push-4
pull-2

Grid nesting
Nesting kan oneindig.

Column 6
6 nested
6 nested
8 nested
4 nested

12 nested

6 2x nested
6 2x nested
Column 6
2
6 nested
4 nested
4 nested
4 nested
4 nested

12 nested

8 2x nested
4
<div class="row"> 
  <div class="small-2 large-4 columns">...</div> 
  <div class="small-4 large-4 columns">...</div> 
  <div class="small-6 large-4 columns">...</div> 
</div> 
<div class="row"> 
  <div class="large-3 columns">...</div> 
  <div class="large-6 columns">...</div> 
  <div class="large-3 columns">...</div> 
</div> 
<div class="row"> 
  <div class="small-6 large-2 columns">...</div> 
  <div class="small-6 large-8 columns">...</div> 
  <div class="small-12 large-2 columns">...</div> 
</div> 
<div class="row"> 
  <div class="small-3 columns">...</div> 
  <div class="small-9 columns">...</div> 
</div> 
<div class="row"> 
  <div class="large-4 columns">...</div> 
  <div class="large-8 columns">...</div> 
</div> 
<div class="row"> 
  <div class="small-6 large-5 columns">...</div> 
  <div class="small-6 large-7 columns">...</div> 
</div> 
<div class="row"> 
  <div class="large-6 columns">...</div> 
  <div class="large-6 columns">...</div> 
</div>
            
<div class="row"> 
  <div class="large-6 columns"> 
    <div class="large-6 columns"> ... </div> 
    <div class="large-6 columns"> ... </div> 
  </div> 
  <div class="large-6 columns"> 
    <div class="large-4 columns"> ... </div> 
    <div class="large-8 columns"> ... </div> 
  </div> 
</div>
            

Header menus

<div class="breadcrumbsWrapper"> 
  <div class="row"> 
    <div class="medium-12 column"> 
      <nav class="breadcrumbs enschede"> 
        <a href="#">item</a> 
        <a href="#">item</a> 
        <a class="unavailable" href="#">.unavailable</a> 
        <a class="current" href="#">.current</a> 
      </nav> 
    </div>
  </div> 
</div>
            
<!-- HEADERBAR 1 -->            
<header class="enschede"> 
  <div class="header-container"> 
    <div class="row"> 
      <div class="medium-12 large-2 small-centered columns left"> 
        <a href="DeNK-digitale-huisstijl-guide.html"> 
          <div class="logo"> 
          </div> 
        </a>
        <a href="#" title="Open menu" class="sysUI menu right"> </a> 
      </div> 
      <div class="medium-10 large-10 small-centered small-text-center columns left"> 
        <nav class="main-nav right"> 
          <ul> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#inleiding">inleiding</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#grid">grid</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#type-site">type site</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#stijlelementen">stijlelementen</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#site-indeling">site-indeling</a> 
            </li> 
            <li> 
              <a href="DeNK-stramien.html">stramien</a> 
            </li>
            <li class="active">
              <a href="DeNK-kitchensink.html" class="active">kitchensink</a> 
            </li> 
            <li> 
              <a href="#">openklap</a> 
              <ul> 
                <li> 
                  <a href="#">test link 1</a> 
                </li> 
                <li> 
                  <a href="#">test link 2</a> 
                </li> 
                <li> 
                  <a href="#">test link 3</a> 
                </li> 
              </ul> 
            </li> 
            <li> 
              <a href="#" class="enschede-search sysUI search"></a> 
            </li> 
          </ul> 
        </nav>
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="small-12 columns left"> 
      <div class="headerBarSub"> 
      </div> 
    </div> 
  </div> 
  <div class="row"> 
    <div class="small-5 columns"> 
      <div class="headerBarTriangle"> 
      </div> 
    </div> 
  </div> 
  <div class="row collapse"> 
    <div class="medium-10 small-centered columns right"> 
      <div class="searchBox"> 
        <div class="row collapse"> 
          <div class="small-10 medium-9 columns"> 
            <input type="text" placeholder="Typ hier een trefwoord" /> 
          </div> 
          <div class="small-2 medium-3 columns"> 
            <span class="button red">zoek</span> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</header> 
            
<!-- HEADERBAR 2 -->
<header class="enschede">
  <div class="topbar-menu">
    <div class="left">
      <div class="sysUI menu">
      </div> 
      <a href="/">
        <div class="logo">
        </div> 
      </a> 
    </div> 
    <div class="right">
      <div class="language">
        <span class="set active">NL</span> 
        <span class="set">ENG</span> 
        <span class="set"> D</span> 
      </div> 
      <div class="sysUI wrapper">
        <div class="sysUI change fontsize active">
        </div> 
        <div class="sysUI change fontsize large">
        </div> 
        <div class="sysUI change contrast light">
        </div> 
      </div> 
    </div> 
    <div class="secondary-navigation-container">
      <nav class="secondary-nav">
        <ul> 
          <li> 
            <a href="DeNK-digitale-huisstijl-guide.html">inleiding</a> 
          </li> 
          <li> 
            <a href="DeNK-digitale-huisstijl-guide.html#grid"> grid</a> 
          </li> 
          <li> 
            <a href="DeNK-digitale-huisstijl-guide.html#type-site">type site</a> 
          </li> 
          <li> 
            <a href="DeNK-digitale-huisstijl-guide.html#stijlelementen">stijlelementen</a> 
          </li> 
          <li> 
            <a href="DeNK-digitale-huisstijl-guide.html#site-indeling">site-indeling</a> 
          </li> 
          <li> 
            <a href="DeNK-stramien.html">stramien</a> 
          </li> 
          <li class="active">
            <a href="DeNK-kitchensink.html" class="active">kitchensink</a> 
          </li> 
        </ul> 
      </nav> 
    </div> 
  </div> 
  <div class="header-container">
    <div class="row">
      <div class="medium-12 large-2 small-centered columns left">
        <a href="DeNK-digitale-huisstijl-guide.html">
          <div class="logo text">
            <h1>Titel pagina</h1> 
          </div> 
        </a> 
        <a href="#" title="Open menu" class="sysUI menu right"></a> 
      </div> 
      <div class="medium-10 large-10 small-centered small-text-center columns left">
        <nav class="main-nav right">
          <ul> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#inleiding">inleiding</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#grid">grid</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#type-site">type site</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#stijlelementen">stijlelementen</a> 
            </li> 
            <li> 
              <a href="DeNK-digitale-huisstijl-guide.html#site-indeling">site-indeling</a> 
            </li> 
            <li> 
              <a href="DeNK-stramien.html">stramien</a> 
            </li> 
            <li class="active">
              <a href="DeNK-kitchensink.html" class="active">kitchensink</a> 
            </li> 
            <li> 
            <a href="#">openklap</a> 
              <ul> 
                <li> 
                  <a href="#">test link 1</a> 
                </li> <li> 
                  <a href="#">test link 2</a> 
                </li> 
                <li> 
                  <a href="#">test link 3</a> 
                </li> 
              </ul> 
            </li> 
            <li> 
              <a href="#" class="enschede-search sysUI search"></a> 
            </li> 
          </ul>
        </nav> 
      </div> 
    </div> 
  </div> 
  <div class="row">
    <div class="small-12 columns left">
      <div class="headerBarSub">
      </div> 
    </div> 
  </div> 
  <div class="row">
    <div class="small-5 columns">
      <div class="headerBarTriangle">
      </div> 
    </div> 
  </div> 
  <div class="row collapse">
    <div class="medium-10 small-centered columns right">
      <div class="searchBox">
        <div class="row collapse">
          <div class="small-10 medium-9 columns">
            <input type="text" placeholder="Typ hier een trefwoord" /> 
          </div> 
          <div class="small-2 medium-3 columns">
            <span class="button red">zoek</span>
          </div> 
        </div> 
      </div> 
    </div> 
  </div>
</header>
            

Buttons

<a href="#" class="tiny button">.tiny</a>
<a href="#" class="small button">.small</a>
<a href="#" class="medium button">.medium</a>
<a href="#" class="large button">.large</a>
            
<a href="#" class="blue button">.blue</a>
<a href="#" class="blue button">.blue</a>
<a href="#" class="orange button">.orange</a>
<a href="#" class="pink button">.pink</a>
<a href="#" class="green button">.green</a>
<a href="#" class="purple button">.purple</a>
<a href="#" class="navygreen button">.navygreen</a>
<a href="#" class="marineblue button">.marineblue</a>
<a href="#" class="secondary blue button">.secondary.blue</a>
<a href="#" class="secondary orange secondary button">.secondary.orange</a>
<a href="#" class="secondary pink button">.secondary.pink</a> 
<a href="#" class="secondary green button">.secondary.green</a> 
<a href="#" class="secondary purple button">.secondary.purple</a> 
<a href="#" class="secondary navygreen button">.secondary.navygreen</a> 
<a href="#" class="secondary marineblue button">.secondary.marineblue</a>
            

Text styling

Titles

Titelteksten zijn te gebruiken in drie fontgroottes; .large, .medium en .small.

  • De karakteristieken van titels (kleur/fontgewicht/puntgroote/regelafstand) zijn voorgedefiniëerd in het CSS van de gebruikte contentstrook.
  • De titeltekst in de widget op de voorpagina heeft een eigen fontgrootte; ook deze is voorgedefiniëerd.
  • Bij een schil-2 site is het toegestaan om te variëren aan de hand van de aangegeven steunkleuren

h1 title

h2 title

h3 title

h4 title

h5 title
h6 title

sub titles

h3.subtitle.small

h3.subtitle.large

h1.large

h2.large

h3.large

h4.large

h5.large
h6.large

h1.medium

h2.medium

h3.medium

h4.medium

h5.medium
h6.medium

h1.small

h2.small

h3.small

h4.small

h5.small
h6.small

Kleuren

.red
.white
.blue
.orange
.green
.marineblue
.purple
.pink

tekstbeeld alinea

De alineatekst kan worden toegepast in drie varianten/puntgroottes.

Headertekst voorbeeld

  • De karakteristieken van het lettertype (kleur/fontgewicht/puntgroote/ regelafstand) zijn voorgedefiniëerd in het CSS van de gebruikte contentstrook.
  • Als er sprake is van een inleiding dan is deze altijd in het fontgewicht Regular.
  • Teksten bij voorkeur niet afbreken.
  • Het gebruik van underline, cursief en vet dient zoveel mogelijk te worden voorkomen. Wil men ergens de aandacht op vestigen dan het liefst een vette tekst gebruiken. Cursief kan op sommige schermen minder goed leesbaar zijn, underline brengt verwarring met een link.

.subtitle.large 17px
Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.
.subtitle.small 15px
Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

Een (externe) link op kleurachtergrond wordt diapositief weergegeven.
link
link extern

Montserrat 17px/26px

Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

Montserrat 15px/24px

Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

Montserrat 13px/20px

Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

<!-- HEADERS NORMAL -->
<h1>h1 title</h1>
<h2>h2 title</h2>
<h3>h3 title</h3>
<h4>h4 title</h4>
<h5>h5 title</h5>
<h6>h6 title</h6>

<!-- SUBTITLES -->
<h3 class="subtitle small">h3.subtitle.small</h3> 
<h3 class="subtitle large">h3.subtitle.large</h3>

<!-- HEADER SIZES -->
<!-- HEADER SIZE LARGE -->
<h1 class="large">h1.large</h1>
<h2 class="large">h2.large</h2>
<h3 class="large">h3.large</h3>
<h4 class="large">h4.large</h4>
<h5 class="large">h5.large</h5>
<h6 class="large">h6.large</h6>

<!-- HEADER SIZE MEDIUM -->
<h1 class="medium">h1.medium</h1>
<h2 class="medium">h2.medium</h2>
<h3 class="medium">h3.medium</h3>
<h4 class="medium">h4.medium</h4>
<h5 class="medium">h5.medium</h5>
<h6 class="medium">h6.medium</h6>

<!-- HEADER SIZE SMALL -->
<h1 class="small">h1.small</h1>
<h2 class="small">h2.small</h2>
<h3 class="small">h3.small</h3>
<h4 class="small">h4.small</h4>
<h5 class="small">h5.small</h5>
<h6 class="small">h6.small</h6>
            
<!-- HEADER KLEUREN -->
<!-- HEADERS H1, H2, H3, H4, H5, H6 -->
<h5 class="red">.red</h5>
<h5 class="white">.white</h5>
<h5 class="blue">.blue</h5>
<h5 class="orange">.orange</h5>
<h5 class="green">.green</h5>
<h5 class="navygreen">.navygreen</h5>
<h5 class="marineblue">.marineblue</h5>
<h5 class="purple">.purple</h5>
<h5 class="pink">.pink</h5>
            
<!-- PARAGRAPHS -->
<p class="large"> Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads. </p>
<p class="medium"> Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads. </p> 
<p class="small"> Your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are falling good luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads. </p>
            

Form elementen

Formulier
Validatie met abide.js - bekijk abide patterns

.com
<form data-abide>
  <div class="row">
    <div class="large-12 columns">
      <label>
        Input Label <input type="text" placeholder="large-12.columns" required/>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Input Label 
        <input type="search" placeholder="zoeken"/>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-4 medium-4 columns">
      <label>Input Label 
        <input type="text" placeholder="large-4.columns" required/>
      </label>
    </div>
    <div class="large-4 medium-4 columns">
      <label>Input Label 
        <input type="text" placeholder="large-4.columns" required/>
      </label>
    </div>
    <div class="large-4 medium-4 columns">
      <div class="row collapse">
        <label>Input Label</label>
        <div class="small-9 columns">
          <input type="text" placeholder="small-9.columns" required/>
        </div>
        <div class="small-3 columns">
          <span class="postfix">.com</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Select Box</label>
      <select required>
        <option value="">Maak uw keuze</option>
        <option value="keuze1">Keuze 1</option>
        <option value="keuze2">Keuze 2</option>
        <option value="keuze3">Keuze 3</option>
        <option value="keuze4">Keuze 4</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="large-6 medium-6 columns">
      <label>Radiobox</label>
      <input type="radio" name="naam" id="radio1" required><label for="radio1">Radio 1</label>
      <input type="radio" name="naam" id="radio2" required><label for="radio2">Radio 2</label>
    </div>
    <div class="large-6 medium-6 columns">
      <label>Checkbox</label>
      <input type="checkbox" id="checkbox1" required><label for="checkbox1">Checkbox 1</label>
      <input type="checkbox" id="checkbox2" required><label for="checkbox2">Checkbox 2</label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Upload hier uw...</label>
      <label class="button white fixw uploadFile">
      <span>Kies uw bestand</span>
      <input type="file" required>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns">
      <label>Textarea Label 
        <textarea placeholder="small-12.columns" required></textarea>
      </label>
      <button class="right fixw">Verstuur</button>
    </div>
  </div>
</form>
            

Iconen & system UI

Systeem Icons

.sysUI


.sysUI.arrows


.sysUI.change

.sysUI.change.fontsize


.sysUI.change.fontsize.active

.sysUI.change.contrast / .light / .heavy

Social Icons
.socialIcon.telefoon

Markers

basisonderwijs gemeentelijke locaties kinderopvang parkeren verzamel gebouwen voortgezet onderwijs
basisonderwijs gemeentelijke locaties kinderopvang parkeren verzamel gebouwen voortgezet onderwijs
<a href="" class="sysUI menu"></a> 
<a href="" class="sysUI search"></a> 
<a href="" class="sysUI exit"></a> 
<a href="" class="sysUI arrows pointleft"></a> 
<a href="" class="sysUI arrows pointright"></a> 
<a href="" class="sysUI arrows pointleft small"></a> 
<a href="" class="sysUI arrows pointright small"></a> 
<a href="" class="sysUI change fontsize"></a> 
<a href="" class="sysUI change fontsize large"></a> 
<a href="" class="sysUI change fontsize active"></a> 
<a href="" class="sysUI change fontsize large"></a> 
<a href="" class="sysUI change contrast light"></a> 
<a href="" class="sysUI change contrast heavy"></a>
            
<a href="" class="socialIcon telefoon"></a> 
<a href="" class="socialIcon email"></a> 
<a href="" class="socialIcon rss"></a> 
<a href="" class="socialIcon facebook"></a> 
<a href="" class="socialIcon linkedin"></a> 
<a href="" class="socialIcon twitter"></a> 
<a href="" class="socialIcon googleplus"></a> 
<a href="" class="socialIcon pinterest"></a> 
<a href="" class="socialIcon instagram"></a> 
<a href="" class="socialIcon flickr"></a>
            

Widgets

Widgets - Small
.widget.small

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

Widgets - Medium
.widget.medium

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Proin varius ultrices condimentum mentum. nunc vulputate vel posuere felis.

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Proin varius ultrices condimentum mentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla.

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik!

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis.

call to action

Widgets - Medium 4 columns
.widget.medium.x4

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Proin varius ultrices condimentum mentum. nunc vulputate vel posuere felis lobortis. Proin varius ultrices

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede!

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

Widgets - Large
.widget.large

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante.

call to action

Widgets - Headers
.widget.header

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede!

[Slidertitle]
Caecilia Bold Italic 40px

<!-- WIDGET BLUE -->  
<div class="widget small blue"> 
  <p>
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           
<!-- WIDGET ORANGE -->  
<div class="widget small orange"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>

<!-- WIDGET PINK -->  
<div class="widget small pink"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>

<!-- WIDGET GREEN -->  
<div class="widget small green"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           
<!-- WIDGET PURPLE -->  
<div class="widget small purple"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           
<!-- WIDGET NAVYGREEN -->  
<div class="widget small navygreen"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           
<!-- WIDGET MARINEBLUE -->  
<div class="widget small marineblue"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
            
<!-- WIDGET SMALL -->  
<div class="widget small"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           
<!-- WIDGET MEDIUM -->
<div class="widget medium"> 
  <h3 class="small">[Title small] Artikel <time>14 oct 2015</time></h3> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Proin varius ultrices condimentum mentum. nunc vulputate vel posuere felis. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>   
           
<!-- WIDGET MEDIUM x4 -->
<div class="widget medium x4">
  <h3 class="small">[Title small] Artikel <time>14 oct 2015</time></h3>
  <p>
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Proin varius ultrices condimentum mentum. nunc vulputate vel posuere felis lobortis. Proin varius ultrices 
  </p> <a href="" class="button secondary white tiny">call to action</a>
</div>

<!-- WIDGET LARGE -->
<div class="widget large"> 
  <h3 class="small">[Title small] Artikel <time>14 oct 2015</time></h3> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet sapien magna, et pellentesque arcu. Sed interdum nibh sed nunc vulputate vel posuere felis lobortis. Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           

<!-- WIDGET BORDERED -->
<div class="widget small bordered"> 
  <p> 
    De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! Proin varius ultrices condimentum. Mauris nulla enim, rutrum in volutpat vel, vehicula eget ante. 
  </p> 
  <a href="" class="button secondary white tiny">call to action</a> 
</div>
           
<!-- WIDGET SIDE-MENU -->
<div class="widget medium x4 expand bordered side-menu"> 
  <h3>Hoofdmenu-item #1</h3> 
  <ul class="accordion" data-accordion> <li class="accordion-navigation"> 
    <a href="#">Submenu-item niv. 1</a> </li> <li class="accordion-navigation"> 
    <a href="#sub2">Submenu-item niv. 2</a> <div id="sub2" class="content"> 
    <a href="#">Submenu-item niv. 2</a> <a href="#">Submenu-item niv. 2</a> 
    <ul class="accordion" data-accordion> 
      <li class="accordion-navigation"> 
      <a href="#sub2-1">Submenu-item niv. 3</a> 
        <div id="sub2-1" class="content"> 
          <ul class="accordion" data-accordion> 
            <li class="accordion-navigation"> 
            <a href="#sub3-1">Submenu-item niv. 3</a> 
              <div id="sub3-1" class="content"> 
                <a href="#">Submenu-item niv. 3</a> 
                <a href="#">Submenu-item niv. 3</a> 
              </div> 
            </li> 
          </ul> 
        </div> 
      </li> 
    </ul> 
  </div> 
  </li> 
    <li class="accordion-navigation"> 
      <a href="#sub3">Submenu-item niv. 2 - closed</a> 
      <div id="sub3" class="content"> 
        <a href="#">Submenu-item niv. 2</a> 
        <a href="#">Submenu-item niv. 2</a> 
      </div> 
    </li> 
    <li class="accordion-navigation"> 
      <a href="#sub4">Submenu-item niv. 2 - closed</a> 
      <div id="sub4" class="content"> 
        <a href="#">Submenu-item niv. 3</a> 
      </div> 
    </li> 
    <li class="accordion-navigation"> 
      <a href="#">Submenu-item niv. 1</a> 
    </li>
  </ul>
</div>

<!-- WIDGET SIDE-MENU 2 HOVER -->
<div class="widget medium x4 expand bordered side-menu">
  <h3>Hoofdmenu-item #2</h3>
  <ul class="side-nav">
    <li> <a href="#">Submenu-item niv. 1</a>
  </li> 
  <li> <a href="#">Submenu-item niv. 2 - open</a>
    <ul>
      <li><a href="#">Submenu-item niv. 2</a>
      </li>
      <li><a href="#">Submenu-item niv. 2</a>
      </li>
        <li><a href="#">Submenu-item niv. 3 - open</a>
          <ul>
            <li>
              <a href="#">Submenu-item niv. 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Submenu-item niv. 3 - closed</a>
    </li>
    <li> 
      <a href="#">Submenu-item niv. 2</a>
    </li>
  </ul>
</div>
           
<!-- WIDGET HEADER -->
<div class="widgetWrap"> 
  <div class="widget header"> 
    <div class="summary"> <p> 
      De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! 
    </p> 
    <button class="secondary white expand">call to action</button> 
    </div> 
  </div> 
  <div class="title"> 
    <h1> [Slidertitle]<br> Caecilia Bold Italic 40px </h1> 
  </div> 
</div>
            

Stroken

<!-- HOME STROOK 1 HEADER --> 
<section class="strook enschede-strook-header background-blue clearfix"> 
  <div class="header-image"> 
    <div class="row"> 
      <div class="medium-12 column"> 
        <div class="widgetWrap"> 
          <div class="widget header"> 
            <div class="summary"> 
              <p> De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! </p> 
              <button class="secondary white expand">call to action</button> 
            </div> 
          </div> 
          <div class="title"> 
            <h1> [Slidertitle]<br> Caecilia Bold Italic 40px </h1> 
          </div>
        </div> 
      </div> 
    </div> 
  </div> 
</section> 
<div class="clearfix"></div>
            
<!-- HOME STROOK 2 -->
<section class="strook enschede-strook-tekst-widget">
  <div class="row">
    <div class="medium-6 columns">
      <h2 class="large">
        [Title large] in Caecilia Bold 30 px
      </h2>
      <p class="medium">
        De fiets is comfortabel, snel, milieuvriendelijk en goedkoop. Door het elektrische fietsen is zelfs tegenwind geen belemmering meer om op de fiets te stappen. De gemeente Enschede werkt aan een fietsnetwerk dat aansluit op de wensen van de fietsers. Een ander speerpunt is het verbeteren van de voorzieningen voor de fietser. 
      </p>
      <p>
        Op deze site is alle relevante fietsinformatie verzameld. Of u nu in Enschede woont, werkt, de stad bezoekt, ondernemer bent of benieuwd bent wat de gemeente Enschede doet om het fietsen te bevorderen. Heeft u klachten over een fietspad, of wilt u een melding doen over de voorzieningen voor fietsers in Enschede via ons 
      </p>
    </div>
    <div class="medium-4 column">
      <div class="widgetWrap">
        <div class="widget image green medium">
          <div class="widgetImage">
          </div>
          <div class="summary text-center">
            <h2 class="small">
              [Title small] Artikel
            </h2>
            <p>
              De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede! 
            </p>
            <button class="secondary white tiny expand">call to action</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
            
<!-- HOME STROOK 3 -->
<section class="strook enschede-strook-text background-blue">
  <div class="row">
    <div class="medium-12 columns text-center">
      <h2 class="large">
        [Title medium] in Caecilia Bold, 25 px van dit artikel</h2>
    </div>
  </div>
  <div class="row">
    <div class="medium-3 columns">
    <p>
      <strong class="subtitle large">Subtitle large] artikel</strong>
    </p>
    <p>
      [Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people. </p>
    <a href="" class="tiny button">Call to action</a>
    </div>
    <div class="medium-3 columns">
      <p>
        <strong class="subtitle large">[Subtitle large] artikel</strong>
      </p>
      <p>
        [Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people. 
      </p>
      <a href="" class="tiny button">Call to action</a>
    </div>
    <div class="medium-3 columns">
    <p>
      <strong class="subtitle large">
      [Subtitle large] artikel</strong>
    </p>
    <p>
      [Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people. </p>
      <a href="" class="tiny button">Call to action</a>
    </div>
    <div class="medium-3 columns">
      <p>
        <strong class="subtitle large">[Subtitle large] artikel</strong>
      </p>
      <p>
        [Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people. </p>
        <a href="" class="tiny button">Call to action</a>
    </div>
  </div>
 </section>
            
<!-- HOME STROOK 4 --> 
<section class="strook enschede-strook-image-text background-white" data-equalizer> 
  <div class="medium-6 columns background-red nopadded" data-equalizer-watch> 
    <div class="background-image">
    </div> 
  </div> 
  <div class="row" data-equalizer-watch> 
    <div class="medium-5 columns content right"> 
      <h3 class="small">[Title small] in Caecilia Bold 20px van dit artikel... then look ma i'm road kill you</h3> <p>Brain freeze. that tall drink of water with the silver spoon up his ass. i now issue a new commandment: thou shalt do the dance. brain freeze. your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are fallinggood luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.</p> 
      <a href="" class="button fixw">Call to action</a> 
    </div> 
  </div> 
</section>
            
<section> 
  <!-- MAP CANVAS BUITEN ROW HOUDEN ALS DE VOLLE BREEDTE BENUT MOET WORDEN --> 
  <div id="map_canvas"> 
  </div> 
</section>
            

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede!

[Slidertitle]
Caecilia Bold Italic 40px

[Title large] in Caecilia Bold 30 px

De fiets is comfortabel, snel, milieuvriendelijk en goedkoop. Door het elektrische fietsen is zelfs tegenwind geen belemmering meer om op de fiets te stappen. De gemeente Enschede werkt aan een fietsnetwerk dat aansluit op de wensen van de fietsers. Een ander speerpunt is het verbeteren van de voorzieningen voor de fietser.

Op deze site is alle relevante fietsinformatie verzameld. Of u nu in Enschede woont, werkt, de stad bezoekt, ondernemer bent of benieuwd bent wat de gemeente Enschede doet om het fietsen te bevorderen. Heeft u klachten over een fietspad, of wilt u een melding doen over de voorzieningen voor fietsers in Enschede via ons

[Title small] Artikel

De fiets, hét perfecte vervoermiddel voor gebruik in en om Enschede!

call to action

[Title medium] in Caecilia Bold, 25 px van dit artikel

[Subtitle large] artikel

[Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people.

Call to action

[Subtitle large] artikel

[Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people.

Call to action

[Subtitle large] artikel

[Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people.

Call to action

[Subtitle large] artikel

[Alineatekst] then look ma i'm road kill you measure yourself by the people who measure themselves by you. i just heard about evans, good luck to you evan the silver spoon up his measure yourself by the people.

Call to action

[Title small] in Caecilia Bold 20px van dit artikel... then look ma i'm road kill you

Brain freeze. that tall drink of water with the silver spoon up his ass. i now issue a new commandment: thou shalt do the dance. brain freeze. your entrance was good, his was better. i just heard about evans new position, ot no food we got no money and our pets heads are fallinggood luck to you evan backstabber, bastard, i mean baxter. i now issue a new commandment: thou shalt do the dance. we got no food we got no money and our pets heads.

Call to action