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

OPAL Design Patterns

Living documentation of the available design patterns for OPAL applications

Presentation

Interaction

Forms

Presentation

Panels {% icon 'fa-paragraph' %}

A way of presenting discrete units of information.

Panel Primary

The Heading

The Body

Panel Default

The Heading

The Body

Panel Active

The Heading

The Body

Interaction

Modals {% icon 'fa-paragraph' %}

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.

Forms

Buttons {% icon 'fa-paragraph' %}

Buttons lead with icons chosen from Font Awesome.


Checkboxes {% icon 'fa-paragraph' %}

Fields which have a boolean state

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

Checkbox Lists {% icon 'fa-paragraph' %}

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


Radio Buttons {% icon 'fa-paragraph' %}

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 %}