<div class="container">
<main>
<h1>Den Haag Design System</h1>
<p> Woont u of gaat u wonen in een gebied waar betaald parkeren geldt? Met een parkeervergunning voor bewoners kunt u daar parkeren zonder ter plekke te hoeven betalen. </p>
<p>U kunt een parkeervergunning aanvragen als u in de gemeente Den Haag woont of gaat wonen. De vergunning staat op kenteken. Hebt u <a href="#">meerdere auto's</a> dan moet u meerdere vergunningen aanvragen. </p>
<h2>Lopende aanvragen</h2>
<p>Bent u niet de eigenaar van de auto waarvoor u een vergunning aanvraagt? Lees dan verderop op deze pagina bij '<a href="#">Benodigde bewijsstukken bij aanvraag</a>' welke bewijsstukken nodig zijn. Scan deze bewijsstukken voordat u de aanvraag opstart.</p>
<hr>
<p>In een aantal gevallen moet u bij uw aanvraag extra documenten meesturen:</p>
<ul>
<li>Een leasecontract op uw naam als u in een leaseauto rijdt.</li>
<li>Een verklaring van uw werkgever als u in een auto van uw werkgever rijdt. Daarin moet staan of u het voertuig altijd of af en toe nodig heeft voor uw werk. Ook het kenteken moet erin staan.</li>
</ul>
<table>
<caption>Tarieven 2018 (2019)</caption>
<thead>
<tr>
<th>Wijk</th>
<th>Per 12 maanden</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Vruchtenbuurt, Bloemenbuurt, Laakkwartier-Oost
1e, 2e en volgende auto's op 1 adres</td>
<td>€ 12,60 (€ 13,20 in 2019)</td>
<td><a href="#">Bekijk details</a></td>
</tr>
</tbody>
</table>
<h2>Vergunningen en voorzieningen</h2>
<h3>Parkeervergunning</h3>
<p>U kunt een parkeervergunning aanvragen als u in de gemeente Den Haag woont of gaat wonen. De vergunning staat op kenteken. Hebt u meerdere auto's dan moet u meerdere vergunningen aanvragen.</p>
<p>U kunt met hetzelfde formulier een parkeervergunning voor uw bezoek aanvragen.</p>
<h4>Niet de eigenaar</h4>
<p>Bent u niet de eigenaar van de auto waarvoor u een vergunning aanvraagt? Lees dan verderop op deze pagina bij 'Benodigde bewijsstukken bij aanvraag' welke bewijsstukken nodig zijn. Scan deze bewijsstukken voordat u de aanvraag opstart.</p>
<h5>Vergunning</h5>
<p>Als u een vergunning mist, vul dan het ontbrekende kenteken of vergunningnummer in, zodat uw parkeervergunning alsnog gekoppeld kan worden. Het koppelen van uw gegevens kan enkele dagen duren.</p>
<form action="">
<fieldset>
<div class="error-message">Dit is geen geldig kenteken, vult u alstublieft een geldig kenteken in.</div>
<label for="field">Ontbrekende kenteken / vergunningnummer *
</label>
<input type="text" id="field" />
<input type="text" id="field" readonly value="waarde" />
<input type="submit" value="Verzenden" />
<select>
<option>Keuze 1</option>
<option>Keuze 2</option>
<option>Keuze 3</option>
</select>
</fieldset>
</form>
</main>
</div>
<div class="container">
<main>
<h1>Den Haag Design System</h1>
<p> Woont u of gaat u wonen in een gebied waar betaald parkeren geldt? Met een parkeervergunning voor bewoners kunt u daar parkeren zonder ter plekke te hoeven betalen. </p>
<p>U kunt een parkeervergunning aanvragen als u in de gemeente Den Haag woont of gaat wonen. De vergunning staat op kenteken. Hebt u <a href="#">meerdere auto's</a> dan moet u meerdere vergunningen aanvragen. </p>
<h2>Lopende aanvragen</h2>
<p>Bent u niet de eigenaar van de auto waarvoor u een vergunning aanvraagt? Lees dan verderop op deze pagina bij '<a href="#">Benodigde bewijsstukken bij aanvraag</a>' welke bewijsstukken nodig zijn. Scan deze bewijsstukken voordat u de aanvraag opstart.</p>
<hr>
<p>In een aantal gevallen moet u bij uw aanvraag extra documenten meesturen:</p>
<ul>
<li>Een leasecontract op uw naam als u in een leaseauto rijdt.</li>
<li>Een verklaring van uw werkgever als u in een auto van uw werkgever rijdt. Daarin moet staan of u het voertuig altijd of af en toe nodig heeft voor uw werk. Ook het kenteken moet erin staan.</li>
</ul>
<table>
<caption>Tarieven 2018 (2019)</caption>
<thead>
<tr>
<th>Wijk</th>
<th>Per 12 maanden</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Vruchtenbuurt, Bloemenbuurt, Laakkwartier-Oost
1e, 2e en volgende auto's op 1 adres</td>
<td>€ 12,60 (€ 13,20 in 2019)</td>
<td><a href="#">Bekijk details</a></td>
</tr>
</tbody>
</table>
<h2>Vergunningen en voorzieningen</h2>
<h3>Parkeervergunning</h3>
<p>U kunt een parkeervergunning aanvragen als u in de gemeente Den Haag woont of gaat wonen. De vergunning staat op kenteken. Hebt u meerdere auto's dan moet u meerdere vergunningen aanvragen.</p>
<p>U kunt met hetzelfde formulier een parkeervergunning voor uw bezoek aanvragen.</p>
<h4>Niet de eigenaar</h4>
<p>Bent u niet de eigenaar van de auto waarvoor u een vergunning aanvraagt? Lees dan verderop op deze pagina bij 'Benodigde bewijsstukken bij aanvraag' welke bewijsstukken nodig zijn. Scan deze bewijsstukken voordat u de aanvraag opstart.</p>
<h5>Vergunning</h5>
<p>Als u een vergunning mist, vul dan het ontbrekende kenteken of vergunningnummer in, zodat uw parkeervergunning alsnog gekoppeld kan worden. Het koppelen van uw gegevens kan enkele dagen duren.</p>
<form action="">
<fieldset>
<div class="error-message">Dit is geen geldig kenteken, vult u alstublieft een geldig kenteken in.</div>
<label for="field">Ontbrekende kenteken / vergunningnummer *
</label>
<input type="text" id="field" />
<input type="text" id="field" readonly value="waarde" />
<input type="submit" value="Verzenden" />
<select>
<option>Keuze 1</option>
<option>Keuze 2</option>
<option>Keuze 3</option>
</select>
</fieldset>
</form>
</main>
</div>
/* No context defined for this component. */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
margin: 0 auto;
max-width: 56em;
}
article,
section,
header,
footer,
main,
aside {
display: block;
}
main {
background-color: $white;
padding: $space-s;
@media (min-width: $tablet-landscape) {
padding: $space-xxxl;
margin: $space-xxxl 0;
}
}
body,
button,
input,
optgroup,
select,
textarea {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img,
audio,
video,
iframe {
display: block;
max-width: 100%;
}
html {
font-family: $font-sans;
font-size: $fs-base;
line-height: $base-line-height;
color: $grey-dark;
background-color: $white-dark;
}
p,
ul,
ol,
blockquote,
pre,
audio,
video,
iframe,
form {
margin: $space-m 0;
}
dl {
margin: 0 0;
}
ul,
ol {
padding-left: $space-s;
}
a {
color: $blue;
&:hover {
color: $brown;
text-decoration: none;
}
&:focus {
background-color: $yellow-light;
color: $blue;
outline: 1px solid $brown;
text-decoration: none;
}
}
div[tabindex="-1"]:focus /* in these cases we'll likely not want to
indicate focus because they are exceptions where large areas
benefit from being focused*/
{
outline: 0;
}
h1,
h2,
h3,
h4,
h5 {
font-family: $font-serif;
line-height: normal;
margin-bottom: $space-m;
}
h1 {
font-size: $fs-up-5;
font-weight: $fw-normal;
}
h2 {
font-size: $fs-up-4;
font-weight: $fw-bold;
margin-top: $space-l;
}
h3 {
font-size: $fs-up-2;
font-weight: $fw-bold;
}
h4 {
font-size: $fs-up-1;
font-weight: $fw-bold;
}
h5 {
font-size: $fs-base;
font-weight: $fw-bold;
}
h2 + h3 {
margin-top: $space-m;
}
h2 + p {
margin-top: $space-s;
}
h3 + p {
margin-top: $space-xs;
}
h4 + p {
margin-top: 0;
}
hr {
border: 0;
height: 2px;
background-color: $grey-light;
margin: $space-l 0;
}
label {
display: block;
margin-bottom: $space-xs;
font-family: $font-serif;
font-weight: $fw-bold;
}
fieldset {
border: 0;
}
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
display: block;
border: 2px solid $grey-light;
width: 100%;
padding: $space-xs $space-xs;
font: inherit;
transition: border-color 0.15s ease-in-out;
background-color: $white;
color: $grey-dark;
&::placeholder {
color: $grey;
}
&:focus {
border-color: $black;
}
&[readonly],
&[disabled],
&[readonly]:hover,
&[disabled]:hover {
background-color: $white-dark;
}
}
select {
border-radius: 0;
appearance: none;
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
padding-right: 28px;
}
input[type="checkbox"],
input[type="radio"] {
display: block;
float: left;
margin-top: $space-xxs * 1.5;
+ label {
margin-left: $space-m;
font-weight: $fw-normal;
}
}
input[type="submit"] {
font-family: $font-serif;
font-weight: $fw-bold;
text-align: center;
vertical-align: middle;
max-width: 350px;
border: 2px solid transparent;
background-color: $green;
color: $white;
white-space: nowrap;
padding: $space-xs $space-s;
font-size: inherit;
margin: $space-m 0;
cursor: pointer;
&:hover {
border: 2px solid $brown;
background-color: $brown;
color: $white;
}
&:focus {
color: $black;
background-color: $yellow;
border-color: $black;
}
}
div[id^="error_wmform"] {
color: $red;
li {
list-style: none;
}
}
.hide-mobile {
display: none;
@media (min-width: $desktop) {
display: block;
}
}
.text--bold {
font-weight: $fw-bold;
}
@media (max-width: $phablet) {
h1,
h1.Document-title {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
hyphens: auto;
}
}
@media (min-width: $phablet) {
h1,
h1.Document-title {
font-size: $fs-up-6;
}
h2 {
font-size: $fs-up-3;
}
h3 {
font-size: $fs-up-1;
}
}
@media (min-width: $tablet-landscape) {
h1,
h1.Document-title {
font-size: $fs-up-7;
}
h2 {
font-size: $fs-up-6;
}
h3 {
font-size: $fs-up-3;
}
}
Dit component bevat voorbeelden van alle HTML-elementen die we kunnen verwachten binnen systemen die gebruik maken van het Den Haag Design System.
Het laat zien hoe basiselementen als tekst, lijsten en citaten worden opgemaakt, en wat de witruimte hiertussen is.