Ushahidi Logo 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

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: Checkboxes, large

Female longboarders

Fieldset: Radio

Guitar players

Fieldset: Radio, large

Female longboarders

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

    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

    Notification - demo - logged out

    Nice work! You have more than 25 posts. Upgrade now to see the rest of your posts or reach out to our team about a full-service enterprise partnership for your project.

    Notification - demo - logged in

    City of Austin Service Requests is trying out a demo of Ushahidi. You will only be able to see the first 25 posts for the next 17 days.

    Locked

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

    Preparing export

    Loading...

    We are preparing 1,234 records for your CSV file. This may take a few moments. You can leave this page if you want. We will let you know when we're done.

    Export ready

    Export done. We exported 1,234 records to CSV. You should see your file in your downloads.

    Export-error

    Uh oh... you need to select some fields to export first.

    Other

    Timeline/Data Sub-Header

    6 of 6 Reports

    Sortable List w/ Handle

    • Item #1
    • Item #2
    • Item #3
    • Item #4