Skip to content

Campus Design System

Main Navigation Home Handboek Richtlijnen Components Storybook

Appearance

Sidebar Navigation

Handboek

Introductie

Pijlers

Boost Track

1. Concept & Design

2. Kickstart

3. Fine tune

4. Top notch

Design tokens

Voor developers

Aan de slag

Architectuur

CUBE

Introductie

Composition

Utility

Block

Exception

Fluid typescaling

Logical properties

🚀 Utility CSS classes

Composition

Stack

Cluster

Autogrid

Reel

Imposter

Switcher

Utilities

Base

Reset

Layout

Display

Isolation

Overflow

Position

Visibility

Top/Right/Bottom/Left

Z-index

Flexbox & Grid

Flex

Flex basis

Flex direction

Flex grow

Flex shrink

Flex wrap

Order

Grid template columns

Grid column start/end

Grid template rows

Grid row start/end

Grid flow

Grid auto columns

Grid auto rows

Gap

Justify content

Justify items

Justify self

Align content

Align items

Align self

Place content

Place items

Place self

Spacing

Inset

Padding

Margin

Sizing

Typography

Applying type

Font Weight

Line Clamp

Text Align

Text Color

Text Decoration

Text Decoration Style

Text Decoration Thickness

Text Transform

Text Overflow

Whitespace

Backgrounds

Background Color

Borders

Border Radius

Border Width

Border Color

Border Style

Ring Width

Ring Color

Ring Offset

Effects

Elevation

Opacity

Mix Blend Mode

Filters

Blur

Brightness

Contrast

Drop Shadow

Grayscale

Hue Rotate

Invert

Saturate

Sepia

Backdrop Blur

Backdrop Brightness

Backdrop Contrast

Backdrop Grayscale

Backdrop Hue Rotate

Backdrop Saturate

Backdrop Sepia

Transitions & Animations

Transition Property

Transition Duration

Transition Ease

Transition Delay

Animation

Transforms

Scale

Rotate

Translate

Skew

Transform Origin

Voor designers

Voor managers

Rol van die Keure

Principes

Gebruikers

Richtlijnen

Prioriteiten

Richtlijnen

Stijl

Typografie

Lettergrootte

Lettertype

Regelafstand

Opmaak

Kleur

Contrast

Contrast voor niet-tekstuele inhoud

Gebruik kleur met een doel

Gebruik kleur niet alleen

Verschillen in waarneming

Voorkeursinstellingen

Ruimte

Box model

Spacing scale

Relaties

Interactieve elementen

Iconografie

Kleur

Afmetingen

Met labels

Patronen

Fouten en waarschuwingen

WCAG

1.1.1 Niet-tekstuele inhoud

1.2.1 Audio-only en video-only inhoud

1.2.2 Ondertitels (Opgenomen)

1.2.3 Audio beschrijving of media alternatief (Opgenomen)

1.2.4 Ondertitels (Live)

1.2.5 Audio beschrijving (Opgenomen)

1.3.1 Informatie en relaties

1.3.2 Structurele gegevens

1.3.3 Zintuiglijke Kenmerken

1.3.4 Oriëntatie

1.3.5 Identificeer het inputdoel

1.4.1 Gebruik van kleur

1.4.2 Audio-regeling

1.4.3 Contrast (minimum)

1.4.4 Tekst herschalen

1.4.5 Afbeeldingen van tekst

1.4.10 Reflow

1.4.11 Non-tekst Contrast

1.4.12 Tekstafstand

1.4.13 Inhoud bij hover of focus

2.1.1 Toetsenbordtoegankelijkheid

2.1.2 Geen toetsvergrendeling

2.1.4 Sneltoetsen met Karakters

2.2.1 Voldoende tijd

2.2.2 Pauzeer/stop/verleng

2.3.1 Maximaal drie flitsen

2.4.1 Blokken omzeilen

2.4.2 Paginatitels

2.4.3 Focusvolgorde

2.4.4 Doel van de link

2.4.5 Meerdere manieren

2.4.6 Koppen en labels

2.4.7 Focus zichtbaar

2.4.11 Focus niet belemmerd

2.5.1 Pointergebaren

2.5.2 Pointer Annulering

2.5.3 Label in naam

2.5.4 Bewegings-activering

2.5.7 Sleepbewegingen

2.5.8 Doelgrootte (minimaal)

3.1.1 Taal van de pagina

3.1.2 Taal van onderdelen

3.2.1 Bij focus

3.2.2 Bij invoer

3.2.3 Consistente navigatie

3.2.4 Consistente identificatie

3.2.6 Consistente hulp

3.3.1 Foutidentificatie

3.3.2 Labels of instructies

3.3.3 Foutsuggestie

3.3.4 Foutpreventie

3.3.7 Redundante invoer

3.3.8 Toegankelijke authenticatie (minimaal)

4.1.2 Naam, Rol, Waarde

4.1.3 Statusberichten

Taal

Components

Changelog

On this page

Components

Pager

Next pageHandboek