{% extends 'opal.html' %} {% load forms %} {% block content %}

OPAL UI Components

Buttons

Buttons lead with icons chosen from Font Awesome.


Checkboxes

Fields which have a boolean state

{% checkbox label="Make it so" %}

Checkbox Lists

List of items which each have a boolean state.

When used in a form, should be aligned with the form inputs (typically offset-md-3).

Name of Group


Modals

Present the user with an atomic interaction. Modals are based on the Angular UI-Bootstrap Modal.

Modals are available in three sizes - default, large and small.


Radio Buttons

List of mutually exclusive items

When used in a form, should be aligned with the form inputs (typically offset-md-3).

Name of Group

{% endblock %}