Styleguide
Deze introductietekst staat altijd bovenin de pagina. Dit is dus altijd de eerste alinea. In dit blok kun je enkel plain text plaatsen en geen andere componenten toevoegen, geen links of buttons aanmaken en geen afbeeldingen plaatsen.
Hieronder tref je eerst een lijstje met alle headers.
Header 2
Paragraph text.
Header 3
Paragraph text.
Header 4
Paragraph text.
Header 5
Paragraph text.
Header 6
Paragraph text.
Stijlen op tekst
Dit is een voorbeeld van bold text.
Dit is een voorbeeld italic text.
Dit is een voorbeeld van underlined text.
Dit is een voorbeeld van doorgehaalde text.
Dit is een voorbeeld van een link. De mouse-over is magenta.
Dit is een voorbeeld van tekst in cyaan.
Dit is een voorbeeld van tekst in magenta.
Dit is een voorbeeld van een blockquote.
Opsommingen
Lijstje met bullet points:
Bullet point nummer een
Bullet point nummer twee
Bullet point nummer drie
Genummerde lijst:
Listing item nummer een
Listing item nummer twee
Listing item nummer drie
Tabellen
Voorbeelditem | Voorbeelditem | Voorbeelditem |
Voorbeelditem | Voorbeelditem | Voorbeelditem |
Voorbeelditem | Voorbeelditem | Voorbeelditem |
Tekst in het Row component (kolommen)
Met het row component kunnen rijen worden aangemaakt waarbinnen kolommen kunnen worden aangemaakt. Het grid kent 12 banen.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom in deze row heeft grootte 1.
Deze kolom heeft grootte 4.
Deze kolom heeft grootte 4.
Deze kolom heeft grootte 4.
Tekst in het Accordion component
Het accordion component kan worden gebruikt om content in en uit te kunnen klappen.
Tekst die wordt getoond in het eerste accordion item.
Tekst die wordt getoond in het eerste accordion item.
Tekst die wordt getoond in het eerste accordion item.
Buttons
Default button Primary button Secondary buttonComponent CTA Button
Er zijn nu 6 verschillende block varianten voor de CTA Button:
Primary (blue)
Primary border (blue)
Secondary (magenta)
Secondary border (magenta)
Grey
Grey border
In deze stylings kun je 3 verschillende button varianten kiezen:
Default (grey)
Primary (blue)
Secondary (magenta)
Call to action button default
Call to action button primary
Call to action button secondary
Call to action button secondary
Rij links in componenten
Er zijn 2 verschillende componenten om een rij links te tonen: Relevant links en More information. De titels die in de componenten worden getoond zijn gebaseerd op een heading 4.
Horizontal line
Hieronder de styling van de horizontal line.
Afbeeldingen en gallerijen
In dit onderdeel tref je de 4 verschillende componenten voor het tonen van afbeeldingen.
Component Image gallery
Hieronder een voorbeeld van het gallery component met 3 afbeeldingen.
Hieronder een voorbeeld van het gallery component met 5 afbeeldingen.
Component Image as link
Dit veld is optioneel voor het plaatsen van tekst.
Component Image with content
Dit veld is verplicht voor het plaatsen van tekst.
OptioneelComponent Afbeelding
Deze afbeelding wordt in een bepaald percentage getoond. In dit geval 100%.
Overige componenten
Review component
-
De kwaliteit is uitstekend
De kwaliteit is uitstekend. Snel geleverd en zelfs een extra exemplaar meegeleverd. Helemaal top!
-
Erg goed
Snel klaar, goede kwaliteit, snelle reactie op vragen
-
Heel goed geholpen tijdens het hele…
Heel goed geholpen tijdens het hele bestelproces. Om aan te raden
