Style Guide

A complete guide to all Ollie's modular interface elements.
Colors
A complete color swatch used to color all interface elements on the website.
Theme Colors
Primary 1
#ff9431
Primary 2
#6d70c6
Primary 3
#96dae4
Primary 3
#cdeeaa
Grays
Gray 1
#4e5152
Gray 2
#969696
Gray 3
#ECEBEA
Gray 4
#FAF8F5
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul></ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
Icons - Interface
Headings, body and other common text elements.
Icons - Social
Icons for popular social networks.
Badges
Combine with other components to display metadata
Default
Badge Text
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error

Leerkrachten

Leerkracht
Groep
Uitnodiging
Beheersrechten
Acties
Voornaam van der Achternaam
voornaam.achternaam@nicolaasmeasschool.nl
Groep 5A
Nog niet geaccepteerd
Verstuur nogmaals
Voornaam van der Achternaam
voornaam.achternaam@nicolaasmeasschool.nl
Groep 5A
Geaccepteerd op
01-01-2020

Notification bars

Gelukt!
This is some text inside of a div block.
Opletten!
This is some text inside of a div block.
Mislukt!
This is some text inside of a div block.

Dashboard Parents

10 december 2019
11:00 tot 11:45
Subject of the presentation
28-05-2020
11:00 - 11:45
School name here
Groep 5A
Vul hier het onderwerp van je presentatie in
28-05-2020
11:00 - 11:45
School name here
Groep 5A
Subject of the presentation
10 december 2019
11:00 tot 11:45
Wachten op reactie school
AfmeldenPresentatie wijzigen
Subject of the presentation
10 december 2019
11:00 tot 11:45
Subject of the presentation
10 december 2019
11:00 tot 11:45
Subject of the presentation
10 december 2019
11:00 tot 11:45
Afgerond
Subject of the presentation
10 december 2019
11:00 tot 11:45
Geannuleerd

Jouw school gebruikt Penna nog niet

Introduceer Penna op jouw school door onderstaande link te delen met een leerkracht of de schooldirecteur.  

Je hebt nog geen presentatie gepland

Je school maakt gebruik van Penna. Vraag de leerkracht om een link naar de planning zodat je je kan inschrijven om een presentatie te geven.

Titel van de presentatie

Je hebt nog geen presentaties gedownload

Zodra je één van onze kant-en-klare presentaties download dan tonen we die hier.  Je kan ook zelf een presentatie maken met behulp van ons template.

Bekijk presentaties
Titel van de presentatie

Je hebt nog geen favoriete presentaties

Zodra je één van onze kant-en-klare presentaties markeert als favoriet dan tonen we die hier. Je kan ook zelf een presentatie maken met behulp van ons template.

Bekijk presentaties

Dashboard Teachers

Het is belangrijk dat de leraar jouw presentatie te zien krijgt voordat je de presentatie in de klas geeft.
Het is belangrijk dat de leraar jouw presentatie te zien krijgt voordat je de presentatie in de klas geeft.
10 december 2019
11:00 tot 11:45
Subject of the presentation
10 december 2019
11:00 tot 11:45
Door Thomas (vader van Maes)
Subject of the presentation
10 december 2019
11:00 tot 11:45
Door Thomas (vader van Maes)
Subject of the presentation
10 december 2019
11:00 tot 11:45
Door Thomas (vader van Maes)
Goedgekeurd
Subject of the presentation
10 december 2019
11:00 tot 11:45
Door Thomas (vader van Maes)
Subject of the presentation
10 december 2019
11:00 tot 11:45
Door Thomas (vader van Maes)
Afgerond
Subject of the presentation
10 december 2019
11:00 tot 11:45
Door Thomas (vader van Maes)
Geannuleerd

Maak een planning

Je hebt momenteel nog geen data toegevoegd waarop mensen zich mogen inschrijven voor een presentatie. Start met het toevoegen van plekken.

Plek toevoegen

Wachten op inschrijvingen

Er zijn momenteel nog geen inschrijvingen. Deel de planning met de ouders van de en gebruik hiervoor ons e-mail template.

Planning delen

Presentaties goedkeuren

Er zijn momenteel nog geen presentaties om goed te keuren. Zodra dit het geval is krijg je van ons bericht.

Geplande presentaties

Er zijn momenteel nog geen presentaties gepland. Motiveer ouders om zich in te schrijven voor de planning. Maak hierbij gebruik van onze reminder template!

Planning delen

Presentatie delen

Na afloop stuur je de ouders van de groep een e-mail met daarin de presentatie en de Wiz-quiz voor thuis. Je kunt hiervoor onze standaard e-mailtekst gebruiken.

Afgeronde presentaties

Momenteel zijn er nog geen afgeronde presentaties.

Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
Form Inputs
Styles for form inputs and form feedback states.
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Tooltips
Provide additional information in a small pop-up.
Verwijder presentatie als favoriet
Markeer presentatie als favoriet
Banner
Provide additional information in a small pop-up.
This is some text inside of a div block.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho