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
-
Was ist Zeit und wie lässt sie sich messen?
- Unser Video-Tipp zur Frage: Zeit
- Mehr Antworten auf der Themenseite: Grundgrößen und Einheiten der Mechanik
-
Was ist eine Strecke und wie lässt sich diese messen?
- Unser Video-Tipp zur Frage: Strecken
- Mehr Antworten auf der Themenseite: Grundgrößen und Einheiten der Mechanik
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.
Banners
A set of Banners will display underneath the menu header bar from side to side to promote campaigns, seasonal promotions and other marketing models. There are three banner variations with the option to change their colors.
default banner
student with active link banner
campaign banner
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.
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
.callout.callout--has-icon.sucess
.callout.callout--has-icon.warning.js-new-class
.callout.callout--has-icon.alert
Basic Callouts Full Width
.callout.callout--has-icon.alert
Detailed Callouts
.callout.callout--has-icon.success
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
-
Geldwerte mit Kommazahlen
##Die Kommaschreibweise bei…
Basic card
-
Geldwerte mit Kommazahlen
##Die Kommaschreibweise bei…
Basic hover
-
Geldwerte mit Kommazahlen
##Die Kommaschreibweise bei…
Mobile version
Link variations
-
Geldwerte mit Kommazahlen
##Die Kommaschreibweise bei…
-
-
Geldwerte mit Kommazahlen
##Die Kommaschreibweise bei…
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.
9.243
sofaheld-Level
6.600
vorgefertigte
Vokabeln
8.153
Lernvideos
38.631
Übungen
33.454
Arbeitsblätter
24h
Hilfe von Lehrkräften
Inhalte für alle Fächer und Klassenstufen.
Von Expert*innen erstellt und angepasst an die Lehrpläne der Bundesländer.
Testphase jederzeit online beenden
Features Module Small
Features Module Small component. Used to promote features on the video page for organic traffic.
9.243
sofaheld-Level
6.600
vorgefertigte
Vokabeln
8.153
Lernvideos
38.631
Übungen
33.454
Arbeitsblätter
24h
Hilfe von Lehrkräften
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
Checkbox:
Border radius: 4px
Helper text: .text-small, $gray
Radio button
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
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
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
Viele unserer interaktiven Übungen sind für das Smartphone optimiert, diese leider noch nicht.
.small
width: 50%
padding: 32px
.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?
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
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