Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae architecto, quisquam adipisci nesciunt est, enim laborum pariatur commodi ad laudantium. Nemo facere possimus dignissimos provident molestias animi, excepturi a quaerat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae architecto, quisquam adipisci nesciunt est, enim laborum pariatur commodi ad laudantium. Nemo facere possimus dignissimos provident molestias animi, excepturi a quaerat.

Blockquote
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum sunt modi obcaecati blanditiis sint. Tempora quasi reiciendis blanditiis, incidunt aliquam, facere sit, sunt eum nostrum cupiditate quo provident reprehenderit iusto.
Unordered list
Ordered list
  1. Ordered list item
  2. Ordered list item
    1. Nested ordered list item
    2. Nested ordered list item
  3. Ordered list item
TODO:
  • Some headers are Source Sans Pro
  • Component/section headers are generally different than 'prose' headers

Buttons











TODO:
  • Survey and training have green buttons

Form Controls

Input


Textarea


Radio buttons


Checkboxes


Vanilla select


Vanilla multiselect


Select2


Date picker

Calendar
February 2022
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28













Rich text editor

Forms

This help text explains the field or requirements

TODO:
  • Horizontal/inline alignment
  • Field group labels (e.g., "Survey Notifications" with 4 subsequent fields related to survey notifications. Used in Survey Assignment form)

Popovers

en.wikipedia.org Change







TODO
  • Popover React component requires a wrapping .pop__container div. The component should possibly contain this wrapper.
  • Currently the Popover component expects table rows to be passed in as content. Perhaps a more generic content-agnostic popover should be created?

Progress and loading

Loading Component
Small Loading
TODO:
  • Training and survey loaders different implementations than timeline

Tables

Table
Name Date
Brian Nov 3rd
Matt Nov 8th
Sage Dec 21st


Table striped
Name Date
Brian Nov 3rd
Matt Nov 8th
Sage Dec 21st


Table hoverable
Name Date
Brian Nov 3rd
Matt Nov 8th
Sage Dec 21st


Contextual row colors
Name Date
Matt Nov 8th
Info Nov 3rd
Matt Nov 8th
Warning Dec 21st
Matt Nov 8th
Success Dec 21st
Matt Nov 8th
Danger Dec 21st


Sortable
Name Date
Brian Nov 3rd
Matt Nov 8th
Sage Dec 21st


Expandable
Name Date
Brian Nov 3rd
Matt Nov 8th
Sage Dec 21st
Sub Header Sub Header 2
Sub Cell Sub Cell 2
Sub Cell 3 Sub Cell 4
Matt Nov 8th
Matt Nov 8th


Buttons and links
Name Date
Brian Nov 3rd
Matt Nov 8th
Sage Dec 21st
TODO:
  • Filters?
  • Dashboard Courses table header style vs Recent Activity styles, consolidate

Tabs

Tooltips

Hover for tooltip

Tooltip text



With indicator

Tooltip text



Tooltip

Tooltip text



Alerts

Course notification

Notification text


System notification

Error: There was an error


TODO:
  • Consolidate system/course notification CSS
  • Put close icon in icon font

Stats

3
Articles Created
66
Articles Edited
417
Total Edits
12
Student Editors

12

are up-to-date with training

70.9K
Words Added
1.44M
Article Views

Cards

Module

Section Header

A button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat tincidunt tortor eu iaculis. Sed id urna sem, quis malesuada lacus. Nulla iaculis malesuada libero, id vehicula sapien imperdiet eu.


Week
Add Block Delete Week
04/17-04/23 (T, Th)

Week 1

  • Wikipedia Assignment Overview

    In Class
    • Overview of the course
    • Introduction to how Wikipedia will be used in the course

    Handout: Editing Wikipedia


Course
View Course Page
Downtime projects
Instructors
Matt Fordham
School
Wiki University
Term
2016
# Students
0
View Course Page

Feminist Economics Spring 2016


TODO:
  • All examples above should/could be made universal. Currently use different markup and classes.
  • Cards for Surveys in separate stylesheet (not yet illustrated here).
  • Cards for Training in separate stylesheet (not yet illustrated here).

Icons

Arrow down
Arrow up
Arrow
Check
Circle question mark
Left arrow
Message
Plus
Restart
Right arrow
Search
Sort
Trash
Up arrow
Wiki logo
External link
TODO:
  • Only used in Training