Ushahidi Logo Ushahidi Platform Pattern Library

Tested with


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


Form field

Form field, with instructions

These are some instructions that are related to this field.

Form field, with addons


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.


  • 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




    1 Stepper Heading 1

    2 Stepper Heading 2


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


    Neutral Message

    Please read this thing you should probably know.


    Congratulations! That thing you just did worked.


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


    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.


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

    Preparing export


    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.


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


    Timeline/Data Sub-Header

    6 of 6 Reports

    Sortable List w/ Handle

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