Dit is de live guide. Op deze pagina liggen alle ontwerpstijlen vast. 

Todo

De volgende items moeten nog worden geïntegreerd op deze pagina:

  • Pagina indeling / kolommen / breedte / breakpoints
  • Hero banner
  • Tabellen
  • Categorie short description / Categorie banner
  • Filters / Attributen
  • Sorteren
  • Pagination
  • Shop diversificatie (kleurgebruik, iconografie)
  • Modals
  • Contextuele menu's
  • Zoeken
  • Iconen / pictogrammen
  • Formulieren / User input
  • Voorkomen weghalen elementen / tags door editor

Dit is een scheidingslijn:

Dit is een h1

Dit is een h2

Dit is een h3

Dit is een h4

Dit is een h5
Dit is een h6

Dit is een p. Een standaard alinea die je zowel in blogs als in categorieën tegen komt. Je ziet hem ook in de beschrijving van producten terug. Zo'n alinea kan dikgedrukte stukken bevatten, schuingedrukte (meestal in onbekende Engelse woorden), onderstreepte tekst of doorgehaalde tekst. Misschien wel het belangrijkste in zo'n stuk tekst, zijn de tekst links. Zoals je ziet, zijn deze anders dan knoppen waar we zo op komen. Interne links naar een blog, , een product en een CMS pagina openen in hetzelfde tabblad. Externe links worden automatisch gestyled als je ze target="_blank" meegeeft en openen daarmee in een nieuw tabblad.

De h2 tussenkop komt veel voor

Eerst laten we de afstand zien tussen twee p elementen. Het komt ook vaak voor dat er een tussenkop tussen de tekst staat.

Lange woorden afbreking Verdampfungstemperatur für Vaporizer Kräuter

Om vervolgens weer verder te gaan met een nieuwe alinea of <p>.

In de tekst komt ook wel een foto voor:

paddodruppels

Zo'n foto in de tekst meet altijd 1024px breed en heeft een bijschrift. De foto en het schuingedrukte bijschrijft lijnen we in het midden uit. Eventuele titel van de afbeelding.

Alt-tekst image in Docs

Bijschrift

After image paragraph

Of een video:

Video onderschrift.

paddodruppels

Zo'n foto. De foto en het schuingedrukte bijschrijft lijnen we in

Lists

Een ander veelvoorkomend element is een opsomming. Daar hebben we 4 smaken van.

Korte UL

  • Een korte UL (unordered list); deze unit
    • Soms heb je ook een lijst in een lijst nodig.
    • Of een link of widget link een blog
      • Dat noem je geneste lijsten.
      • Of nested lists.
    • Maar dat komt zelden voor.
  • Een korte OL (ordered list, met cijfertjes)
  • Een lange UL
  • Een lange OL

De korte versies zijn standaard. Daar hoef je niets extra's voor te doen.

Lange UL

  • Een lange lijst is soms nodig om veel tekst puntsgewijs kwijt te kunnen. Daarbij moeten we ons wel houden aan valide HTML. Dat wil in dit geval zeggen dat zo'n lijst niet onderbroken mag worden door andere elementen. Geen afbeeldingen of <p>'s of andere dingen die niet thuis horen in een lijst totdat deze netjes is afgesloten met een </ul>
  • De lange UL roep je aan door een class toe te voegen. Met een class kun je op een goede manier weergeven hoe een element gestijld moet worden als ook dezelfde type elementen op dezelfde pagina moeten worden weergegeven, maar er verschillend uit moeten zien.
  • Misschien heb je zo een beeld gekregen van het werken met verschillende soorten lijsten. De ongenummerde lijsten of unordered lists gebruik je vaker dan een genummerde of numbered list. Dat is nu eenmaal zo. Pas als je ook daadwerkelijk nummers wilt gebruiken, bijvoorbeeld een ranking, kies je voor een OL.

Korte OL

  1. Als je een ranking wilt tonen
  2. Of wilt linken naar hoofdstukken op een pagina
  3. Gebruik je deze ordered list.
  4. Die toont nummertjes
    1. Ook wanneer je hem nest.

Lange OL

  1. Een lange lijst is soms nodig om veel tekst puntsgewijs kwijt te kunnen. Daarbij moeten we ons wel houden aan valide HTML. Dat wil in dit geval zeggen dat zo'n lijst niet onderbroken mag worden door andere elementen. Geen afbeeldingen of <p>'s of andere dingen die niet thuis horen in een lijst totdat deze netjes is afgesloten met een </ol>
  2. De lange OL roep je aan door een class toe te voegen. Met een class kun je op een goede manier weergeven hoe een element gestijld moet worden als ook dezelfde type elementen op dezelfde pagina moeten worden weergegeven, maar er verschillend uit moeten zien.
  3. Misschien heb je zo een beeld gekregen van het werken met verschillende soorten lijsten. De ongenummerde lijsten of unordered lists gebruik je vaker dan een genummerde of numbered list. Dat is nu eenmaal zo. Pas als je ook daadwerkelijk nummers wilt gebruiken, bijvoorbeeld een ranking, kies je voor een OL.
  • Een lange lijst is soms nodig om veel tekst puntsgewijs kwijt te kunnen. Daarbij moeten we ons wel houden aan valide HTML. Dat wil in dit geval zeggen dat zo'n lijst niet onderbroken mag worden door andere elementen. Geen afbeeldingen of <p>'s of andere dingen die niet thuis horen in een lijst totdat deze netjes is afgesloten met een </ol>
  • De lange OL roep je aan door een class toe te voegen. Met een class kun je op een goede manier weergeven hoe een element gestijld moet worden als ook dezelfde type elementen op dezelfde pagina moeten worden weergegeven, maar er verschillend uit moeten zien.
  • Misschien heb je zo een beeld gekregen van het werken met verschillende soorten lijsten. De ongenummerde lijsten of unordered lists gebruik je vaker dan een genummerde of numbered list. Dat is nu eenmaal zo. Pas als je ook daadwerkelijk nummers wilt gebruiken, bijvoorbeeld een ranking, kies je voor een OL.
  • Een lange lijst is soms nodig om veel tekst puntsgewijs kwijt te kunnen. Daarbij moeten we ons wel houden aan valide HTML. Dat wil in dit geval zeggen dat zo'n lijst niet onderbroken mag worden door andere elementen. Geen afbeeldingen of <p>'s of andere dingen die niet thuis horen in een lijst totdat deze netjes is afgesloten met een </ol>
  • De lange OL roep je aan door een class toe te voegen. Met een class kun je op een goede manier weergeven hoe een element gestijld moet worden als ook dezelfde type elementen op dezelfde pagina moeten worden weergegeven, maar er verschillend uit moeten zien.
  • Misschien heb je zo een beeld gekregen van het werken met verschillende soorten lijsten. De ongenummerde lijsten of unordered lists gebruik je vaker dan een genummerde of numbered list. Dat is nu eenmaal zo. Pas als je ook daadwerkelijk nummers wilt gebruiken, bijvoorbeeld een ranking, kies je voor een OL.

Bronnenlijst 2 ol

  1. Een lange lijst is soms nodig om veel tekst puntsgewijs kwijt te kunnen. Externe link Daarbij moeten we ons wel houden aan valide HTML. Dat wil in dit geval zeggen dat zo'n lijst niet onderbroken mag worden door andere elementen. Geen afbeeldingen of <p>'s of andere dingen die niet thuis horen in een lijst totdat deze netjes is afgesloten met een </ol>
  2. De lange OL roep je aan door een class toe te voegen. Met een class kun je op een goede manier weergeven hoe een element gestijld moet worden als ook dezelfde type elementen op dezelfde pagina moeten worden weergegeven, maar er verschillend uit moeten zien.
  3. Misschien heb je zo een beeld gekregen van het werken met verschillende soorten lijsten. De ongenummerde lijsten of unordered lists gebruik je vaker dan een genummerde of numbered list. Dat is nu eenmaal zo. Pas als je ook daadwerkelijk nummers wilt gebruiken, bijvoorbeeld een ranking, kies je voor een OL.

Tabellen

Om veel korte gegevens weer te kunnen geven, gebruik je een tabel.

Standaard tabel

Voeg altijd de class van het tabeltype wat je wilt toe!
De keuze is nu: basic-overflow
Een standaardtabel ziet er zo uit:

class="basic-overflow"

naam 1 2 3 4 5 6
e standaard E B G D A E
drop d E B G D A D

p drop c

 D A F C G C
open d mineur D A F D A D
link target _blank D A F D A D

Het onderschrift van een tabel.

 

Gekleurde tabel

Je kunt de classes "dhs-table-red", "dhs-table-salmon" etc, gebruiken om de tabel te kleuren.

class="basic-overflow dhs-table-red"

  Kop, kolom 2, rij 1 Kop, k3, r1 Kop k4, r1 Kop, k5, r1
Item, kolom 1, rij 2 Item k2, r2 Item k3, r2 Item k4, r2 Item k5, r2
Item k1, r3 Item k2, r3 Item k3, r3 Item k4, r3 Item k5, r3
Item k1, r4 Item k2, r4 Item k3, r4 Item k4, r4 Item k5, r4
Item k1, r5 Item k2, r5 Item k3, r5 Item k4, r5 Item k5, r5
Item k1, r6 Item k2, r6 Item k3, r6 Item k4, r6 Item k5, r6

class="basic-overflow dhs-table-green"

  Kop, kolom2, rij1 Kop, kolom3, rij1 Kop kolom4, rij1 Kop, kolom5, rij1 Kop, kolom6, rij1
Item, kolom1, rij2 Item k2, r2 Item k3, r2 Item k4, r2 Item k5, r2 Kop, k6, r2
Item k1, r3 Item k2, r3 Item k3, r3 Item k4, r3 Item k5, r3 Kop, k6, r3
Item k1, r4 Item k2, r4 Item k3, r4 Item k4, r4 Item k5, r4 Kop, k6, r4
Item k1, r5 Item k2, r5 Item k3, r5 Item k4, r5 Item k5, r5 Kop, k6, r5
Item k1, r6 Item k2, r6 Item k3, r6 Item k4, r6 Item k5, r6 Kop, k6, r6

class="basic-overflow dhs-table-salmon"

  Kop, kolom2, rij1 Kop, kolom3, rij1 Kop kolom4, rij1 Kop, kolom5, rij1 Kop, kolom6, rij1
Item, kolom1, rij2 Item k2, r2 Item k3, r2 Item k4, r2 Item k5, r2 Kop, k6, r2
Item k1, r3 Item k2, r3 Item k3, r3 Item k4, r3 Item k5, r3 Kop, k6, r3
Item k1, r4 Item k2, r4 Item k3, r4 Item k4, r4 Item k5, r4 Kop, k6, r4
Item k1, r5 Item k2, r5 Item k3, r5 Item k4, r5 Item k5, r5 Kop, k6, r5
Item k1, r6 Item k2, r6 Item k3, r6 Item k4, r6 Item k5, r6 Kop, k6, r6

class="basic-overflow dhs-table-yellow"

  Kop, kolom2, rij1 Kop, kolom3, rij1 Kop kolom4, rij1 Kop, kolom5, rij1 Kop, kolom6, rij1
Item, kolom1, rij2 Item k2, r2 Item k3, r2 Item k4, r2 Item k5, r2 Kop, k6, r2
Item k1, r3 Item k2, r3 Item k3, r3 Item k4, r3 Item k5, r3 Kop, k6, r3
Item k1, r4 Item k2, r4 Item k3, r4 Item k4, r4 Item k5, r4 Kop, k6, r4
Item k1, r5 Item k2, r5 Item k3, r5 Item k4, r5 Item k5, r5 Kop, k6, r5
Item k1, r6 Item k2, r6 Item k3, r6 Item k4, r6 Item k5, r6 Kop, k6, r6

class="basic-overflow dhs-table-blue"

  Kop, kolom2, rij1 Kop, kolom3, rij1 Kop kolom4, rij1 Kop, kolom5, rij1 Kop, kolom6, rij1
Item, kolom1, rij2 Item k2, r2 Item k3, r2 Item k4, r2 Item k5, r2 Kop, k6, r2
Item k1, r3 Item k2, r3 Item k3, r3 Item k4, r3 Item k5, r3 Kop, k6, r3
Item k1, r4 Item k2, r4 Item k3, r4 Item k4, r4 Item k5, r4 Kop, k6, r4
Item k1, r5 Item k2, r5 Item k3, r5 Item k4, r5 Item k5, r5 Kop, k6, r5
Item k1, r6 Item k2, r6 Item k3, r6 Item k4, r6 Item k5, r6 Kop, k6, r6

class="basic-overflow dhs-table-pink"

  Kop, kolom2, rij1 Kop, kolom3, rij1 Kop kolom4, rij1 Kop, kolom5, rij1 Kop, kolom6, rij1
Item, kolom1, rij2 Item k2, r2 Item k3, r2 Item k4, r2 Item k5, r2 Kop, k6, r2
Item k1, r3 Item k2, r3 Item k3, r3 Item k4, r3 Item k5, r3 Kop, k6, r3
Item k1, r4 Item k2, r4 Item k3, r4 Item k4, r4 Item k5, r4 Kop, k6, r4
Item k1, r5 Item k2, r5 Item k3, r5 Item k4, r5 Item k5, r5 Kop, k6, r5
Item k1, r6 Item k2, r6 Item k3, r6 Item k4, r6 Item k5, r6 Kop, k6, r6

Knoppen

2 type knoppen:

1. Primaire knop

<a class="dhs-btn" href="/headshop" title="Knop">Knop</a>

Default groene primaire knop (dhs-btn)

Primaire knop kleuren

<a class="dhs-btn btn-red" href="/headshop" title="Knop">Knop</a>
Keuze uit: btn-red, btn-green, btn-salmon, btn-yellow, btn-blue, btn-pink

Rode knop (btn-red) Groene knop (btn-green) Zalm (btn-salmon) Geel (btn-yellow) Blauw (btn-blue) Roze (btn-pink)

Koop knop

<a class="dhs-btn-buy" href="/blog" title="Knop">Knop</a>

PDP Koop Nu
Dit is een blockquote.

Zo'n blockquote plaats je zomaar tussen een stuk tekst in.

Speciale tekens

Dan hebben we nog wat tekens die in een tekst voor kunnen komen. Vierkante meter m2 bijvoorbeeld of H2O. Of emoji's als vinkjes ✔️ en kruisjes ❌.

Product advertenties

Verschillende manieren om producten in blog post te tonen.

Catalogus Producten Lijst

Catalog Products List