1.2 atoms.forms Form elements
A majority of forms in the site are built from the same base class. See http://v4-alpha.getbootstrap.com/components/forms/ for more information about bootstrap and forms.
Markup: components/atoms/forms/forms.twig
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
<small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</div>
<fieldset class="form-group">
<legend><span>Radio buttons</span></legend>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-legend col-sm-2"><span>Radios</span></legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<label class="col-sm-2">Checkbox</label>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</div>
components/atoms/forms/_forms.scss
, line 1
Markup: components/atoms/forms/forms-custom.twig
<form>
<div class="form-group [modifier class]">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control " id="inputEmail3" placeholder="Email">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
</div>
<div class="form-group [modifier class]">
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10 clearfix">
<input type="password" class="form-control " id="inputPassword3" placeholder="Password">
<p id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</p>
</div>
</div>
<div class="form-group [modifier class]">
<label class="col-sm-2">Radios</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled
</label>
</div>
<div class="radio" >
<label class="custom-control custom-radio">
<input id="radio1" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Toggle this custom radio</span>
</label>
<label class="custom-control custom-radio">
<input id="radio2" name="radio" type="radio" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Or toggle this other custom radio</span>
</label>
</div>
</div>
</div>
<div class="form-group [modifier class]">
<label class="col-sm-2">Checkbox</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Check this custom checkbox</span>
</label>
</div>
</div>
</div>
<div class="form-group [modifier class]">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
</div>
</div>
<div class="form-group [modifier class]">
<label>Range input</label>
<input id="range" type="range" min="0" max="25" step="0.02">
</div>
<div class="form-group [modifier class]">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input" disabled="disabled">
</div>
<div class="form-group [modifier class]">
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="form-group [modifier class]">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
</div>
</form>
components/atoms/forms/_forms.scss
, line 35
1.4 atoms.grouping HTML5 Elements; Grouping content
All HTML elements for grouping content, see https://www.w3.org/TR/html51/grouping-content.html p, hr, pre, blockquote, ol, ul, li, dl, dt, dd, figure, figcaption ,div
components/atoms/grouping/_grouping.scss
, line 1
1.4.1 atoms.grouping.p Body copy
The default font-size
and line-height
properties are applied to the
<body>
element and all paragraphs. In addition, <p>
(paragraphs) receive
a top and bottom margin.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Markup: components/atoms/grouping/grouping-p.twig
<p class="">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.</p>
<p class="">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="">Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit.</p>
components/atoms/grouping/_grouping.scss
, line 116
1.4.2 atoms.grouping.blockquote Block quotes
The <blockquote>
element is for quoting blocks of content from another
source within your document. Wrap the <blockquote>
around any HTML as the quote. For straight
quotes, we recommend a <p>
.
Optionally, add a <footer>
to identify the source of the quote, wrapping
the name of the source work in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Markup: components/atoms/grouping/grouping-blockquote.twig
<blockquote class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</blockquote>
<blockquote class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
Title</cite></footer>
</blockquote>
components/atoms/grouping/_grouping.scss
, line 9
1.4.3 atoms.grouping.figure Figures
The <figure>
element can be used to annotate illustrations, diagrams,
photos, code listings, etc.
Optionally, a <figcaption>
element inside the <figure>
represents the
caption of the figure.
Markup: components/atoms/grouping/grouping-figure.twig
<figure class="">
An illustration, diagram, photo, code listing, etc.
</figure>
<hr/>
<figure class="figure">
<img src="http://placehold.it/350x150/" class="figure-img img-fluid" alt="A generic square placeholder image.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<hr/>
<figure class="figure">
<img src="http://placehold.it/350x150" class="figure-img img-fluid" alt="A generic square placeholder image.">
<figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
components/atoms/grouping/_grouping.scss
, line 90
1.4.4 atoms.grouping.hr Horizontal rule
The <hr>
element represents a paragraph-level thematic break, e.g. a scene
change in a story, or a transition to another topic within a section of a
reference book.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.
Markup: components/atoms/grouping/grouping-hr.twig
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.</p>
<hr class="">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
components/atoms/grouping/_grouping.scss
, line 105
components/atoms/grouping/_grouping.scss
, line 27
1.4.5.1 atoms.grouping.lists.ol Ordered list
The <ol>
element is a list of items in which the order does
explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Markup: components/atoms/grouping/grouping-ol.twig
<ol class="">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ol class="">
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ol>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ol>
components/atoms/grouping/_grouping.scss
, line 40
1.4.5.2 atoms.grouping.lists.ul Unordered list
The <ul>
element is a list of items in which the order does not
explicitly matter.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Markup: components/atoms/grouping/grouping-ul.twig
<ul class="">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul class="">
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
components/atoms/grouping/_grouping.scss
, line 31
1.4.5.3 atoms.grouping.lists.dl Description list
The <dl>
element is a list of terms with their associated descriptions.
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Markup: components/atoms/grouping/grouping-dl.twig
<dl class="">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
components/atoms/grouping/_grouping.scss
, line 49
1.4.6 atoms.grouping.pre Preformatted text
The <pre>
element represents a block of preformatted text, such as
fragments of computer code, ASCII art, etc.
(ノ゜Д゜)ノ ︵ ┻━┻
Markup: components/atoms/grouping/grouping-pre.twig
The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
components/atoms/grouping/_grouping.scss
, line 136
1.5 atoms.icons Icons
This is a selection of al icons made for the "rijkshuisstijl".
Markup: components/atoms/icons/icons.twig
<p class="h1 icon [modifier class]"></p>
components/atoms/icons/_icons.scss
, line 3
1.6 atoms.pagination Pagination
A majority of pagination in the site are built from the same base class.
Markup: components/atoms/pagination/pagination.twig
<ul class="pagination [modifier class]">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Vorige</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">» </span>
<span>Volgende</span>
</a>
</li>
</ul>
components/atoms/pagination/_pagination.scss
, line 1
1.7 atoms.table Tables
The <table>
element displays tabular data in rows, columns, and cells.
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table heading | Table heading | Table heading | Table heading |
---|---|---|---|
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Table cell | Table cell | Table cell | Table cell |
Markup: components/atoms/tables/tables.twig
<table class="table [modifier class]">
<caption>
This is an example table, and this is its caption to describe the contents.
</caption>
<thead class="[modifier class]">
<tr class="[modifier class]">
<th class="[modifier class]">Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="[modifier class]">
<td class="[modifier class]">Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
components/atoms/tables/_tables.scss
, line 1