This repository has been archived by the owner on Mar 5, 2020. It is now read-only.
UI Components
This section outlines styles and CSS code snippets for the user interface aspects of the site, including interactive elements.
| Type | Description |
|---|---|
| default | drop shadow 4px, corner radius 4px |
| hover | 3px down, drop shadow 1px |
For partner or cross promotions on teach.mozilla.org, they appear as banners on the Home Page below the main hero unit.
| Detail | Description |
|---|---|
| width | spans 100% of the main container width of the page |
| height | should be minimal and less than 300px high |
| background | using a neutral colour that is 10% opacity of #4D4E53 (Mozilla Charcoal)
|
| image | graphic for promotion can use their colours (full colour vector logo or vector artwork) and appears on the left |
| copy | text appears left aligned and using teach body copy style and colour (200 characters: recommended maximum character count) |
| call-to-action | links should be text (buttons are discouraged but if used, use the teach style button and colours) |
For sign-up forms and applications, there are the options to use modals that appear above a dark overlay over the page.
| Detail | Description |
|---|---|
| width | ___ |
| height | ___ |
| close button | upper right triangle, icon |
| typography | heading, body copy, form fields, confirmation |
| visuals | line art |
| button | standard |
The navigation is located on the left side displaying primary navigation items and when selected it may show additional secondary navigation items.
| Detail | Description |
|---|---|
| width | responsive; vertical (large-med devices), horizontal (med-small devices) |
| typography | ____ |
| visuals | small line art |
| colours | varies by section |
The footer is located on the bottom left of the navigational side bar.