Helder Klimaat · fictief concept door Kern Studio

Helder Klimaat · stijlgids

Helder Klimaat · stijlgids
Typografie
HTML-koppen
HTML-elementen bepalen de standaardvorm van koppen.
Voorbeeld
Voorbeeldkop 1
Voorbeeld
Voorbeeldkop 2
Voorbeeld
Voorbeeldkop 3
Voorbeeld
Voorbeeldkop 4
Voorbeeld
Voorbeeldkop 5
Voorbeeld
Voorbeeldkop 6
Kopklassen
Een klasse kan een kop een andere visuele rol geven.
heading-style-h1
Voorbeeldkop 2
heading-style-h2
Voorbeeldkop 2
heading-style-h3
Voorbeeldkop 2
heading-style-h4
Voorbeeldkop 2
heading-style-h5
Voorbeeldkop 2
heading-style-h6
Voorbeeldkop 2
Overige HTML-elementen
Deze elementen tonen de standaard tekstvormen.
Alinea’s

Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.

Links
Citaten
Citaat
Ongenummerde lijsten
  • Voorbeeldonderdeel

  • Voorbeeldonderdeel

Ongenummerde lijsten
  • Voorbeeldonderdeel

  • Voorbeeldonderdeel

Genummerde lijsten
  1. Voorbeeldonderdeel

  2. Voorbeeldonderdeel

  3. Voorbeeldonderdeel

Tekstgrootte
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
text-size-large

Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.

text-size-medium

Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.

text-size-regular

Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.

text-size-small

Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.

text-size-tiny

Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.

Lettergewichten
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Tekststijlen
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-link
text-style-2lines
Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.
text-style-3lines
Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.Dit is een voorbeeldtekst voor de stijlgids van Helder Klimaat. De lengte laat zien hoe woorden, regels en witruimte zich tot elkaar verhouden. Deze inhoud toont de vorm van de component en beschrijft geen klant, resultaat of bedrijfsbelofte. Een duidelijke tekst helpt een bezoeker om een vraag te begrijpen en de volgende stap te vinden.
text-style-muted
text-style-muted
text-style-tagline
text-style-tagline
text-color-white
text-color-white
Tekstuitlijning
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Opgemaakte tekst
text-rich-text
Voorbeeldkop 1
Voorbeeldkop 2
Voorbeeldkop 3
Voorbeeldkop 4
Voorbeeldkop 5
Voorbeeldkop 6
Een voorbeeld van een citaat

Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.

Een link binnen een tekstblok

  • Lijstonderdeel
  • Lijstonderdeel
  • Lijstonderdeel
  1. Lijstonderdeel
  2. Lijstonderdeel
  3. Lijstonderdeel
Kleuren
Kleurcombinaties
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
color-scheme-1
Voorbeeldkop 5

Tekstkleur

Bediening
Knoppen
button
button
is-small
button
is-secondary
button
is-secondary
is-small
button
is-link
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.is-alternate
button
is-alternate
button
is-alternate
is-small
button
is-secondary
is-alternate
button
is-secondary
is-small
is-alternate
button
is-link
is-alternate
Knoppen met pictogrammen
button
is-icon
button
is-small
is-icon
button
is-secondary
is-icon
button
is-secondary
is-small
is-icon
button
is-link
is-icon
button
is-icon
is-alternate
button
is-small
is-icon
is-alternate
button
is-secondary
is-icon
is-alternate
button
is-secondary
is-small
is-icon
is-alternate
button
is-link
is-icon
is-alternate
Labels
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
tag
Label
tag
is-text
Label
tag
is-alternate
Label
tag
is-text
is-alternate
Label
Formulierelementen
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.is-alternate
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
form_checkbox
form_radio
button
Pictogrammen als beeld
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-custom1
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-custom1
Pictogrammen als SVG
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
icon-embed-xxsmall
icon-embed-xsmall
icon-embed-small
icon-embed-medium
icon-embed-large
icon-embed-xlarge
icon-embed-custom1
Radius
Groot
‍Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
Middel
‍Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
Klein
‍Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
Effecten
Schaduwen
‍Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
Structuurklassen
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Maximale breedtes
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Binnenruimte
Richtingsklassen
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Maatklassen
padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3
Buitenruimte
Richtingsklassen
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Maatklassen
margin-0
margin-tiny
margin-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3
Tussenruimtes
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Hulpklassen
Deze toepassing laat de vorm, ruimte en uitlijning van dit onderdeel zien.
hide
Dit element is verborgen
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
inherit-color