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.

Het logo voor in de e-mailhandtekening:

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:

  1. Listing item nummer een

  2. Listing item nummer twee

  3. 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.

Titel van het eerste accordion item

Tekst die wordt getoond in het eerste accordion item.

Titel van het tweede accordion item met een afbeelding

Tekst die wordt getoond in het eerste accordion item.

Titel van het derde accordion item

Tekst die wordt getoond in het eerste accordion item.

Buttons

Default button Primary button Secondary button

Component 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.

Relevant links

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.

Optioneel

Component Afbeelding

Deze afbeelding wordt in een bepaald percentage getoond. In dit geval 100%.

Overige componenten

Review component

5 / 5

Ilse Anthonijsz

2 dagen geleden

De service is zoals ze adverteren

De service is zoals ze adverteren: makkelijk te bestellen, snel geleverd, goede prijs en het resultaat (we hebben readers laten maken) zag er prima uit. Absoluut aanrader.

Formulier

Contact