Webstyle guide

Headings and paragraphs

Heading	Example
`<h1 class="title-big"></h1>`	Op weg naar herstel
`<h1></h1>`	Op weg naar herstel
`<h2></h2>`	Op weg naar herstel
`<h3></h3>`	Op weg naar herstel
`<h4></h4>`	Op weg naar herstel
`<h5></h5>`	Op weg naar herstel
`<h6></h6>`	Woensdag 14/08/2024

Text

`<label></label>`	Op weg naar herstel
`<p class="intro"></p>`	Als jouw systeem aangesloten is op een alarmcentrale, moet je dit niet zelf doen: de alarmcentrale zorgt voor de registratie.
`<p></p>`	Als jouw systeem aangesloten is op een alarmcentrale, moet je dit niet zelf doen: de alarmcentrale zorgt voor de registratie.
`<p class="small"></p>`	Dit initiatief is een samenwerking tussen Gezinsbond Nazareth-Eke, Rebelle vzw, Solidaris en Huis van het Kind Nazareth.
`<a> href="#">...</a>`	Neem contact met ons op
`<a class="arrows" href="#"></a>`	Lees meer
`<a class="w-border" href="#"></a>`	Neem contact met ons op

Lists

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
Niveau 1
Niveau 1
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
- Niveau 2
- Niveau 2
  - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis vel neque vitae varius. Curabitur tincidunt arcu a turpis ullamcorper facilisis ultrices sit amet nisl. Cras vitae ex efficitur, tempus tortor in, aliquet arcu. Maecenas suscipit, lectus vel facilisis condimentum, nulla leo viverra lacus, a consequat nisi sapien id sapien.
  - Niveau 3
  - Niveau 3

Buttons

Forms

Regular form

Gebruikersnaam

Wachtwoord

Username (disabled)

Password (disabled)

Select

Select (disabled)

Date

Date (disabled)

Textarea

Textarea (disabled)

Radio

Radio group

Option 1

Option 2

Option 3

Radio group (disabled)

Option 1

Option 2

Option 3

Gender

Man

Vrouw

Checkbox

Inline checkboxes

Option 1

Option 2

Option 3

Checkbox group

Option 1

Option 2

Option 3

Checkbox group (disabled)

Option 1

Option 2

Option 3

Tagify

Checkbox switch

Checkbox switch (disabled)

A range input with min=1, max=10 and step=1

1 2 3 4 5 6 7 8 9 10

form.table-layout

Some heading

Kies een gebruikersnaam

Minimum 6 tekens
Kies geen naam waarmee je herkenbaar bent (want de gebruikersnaam is zichtbaar op het deelnemersforum). De gebruikersnaam mag alleen bestaan uit letters, cijfers, punten (.), koppeltekens (-) of onderstrepingstekens (_).

Kies een wachtwoord

Minstens 10 karakters lang en moet minstens 1 kleine letter, hoofdletter, cijfer en leesteken bevatten.
De gevraagde combinatie is streng maar garandeert een zeer veilig wachtwoord. Op die manier dragen we zorg voor je privacy, we vragen je immers om persoonlijke info in te vullen bij de oefeningen.
Tip: gebruik een makkelijk te onthouden zin als wachtwoord.
Bvb.: Ik ben de 1ste winnaar!

Wachtwoord bevestigen

Wat is je leeftijd?

Geslacht

Man

Vrouw

Anders

Postcode

Ik woon in het buitenland

form.table-layout.horizontal-layout

Likert

Modals

Popovers

Tooltips

Toast

Alerts

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

Opgelet! Ben je in begeleiding bij een Centrum Geestelijke Gezondheidszorg (CGG), of gaat die begeleiding opgestart worden? Dan zal je hulpverlener voor jou een account aanmaken. Je hoeft jezelf hier dan NIET aan te melden.
Lees meer over de 'blended' begeleiding bij een CGG

This is a info alert with an example link. Give it a click if you like.

This is a light alert with an example link. Give it a click if you like.

This is a dark alert with an example link. Give it a click if you like.

Badges

Primary Secondary Success Danger Warning Info Light Dark

Accordion

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #2

Collapsible Group Item #3

Carousel using Tiny Slider 2

Visit on Github: https://ganlanyuan.github.io/tiny-slider/

Tabs

Aanmelden

Aanmelding

Tijdens de aanmelding wordt er aan de hand van een aantal vragen dieper ingegaan op jouw persoonlijke situatie. Zo krijgt je hulpverlener een beter beeld over jou en over jouw redenen tot aanmelding.

De vragen hebben te maken met je drinken, de problemen die je hierbij ondervindt en je persoonlijke levensomstandigheden. Alle gegevens worden vertrouwelijk behandeld en zijn enkel toegankelijk voor je persoonlijke hulpverlener. Bij deelname aan de online zelfhulp wordt je privacy gegarandeerd.