<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-primary">
Button
</button>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-primary">
Anchor
</a>
</div>
<div class="col-md-6">
<a href="#" class="btn btn-primary download">
Aanvraagformulier downloaden
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-primary" disabled>
Disabled
</button>
</div>
</div>
<div class="row example">
<div class="col-md-3 example-standard">
<p><i>Standard</i></p>
<button type="button" class="btn btn-primary">
Call to action
</button>
</div>
<div class="col-md-3 example-hover">
<p><i>Hover/Focus</i></p>
<button type="button" class="btn btn-primary">
Call to action
</button>
</div>
<div class="col-md-3 example-active">
<p><i>Active</i></p>
<button type="button" class="btn btn-primary">
Call to action
</button>
</div>
<div class="col-md-3 example-">
<p><i>Disabled</i></p>
<button type="button" class="btn btn-primary" disabled>
Call to action
</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Gebruik:</label>
<p>De oranje kleur is een intense kleur om de aandacht te trekken. Maar teveel oranje is overweldigend voor de gebruiker en vermindert het gewenste effect van de button.</p>
<p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
</div>
</div>
<h2 style="margin-bottom: 24px; margin-top: 40px;">Secundaire button</h2>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-default">
Button
</button>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-default">
Anchor
</a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-default download">
Downloaden
</a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-default extern">
Lees verder
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-default" disabled>
Disabled
</button>
</div>
</div>
<div class="row example">
<div class="col-md-3 example-standard">
<p><i>Standard</i></p>
<button type="button" class="btn btn-default">
Volgende
</button>
</div>
<div class="col-md-3 example-hover">
<p><i>Hover/Focus</i></p>
<button type="button" class="btn btn-default">
Volgende
</button>
</div>
<div class="col-md-3 example-active">
<p><i>Active</i></p>
<button type="button" class="btn btn-default">
Volgende
</button>
</div>
<div class="col-md-3 example-">
<p><i>Disabled</i></p>
<button type="button" class="btn btn-default" disabled>
Volgende
</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Gebruik:</label>
<p>O.A. secundaire acties in formulieren</p>
</div>
</div>
<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-link">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Button
</button>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-link">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Anchor
</a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-link download">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Downloaden
</a>
</div>
<div class="col-md-3">
<a href="#" class="btn btn-link extern">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Lees verder
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<button type="button" class="btn btn-link" disabled>
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Disabled
</button>
</div>
</div>
<div class="row example">
<div class="col-md-3 example-standard">
<p><i>Standard</i></p>
<button type="button" class="btn btn-link">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Lees verder
</button>
</div>
<div class="col-md-3 example-hover">
<p><i>Hover/Focus</i></p>
<button type="button" class="btn btn-link">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Lees verder
</button>
</div>
<div class="col-md-3 example-active">
<p><i>Active</i></p>
<button type="button" class="btn btn-link">
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Lees verder
</button>
</div>
<div class="col-md-3 example-">
<p><i>Disabled</i></p>
<button type="button" class="btn btn-link" disabled>
<span class="icon fas fa-angle-right" aria-hidden="true"></span>
Lees verder
</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label>Gebruik:</label>
<p>Lage prioriteit interacties</p>
</div>
</div>
<h2 style="margin-bottom: 24px">Primaire button / Call to action</h2>
<div class="row">
<div class="col-md-3">
{{> '@button' label='Button' type='button' modifier='primary' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Anchor' modifier='btn btn-primary' url='#' }}
</div>
<div class="col-md-6">
{{> '@anchor' label='Aanvraagformulier downloaden' modifier='btn btn-primary download' url='#' }}
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
{{> '@button' label='Disabled' type='button' modifier='primary' disabled=true }}
</div>
</div>
<div class="row example">
{{#each primary-buttons }}
<div class="col-md-3 example-{{ state }}">
<p><i>{{ example-label }}</i></p>
{{> '@button' }}
</div>
{{/each}}
</div>
<div class="row">
<div class="col-md-6">
<label>Gebruik:</label>
<p>De oranje kleur is een intense kleur om de aandacht te trekken. Maar teveel oranje is overweldigend voor de gebruiker en vermindert het gewenste effect van de button.</p>
<p>De gebruiksregel voor dit element is om maximaal één primaire button per pagina te gebruiken.</p>
</div>
</div>
<h2 style="margin-bottom: 24px; margin-top: 40px;">Secundaire button</h2>
<div class="row">
<div class="col-md-3">
{{> '@button' label='Button' type='button' modifier='default' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Anchor' modifier='btn btn-default' url='#' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Downloaden' modifier='btn btn-default download' url='#' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Lees verder' modifier='btn btn-default extern' url='#' }}
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
{{> '@button' label='Disabled' type='button' modifier='default' disabled=true }}
</div>
</div>
<div class="row example">
{{#each secundary-buttons }}
<div class="col-md-3 example-{{ state }}">
<p><i>{{ example-label }}</i></p>
{{> '@button' }}
</div>
{{/each}}
</div>
<div class="row">
<div class="col-md-6">
<label>Gebruik:</label>
<p>O.A. secundaire acties in formulieren</p>
</div>
</div>
<h2 style="margin-bottom: 24px; margin-top: 40px;">Tertiaire button</h2>
<div class="row">
<div class="col-md-3">
{{> '@button' label='Button' type='button' modifier='link' icon='icon fas fa-angle-right' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Anchor' modifier='btn btn-link' icon='icon fas fa-angle-right' url='#' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Downloaden' modifier='btn btn-link download' icon='icon fas fa-angle-right' url='#' }}
</div>
<div class="col-md-3">
{{> '@anchor' label='Lees verder' modifier='btn btn-link extern' icon='icon fas fa-angle-right' url='#' }}
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
{{> '@button' label='Disabled' type='button' modifier='link' icon='icon fas fa-angle-right' disabled=true }}
</div>
</div>
<div class="row example">
{{#each tertiary-buttons }}
<div class="col-md-3 example-{{ state }}">
<p><i>{{ example-label }}</i></p>
{{> '@button' }}
</div>
{{/each}}
</div>
<div class="row">
<div class="col-md-6">
<label>Gebruik:</label>
<p>Lage prioriteit interacties</p>
</div>
</div>
primary-buttons:
- example-label: Standard
label: Call to action
type: button
modifier: primary
state: standard
- example-label: Hover/Focus
label: Call to action
type: button
modifier: primary
state: hover
- example-label: Active
label: Call to action
type: button
modifier: primary
state: active
- example-label: Disabled
label: Call to action
type: button
modifier: primary
disabled: true
secundary-buttons:
- example-label: Standard
label: Volgende
type: button
modifier: default
state: standard
- example-label: Hover/Focus
label: Volgende
type: button
modifier: default
state: hover
- example-label: Active
label: Volgende
type: button
modifier: default
state: active
- example-label: Disabled
label: Volgende
type: button
modifier: default
disabled: true
tertiary-buttons:
- example-label: Standard
label: Lees verder
type: button
modifier: link
state: standard
icon: icon fas fa-angle-right
- example-label: Hover/Focus
label: Lees verder
type: button
modifier: link
icon: icon fas fa-angle-right
state: hover
- example-label: Active
label: Lees verder
type: button
modifier: link
icon: icon fas fa-angle-right
state: active
- example-label: Disabled
label: Lees verder
type: button
modifier: link
icon: icon fas fa-angle-right
disabled: true
.example {
border-bottom: 2px solid $grijs-10;
border-top: 2px solid $grijs-10;
margin-bottom: $u3;
margin-top: $u3;
padding-bottom: $u3;
padding-top: $u2;
.btn {
&.btn-primary {
&:hover,
&:focus {
background-color: $btn-primary-bg;
border-color: $btn-primary-bg;
}
&[disabled] {
&,
&:hover {
background-color: $dso-button-primary-disabled-color;
border-color: $dso-button-primary-disabled-color;
color: $wit;
opacity: 1;
}
}
}
&.btn-default {
&:hover,
&:focus {
background-color: $wit;
border-color: $grasgroen;
color: $grasgroen;
}
&[disabled] {
&,
&:hover {
background-color: $wit;
border-color: $grasgroen-40;
color: $grasgroen-40;
opacity: 1;
}
}
}
&.btn-link {
&:hover,
&:focus {
color: $grasgroen;
.icon {
background-color: $wit;
border-color: $grasgroen;
color: $grasgroen;
}
}
&[disabled] {
&,
&:hover {
color: $grasgroen-40;
opacity: 1;
.icon {
background-color: $wit;
border-color: $grasgroen-40;
color: $grasgroen-40;
}
}
}
}
}
.example-hover .btn.btn-primary {
background-color: $dso-button-primary-hover-color;
border-color: $dso-button-primary-hover-color;
color: $wit;
}
.example-active .btn.btn-primary {
background-color: $dso-button-primary-active-color;
border-color: $dso-button-primary-active-color;
color: $wit;
}
.example-hover .btn.btn-default {
background-color: $grasgroen;
border-color: $grasgroen;
color: $wit;
}
.example-active .btn.btn-default {
background-color: $bosgroen;
border-color: $bosgroen;
color: $wit;
}
.example-hover .btn.btn-link {
.icon {
background-color: $grasgroen;
border-color: $grasgroen;
color: $wit;
}
}
.example-active .btn.btn-link {
color: $bosgroen;
.icon {
background-color: $bosgroen;
border-color: $bosgroen;
color: $wit;
}
}
}
There are no notes for this item.