Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.

Heading 2 met een extreem lange titel om te kijken hoe deze netjes afbreekt op mobiele schermen en tablets

Heading 3

Sed dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id arcu finibus, accumsan sapien dictum, rhoncus ex.

Heading 4

Nulla facilisi. Integer interdum tristique lectus, sit amet dictum purus pretium sit amet.

Heading 5

Quisque non arcu non tellus luctus hendrerit sit amet ac lorem.

Heading 6

Phasellus varius erat ac sodales scelerisque.

Typography and Inline Elements

This is a standard paragraph (<p>) containing various inline elements. You can make text bold (<strong>) or italic (<em>). There is also the option to use strikethrough (<del>) or highlight text as inline code.

Hier testen we ook direct specifieke HTML-inline elementen zoals subscript (H₂O) en superscript (E = mc²), evenals keyboard inputs voor documentatie: druk op Ctrl + Shift + R voor een harde herlaadbeurt.

Aanvullend testen we gemarkeerde tekst met deze markering, ingevoegde tekst met toegevoegde tekst en verwijderde tekst met verwijderde tekst. Voor citaten binnen een zin gebruiken we een korter inline citaat.

You can also use links to external sites or internal pages.

Tekstterugloop (Word-wrap) Test

Hier is een extreem lange URL zonder spaties om te controleren of de CSS voorkomt dat de layout breekt op mobiel: Lange Link Test

Een extreem lang onafgebroken woord om overflow te testen: Supercalifragilisticexpialidociouslengteisticexpialidociouslengte-indicatorwoorddatmoetafbrekenopmobiel.

Blockquote Example

The only way to go fast, is to go well.

— Uncle Bob, Clean Code

Lists

Unordered List

• First item in a clean, unnumbered list.
• Second item with a bit more content to see how it wraps on smaller screens like mobile or tablet devices.
• Third item.
  • Sub-item level 1
    • Sub-item level 2 (Diepste nesting test)
  • Terug naar niveau 1

Ordered List

1. Establish clear variable names.
2. Keep functions small and focused.
3. Sub-stap voor extra focus.
4. Nog een sub-stap.
5. Write code that reads like a well-written prose.

Description List

Definition List Title

This is the definition of the title.

Clean Code

Code that has been developed by someone who cares.

Tables

The table must be responsive and not break the layout on mobile screens.

Standaard tabel (Links uitgelijnd)

Geavanceerde tabel (Verschillende uitlijningen)

Code Blocks

Default code block:

function myFunction() {
    console.log("Hello, world!");
}

Code block “javascript”:

function myFunction() {
    console.log("Hello, world!");
}

Inline Code

Use the hugo server command to run the local development server.

Block Code with Syntax Highlighting

// Base component example showing maximum 3 levels of nesting
.card-preview {
    margin: 1rem 0;
    padding: 1.5rem;

    .card-title {
        font-size: 1.25rem;
        color: $primary-color;
    }
}

Hooks

Internal Link

When you use an external link, the link will open in a new tab. And it will show a small arrow icon on the right.

Internal link: Homepage

Internal link (pdf): Over webleads

External link: Webleads

Image

A Markdown image will be automatically converted to a responsive image. The image will be cropped to the correct aspect ratio.

ShortCodes

Details

Param

This shortcode will display the value of the “param” parameter. The “param” parameter is defined in the front matter of this page. If the parameter does not exist, or is empty, the shortcode will not be displayed.

Param "title": Kitchen Sink [title]
Param "summary": De kitchen sink is een pagina die alle functies weergeeft. Zie het als een soort van 'test' pagina [summary]
Param "author": Lorem [author]
Param "price": 39.95
Param "non-existing":

Notice that the “param” parameter is not case-sensitive.

if_param

Use the “if_param” shortcode to display content only if a parameter exists and is not empty.

Using if_param "author"

📢 Auteur melding

Er bestaat een auteur parameters: Lorem [author].

Using if_param "non-existing" (will not be displayed)

Figure

This shortcode will embed an simple image (non responsive).

Image

Parameters:

• src - The path to the image.
• alt - The alternative text for the image.
• caption - The caption for the image (optional).
• mode - The mode for the image (cover or contain, default: cover).

Image (cover)

Image (contain)

Highlight

This shortcode will highlight a code block.

1package main
2
3import "fmt"
4
5func main() {
6for i := 0; i < 3; i++ {
7fmt.Println("Value of i:", i)
8}
9}

QR Code

This shortcode will embed a QR code.

https://gohugo.io

Gallery #1

This shortcode will embed a gallery of images. The images are in the “gallery” subfolder.

Gallery #2

This shortcode will embed a gallery of images. The images are in the “photos” subfolder.

USP

Notice

There are two types of notice blocks:

• Warning
• Info

Formulieren

In the bumper starter v3 site, you can also make forms. Supported fields are:

• Text input
• Email input
• Textarea
• Checkbox
• Radio button
• Select dropdown
• File upload

The forms are protected by a CRSF token and a honeypot field.

Test Form

Test form.

Contact Form

Gebruik het formulier hieronder om contact met ons op te nemen…

Quote Form

Wil je een offerte? Dan kan, zie het formulier hieronder: