sofatutor Playground

Components

Components are portions of reusable pieces within your system and they serve as the building blocks for your interface.

Accordion

Accordion is the interactive element that can help us to organize and cluster information in one single container. Accordions can be placed in different types of cantainers or boxes that are designed according to the context of the layout. Normally lists that are used inside of accordions and they are divided by gray lines which their height may vary. These lines are called dividers.

The behaviour of the accordion may also vary, in order to display its content in different ways. Therefore we can find some different examples.

STYLES
SPECS

All open

By default, one pane in an accordion is open. Simultaneously the rest of the panes can be opened. All panes remain opened.

  • sofatutor.com: Zuwachs in der Geschäftsführung der Online-Lernplattform (17.07.2018)

    Berlin, Juli 2018. Die Online-Lernplattform sofatutor.com erhält Zuwachs in der Geschäftsführung – die Verstärkung kommt aus den eigenen Reihen. Ab Juli 2018 wird der bisherige Marketingleiter Arne Strawe, neben Colin Schlüter und Stephan Bayer, als dritter Managing Director in der Leitung des Berliner Unternehmens fungieren.

    Gründer Stephan Bayer freut sich über die Veränderung: „sofatutor ist in den letzten Jahren gewaltig gewachsen. Wir haben uns daher dazu entschieden, noch jemanden mit in die Geschäftsführung zu nehmen, um noch effektiver agieren zu können. Für Colin und mich steckt sehr viel Herzblut in unserer Plattform. Daher war klar, dass die Wahl nur auf jemanden fallen kann, der unsere Vision zu 100 Prozent teilt. Wir arbeiten seit Jahren eng mit Arne zusammen und er ist mit dafür verantwortlich, dass wir heute zu den führenden Anbietern in Deutschland gehören. Ein besseres Match können wir uns nicht vorstellen.” Strawe war 2012 von Google zur Lernplattform sofatutor gewechselt und ist seit 2016 als Head of Marketing für das Wachstum des Unternehmens verantwortlich. Diesen Fokus wird er innerhalb der Geschäftsführung weiter verfolgen. „Ich glaube an den Mehrwert von digitalen Lernmedien für Schüler*innen aber auch Lehrer*innen. Lernen muss jeder, dafür zu sorgen, dass es auch Spaß macht, das ist unsere Mission. In sofatutor steckt großes Potenzial und ich freue mich, dies zukünftig noch konzentrierter aufdecken und weiterentwickeln zu können”, so Arne Strawe über seine neue Position….

  • Gute Vorsätze: Mit diesen drei Lerntipps starten Schüler*innen im neuen Schuljahr erfolgreich durch (28.06.2018)

    Mit dem Ende der Sommerferien bereiten sich rund 8 Millionen Kinder und Jugendliche in Deutschland auf das neue Schuljahr vor. Lernstrategien helfen Schüler*innen, mühelos ins neue Schuljahr zu starten.

    Lerntipp 1: Vorwissen aktivieren Lernstoff, der im vergangenen Schuljahr nicht verstanden wurde, kann neue Lernerfolge erschweren. Um den Anschluss schnell wiederzufinden, ist es sinnvoll, das Vorwissen aus dem letzten Schuljahr zum Schulbeginn zu aktivieren und die relevanten Informationen aus dem Langzeitgedächtnis abzurufen. Dadurch wird bereits vorhandenes Wissen mit neu Gelerntem leichter vernetzt. Lernstoff erhält auf diese Weise mehr Sinn, da er als großes Ganzes betrachtet wird und nicht als isolierte Insel…..

All closed

By default, all panes in an accordion are closed. But they can be opened one by one, remaining all panes opened.

Buttons

These are the main styles and interactions of the buttons being used in the platform. Colors, margins, corners and sizes should followed according to interactions to preserve a consistent style within the platform, magazin and newsletters.

Color Variations

Primary blue button are being used for main actions in the platform and marketing material. If blue or green depends in the context and contrast.

Sizing and margins

Four sizes are used in the platform following the 8pt vertical grid. Border radius is 4px for all versions. Buttons are using Open Sans font in Bold and Regular, depending the sytle of the button (see color variation above). Minimum left and right paddings may vary depending on the size of the button.

button_paddings

Callouts

Callouts are a container components which are displayed either over the entire screen width or within content areas. It is also possible to add a specific class to the callout-container, when JavaScript or extra styles are needed. They can be used with one line of text or in combination with an info text. Within the info text links can be placed. They are presented in their special feedback colors. The responsive views behave according to the grid.

Basic Callouts for Content Areas

This is a success callout

.callout.callout--has-icon.sucess

This is a warning callout

.callout.callout--has-icon.warning.js-new-class

This is a alert callout

.callout.callout--has-icon.alert

Basic Callouts Full Width

This is a alert callout

the full-width version only adds a grid-container class inside of the callout.

.callout.callout--has-icon.alert

Detailed Callouts

This is a longer callout

This is an example link: link

.callout.callout--has-icon.success

Call to action callout with close icon

This example has an additional call to action link with button style. Also the close icon is additional.

.callout.warning.js-additional-class

Cards

The cards are our unit of basic information that allows to user to get an idea of what they can find in the next level of navigation. The basic structure of a Card is: container, image, title, text and link.

Basic Cards

Link variations

Card background variations

Shadow

Outline

Gray

Outline and gray

Header gray

Header green

Header line

Features Module

Features module component. Used to promote features on video and information pages.

30 Tage kostenlos testen
Mit Spaß Noten verbessern
und vollen Zugriff erhalten auf

4.062

sofaheld-Level

6.574

vorgefertigte
Vokabeln

10.877

Lernvideos

44.143

Übungen

38.833

Arbeitsblätter

24h

Hilfe von Lehrer*
innen

laufender Yeti

Inhalte für alle Fächer und Klassenstufen.
Von Expert*innen erstellt und angepasst an die Lehrpläne der Bundesländer.

30 Tage kostenlos testen

Testphase jederzeit online beenden



HAML code

Features Module Small

Features Module Small component. Used to promote features on the video page for organic traffic.

Mit Spaß Noten verbessern

4.062

sofaheld-Level

6.574

vorgefertigte
Vokabeln

10.877

Lernvideos

44.143

Übungen

38.833

Arbeitsblätter

24h

Hilfe von Lehrer*
innen

30 Tage kostenlos testen

Testphase jederzeit online beenden



HAML code

Forms

Through text fields, checkboxes or radio buttons, we can get input from our different users. Here you can find all the standard states of the basic elements that componse our forms.

STYLES
SPECS

Texts:

Label: h5

Input Text default: paragraph, Secondary

Input Text activated: paragraph

Input fields:

Border color hover: Gray

Border radius: 4px

Border color: Secondary

Background color focused: Light Gray

Disabled: 40%

Error text

Notification text

Notification text: text-xsmall, Dark Green

Error text: text-xsmall, Red L1

Helper text - lorem ipsum

Text

Helper text: .text-small, $gray

Checkbox

Error text

Checkbox:

Border radius: 4px

Helper text: .text-small, $gray

Radio button

Error text

Radio button outlined
Toggle

Focus state: Whenever the user clicks the element, the slider stays in its state, but the label will change from $dark-gray to $black font color.

Dropdown Menu
Dropdown / Selector

Labels

Labels are graphic identifiers attached to certain sections (like titles, texts or images) to highlight metadata or some special claim.

STYLES
SPECS

Default Label

Gray Medium Label

Green Label

Color: global styles palette

Radius: 4

text-small.dark-gray

Progress bar

The progress bar is made up of a gray background which rounded corners have a radius of 100. It can be used in small with the height of 8px or in big with the height of 16px. The default indicator color is green. If a second indicator color is required, as in courses, it will be used in yellow. If the bar is used near a box or card with green top border, the blue contrast progress bar is used. Each foundation-palette color names can be used to change the default meter color.

STYLES
SPECS

Basic Progress Bars

empty progress bar

Track: Gray Medium

Indicator: Green

filled progress bar

Progress Bar variations

separated progress bar

courses progress bar

First Indicator: Green

Second Indicator: Yellow

contrast progress bar

Indicator: Blue #0088B5

foundation-palette color progress bar

You can use each foundation-palette color names to change the default meter color.

Reveal

The basic structure of our modals is just an empty container where we can add any content inside such as texts, buttons, images, forms or videos. The normal way to close modals is by using the close icon on top right corner or adding a click trigger event with a button inside. Clicking outside of the modal or using the ESC key is allowed but not used frequently.

We’ve defined four sizes for responsive layouts but we set a maximum width (864px) to keep the content tiddy with a coherent visual outcome.

STYLES
SPECS

.tiny

width: 30%

padding: 16px

Diese Übung gibt´s bald auf dem Smartphone!

Viele unserer interaktiven Übungen sind für das Smartphone optimiert, diese leider noch nicht.

.small

width: 50%

padding: 32px

Zack! Boom! Bang!
Hau heute rein beim Lernen.
Autsch

.large

width: 90%

padding: 32px

Besuchst du uns aus Deutschland?

Wusstest du, dass es sofatutor auch speziell auf das deutsche Schulsystem abgestimmt gibt?

Mit sofatutor erhältst du geprüfte Online-Nachhilfe zu jeder Zeit und an jedem Ort. Unsere Lernvideos erklären auch schwierige Inhalte einfach und prägnant. Mit unseren Übungen zu jedem Video kannst du dein Wissen überprüfen und unsere Lehrer*innen helfen dir bei Fragen täglich im Hausaufgaben-Chat oder wöchentlich in einer Online-Nachhilfestunde. Unser kompletter Service wird dabei abgestimmt für jedes Schulsystem der deutschsprachigen Länder angeboten. Sowohl die Inhalte der Lernvideos und Kurse als auch unsere Suchfunktion und die thematische Seitenstruktur orientieren sich also immer genau am Schulsystem deines Landes

.full

width: 100%

padding: 32px

Tassel

Tassel component for special offers on welcome and pricing.

Sie haben einen Brief von uns erhalten?

Sie haben einen Brief von uns erhalten?



HAML code

Toast

The toast component takes 4 arguments and some extra options. The mandatory arguments are headline, text, button text and button link. Optionally you can also change the character illustration and whether the component is shown by default or not. This component's behaviour consists of minimizing when clicking on the close button and maximizing when clicking on the icon (try it out). Options such as changing the background color, or the icon when it's minimised, can be added in the future.

Du möchtest nicht immer nur Texte lesen?

Dann lerne doch mit Videos & Lernspielen für die Schule & übe dabei spielerisch.

sofatutor kostenlos testen


HAML code

Foundation Tooltip

We have two different tooltip implementations: One comes from Foundation and the second one is the old implementation, which we want to replace step by step. Here we only document the tooltips from Foundation. For further implementation options, check out the following link:

STYLES
SPECS

Background Color: Black

Color: White

Radius: 8

Background Color: White

Color: Black

Border: Medium-Gray