Ushahidi Platform Pattern Library

Tested with

Buttons

Our front-end guidelines explain how to use our mixin to add icons to buttons.

Button, with icon left-aligned

Button, with icon only

Beta Button, icon only on small screens

This button has a label on larger screens. On smaller screens, the label is hidden and the icon remains.

Button, loading

Full-width button, loading

Full-width button, beta, loading

Buttons Up/Down

Floating Action Button

Forms

Form field

Form field, with instructions

These are some instructions that are related to this field.

Form field, with addons

http://
http:// .ushahidi.io
.ushahidi.io

Form field, required

Form field, input with icon

Form field, date

Form field, time

Form field, success

Form field, error & alert

Invalid entry, please try again.

Fieldset: Checkboxes

Guitar players

Fieldset: Radio

Guitar players

Custom Fieldset

Title for checkboxes

Form Field Adapt: Text Input

Form Field Adapt: Text Area

Form Field Adapt: Required

List items

Examples below include li, dt and dd elements.

li

  • Short text A sentence or less
  • Short text A sentence or less

    • dt + dd

    Short text
    A sentence or less
    Short text
    A sentence or less

    Navigation

    Pagination

    Stepper

    1 Stepper Heading 1

    2 Stepper Heading 2

    Breadcrumbs

    1. Grandparent Page
    2. Parent Page

    Progress

    1. Choose file
    2. Organize data
    3. Configure posts

    Alerts

    Neutral Message

    Please read this thing you should probably know.

    Confirmation

    Congratulations! That thing you just did worked.

    Error

    Bummer! That didn't work, please try again.

    Messages

    Locked

    The report is locked because user is working on it right now. Try editing a different post.

    Other

    Timeline/Data Sub-Header

    6 of 6 Reports